代码:
<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">😐</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