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

Screenshot_20251017_223530

<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 = 0

doors.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 = player
    do 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 = GOAT
  imgs[prize = rand()].src = CAR
  dlg.style.display = 'none'
}

newRound()

onkeydown = () => { 
  allOpen ^= 1
  for (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() * 100
    const size = (Math.random() + 1) * 150
    const { 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>

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

补充：今天翻旧代码，Math.round(ary.length)，应为Math.floor(ary.length)或Math.round(ary.length-1)

posted @ 2025-10-17 22:29  华容道专家  阅读(12)  评论(0)    收藏  举报