当前位置: 首页 > news >正文

把三门问题做成了"游戏"

Screenshot_20251017_222522

代码:

<html><head><meta charset="UTF-8">
<meta name="screen-orientation" content="landscape">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3门</title>
<style>
body {background: #010;overflow: hidden;display: grid; justify-content: center; align-items: center;
}.light {position: absolute; width: 200px; height: 200px;border-radius: 50%; filter: blur(30px);transform: translate(-50%, -50%);transition: all 1s ease;
}.all-doors { display: flex; gap: 40px; }.door-item {  display: flex; flex-direction: column; align-items: center; }.door-frame {background: #000;position: relative; width: 180px; height: 300px; overflow: hidden;border: 15px solid #8B4513; /* 主边框颜色 */border-style: groove; /* 3D凹槽效果 */box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), /* 内阴影增加深度 */0 0 30px rgba(139, 69, 19, 0.8); /* 外发光效果 */
}.door-frame::before {z-index: -1;position: absolute; top: -25px; left: -25px; right: -25px; bottom: -25px;border: 10px solid #A0522D; /* 外层边框颜色 */border-style: ridge; /* 3D脊状效果 */
}.door {z-index: 2;position: absolute; width: 100%; height: 100%; background-repeat: repeat-y;  /* Y轴方向重复 */background-size: 100% auto;   /* X轴方向拉伸 */background-position: left top;transition: transform 0.5s ease;display: grid; place-items: center;font-size: 300%; font-weight: bold;cursor: hand;
}.door.open { transform: translateY(-100%); }img {position: absolute; left: 50%; bottom: 20px;transform: translateX(-50%) scale(2);
}.fullscr {z-index: 100;position: fixed; top: 0; left: 0; width: 100%; height: 100%;display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}.dialog {background: white;position: relative; width: 300px; margin-bottom: 5em;border-radius: 16px;padding: 24px;
}.dialog-content {margin-bottom: 30px; line-height: 1.5;display: flex; align-items: center;
}button {padding: 8px 16px;border: none; border-radius: 8px;font-weight: bold; font-size: 125%;
}button, #statInfo, .door { color: white; }
</style></head>
<body>
<div class="all-doors"><div class="door-item"><div class="door-frame"><div class="door">0</div><img class="door-img" id="img1"></div></div><div class="door-item"><div class="door-frame"><div class="door">1</div><img class="door-img" id="img2"></div></div><div class="door-item"><div class="door-frame"><div class="door">2</div><img class="door-img" id="img3"></div></div>
</div><p style="color:white; text-align:center" id="statInfo">不换: 0/0<br>换: 0/0</p><div class="fullscr" id="dlg"><div class="dialog"><div class="dialog-content"><table><tr><td style="font-size:250%; margin:8px">&#x1F610;</td><td id="info"></td></tr></table></div><div><button style="background:green" onclick="change(1)" id="change-btn"></button><button style="margin-left:2em; background:red" onclick="change(0)" id="keep-btn">不换</button></div>
</div></div>
<div class="light" id="light1"></div><div class="light" id="light2"></div>
<script>
WOOD = `data:image/gif;base64,
R0lGODdhoAAIAIQAAGYzAJkzAGZmAJlmAMxmAGYzM5kzM8wzM2ZmM5lmM8xmM5mZM8yZM5lmZsxmZv9mZpmZZsyZZv+ZZszMZv/
MZsyZmf+ZmczMmf/MmQAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAoAAIAAAI/wADGBhgIEACgQQTGjiYYODChw0jQlwYMYFFiw
owJsjIceNGjgoUMAg5sqRIkSUjMGCgsqXLCDBjypRZIcKEmhciXKiwM+fOmzph1pxJVCbLlixXOlh50iRBAAwNGizI0GHUqwQTZ
I2owEDXrx49dgyZceQCBWcTjBS5VIFKtwyWyo378mjRoDmB5uSJV2eFm3pt/q054a5dlksjuBWp+K3ikQ4HFAiAwCDUhVIbZoUo
USKBiAMuWlzYUezGtGQXK4AgUu3JxyORtnQb027MwjEJ44wwuKdf3kCH2uR9F+bRpEiXmjRJGaHDyJg1R89slQDnAw3BciRtOuR
GBg0YnP8m2fYx26RwE8u+q5sCcAs6JeTEoNPCTfoX5McXPnzmcQcqzeVYXEqN5JwAVGUGQHQMRjRVRQ+FRpFHXnX30XcfkaTacso
RmNhxxcnknlCCAVYBXz8NBhRuheUkQYjGxUjgYkyZlVFzDiEoGXRVMbTVQJolgF2FX3FnYVkbOaCWWg2EdBZ4NNK4UmO0wVUbTC/
iRhhxu/nE05d+3TQYcYJhaSZyjRGI1IzmZeamVVMptFlVXVU02kWhZRTWWBd6R1ZJDqDE2KBprhfji0QFN4F+FVAwmKMT2NcoYfD
9FYEEwuE2kwQgsvRaU00FUABBOk4nXWdWLZRVAF0RdCNYFRItKRZHZ50VwZJLuSYlSgF6KuMDxdUkQWGW7nVTT739lhd8LBZlV5U
uxebpjAEBADs=`.replace(/\s+/g, '')CAR = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEX/AAAAAABBoxIDAAAApU
lEQVR42rXRsQ2DMBAF0I9SuPQIjMJoYKVI6RFYJZmAFUhFa4sGJIRz34eAIorScI2fzv6yfEbaCldgrRU9YIgVUrVgsSmFSjDzaCuIh
BeMRCcYiOGMjhjP8ERMeLXEfEdTLkA1FWiQq8BTcUNQWPQKc2zt2FM/4HPeRPiFqAT6roiH4n3AKdwRd4lrcgLpFRlb55/bv4HDJCyH
EE7oS2IyuOyXP9tZNQQ0eWIFAAAAAElFTkSuQmCC`.replace(/\s+/g, '')GOAT = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEX///8AAABVwtN+AAABC
UlEQVR42pXSsUoDQRAG4JUrok1OSWEjOSTFYSdY2ATuEXwLr0wgrXgJeQKxCkiCjyA+gLHzsDjsBJsrlCtdWdALnvu7uzOLWOavvmKY
GYYR4Ig1sfQYJ4x+RNBDjzQkyLAgTFoEHVWEOhsRFHaoYYUp4QsVQSa3hLp9RNDjEaOz4jX+8MNQjYfmDRXE3gYBKDNGnVjcAU3E0Bb
fFicGq4Up+oemYOjUYGARf+hubLErRfewZa4RqGDet+gpzBeFwY3BMjSYSdEeJgZXpTi10/Fc6Z7Dwzs6hAFmDnmKnBB7HOM+c7jEk8
cFIcfE4THHtcPLG/YJrzggfGLLYSrPNx2C8mw7W/sBKL/16KyT2mK6wwAAAABJRU5ErkJggg==`.replace(/\s+/g, '')

let log = console.log
let rand = () => Math.round(2 * Math.random())
let diff = (a, b) => new Set([...a].filter(x => !b.has(x)))let imgs = [ img1, img2, img3 ]
let doors = document.querySelectorAll('.door')
let prize, host, player
let cnt = [0, 0], win = [0, 0]
let allOpen = 0doors.forEach(e => {e.style.backgroundImage = `url(${WOOD})`e.addEventListener('click', (ev) => { reveal(player = parseInt(e.textContent)) })
})function reveal () {do host = rand(); while (host === prize || host === player)doors[host].classList.add('open')info.innerHTML = '你选择了'+player+'号门。<br>李咏为你打开了'+host+'号门。<br>你要不要换?'dlg.style.display = 'flex';
}function stat (change) {let s = change ? ' 换: ' : '不换: 's += win[change] + '/' + cnt[change]if (cnt[change]) s += ' ' + Math.round(1000 * win[change]/cnt[change]) / 10 + '%'return s
}function change (change ) {++cnt[change]if (change) {let s = diff(new Set([0, 1, 2]), b = new Set([player, host]))let n = [...s][0]let m = playerdo m = (m + 1) % 3; while (m === host)if (m !== n) alert('shit')player = n}if (player === prize) ++win[change]statInfo.innerHTML = stat(0) + '<br>' + stat(1)newRound()
}function newRound () {for (d of doors) d.classList.remove('open')for (i of imgs) i.src = GOATprize = rand()imgs[prize].src = CARdlg.style.display = 'none'
}newRound()onkeydown = () => { allOpen ^= 1for (d of doors) {if (allOpen) d.classList.add('open') else d.classList.remove('open') }
}setInterval(() => {[light1, light2].forEach(t => {const x = Math.random() * 100, y = Math.random() * 100const size = (Math.random() + 1) * 150const { style } = t, s = style // :-)
    s.left = `${x}%`; s.top = `${y}%`s.width = `${size}px`; s.height = `${size}px`s.background = `radial-gradient(circle, ${t === light1 ? 'red' : 'white'}, transparent 50%)`s.opacity = Math.random() * 0.5})
}, 1000)
</script></body></html>

我是卖鼠标(微动)的啊啊啊。:-)

xxx

http://www.hskmm.com/?act=detail&tid=33309

相关文章:

  • 下一代CPU驱动高性能计算革新
  • [KaibaMath]1010 关于关于收敛数列有界性的证明
  • 卫星地图匹配定位 - MKT
  • 10.17 —— (VP) 2021icpc沈阳
  • 10.17每日总结
  • 今天宝宝进面了
  • 《大象Thinking in Projects》读书笔记1
  • 20251017
  • MT签名去除签名校验分析
  • uml
  • P3643 [APIO2016] 划艇 分析
  • day016
  • uml九图和数据流图总结
  • UpdateSourceTrigger和Mode的区别
  • NOIP2020 T2
  • Alex-VGG3
  • 第二章日志分析-redis应急响应
  • 第一章 应急响应- Linux入侵排查
  • 浏览器多开的方法
  • 10月17号
  • 19. 删除链表的倒数第 N 个结点
  • Day13
  • 第一章日志分析-mysql应急响
  • 操作系统应用构建(十二)RustDesk 用户服务器搭建——东方仙盟筑基期
  • python-IDLE定制界面大小
  • 高级语言程序设计第1次作业
  • Maui:通过附加属性将命令绑定到事件
  • 超好用的浏览器多开小工具!轻松管理多个账号,可以无限制使用其他插件
  • 微服务组件-Eureka 科技详解
  • 新学期每日总结(第10天)