蒙提霍尔问题

最近看韩国电视剧【D.P：逃兵追缉令】里面提到一个有趣的数学概率游戏 -> 蒙提霍尔问题

意思是：参赛者会看见三扇门，其中一扇门的里面有一辆汽车，选中里面是汽车的那扇门，就可以赢得该辆汽车，另外两扇门里面则都是一只山羊，让你任意选择其中一个，然后打开其余两个门中的一个并且是山羊（去掉一个错误答案），这时，让你重新选择。那么你是会坚持原来的选择，还是换选另外一个未被打开过的门呢？

大家可以想一想如果是自己，我们是会换还是不会换？

好了，我当时看到后感觉很有意思，所以我简单写了一套代码，源码贴在下面，大家可以验证一下，先告诉大家，换赢得汽车的概率是2/3，不换赢得汽车的概率是1/3

<header>
<h1>请选择换不换？</h1><button class="refresh">刷新</button>
</header>
<section>
<div class="box">
<h2>1</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
<div class="box">
<h2>2</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
<div class="box">
<h2>3</h2>
<canvas width="300" height="100"></canvas>
<div class="prize">奖品</div>
</div>
</section>
<span>请选择号码牌</span>
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button class="confirm">确认</button>
<span class="confirm-text"></span>
<span class="opater">
<button class="change">换</button>
<button class="no-change">不换</button>
</span>
<p>
<strong>游戏规则：</strong>
<span>

  上面有三个号码牌，其中一个号码牌的里面有汽车，选中里面是汽车的号码牌，

  你就可以赢得该辆汽车，另外两个号码牌里面则都是一只山羊，

  你任意选择其中一个，然后打开其余两个号码牌中的一个并且是山羊（去掉一个错误答案），

  这时，你有一个重新选择的机会，你选择换还是不换？
</span>
</p>

.prize {
width: 300px;
height: 100px;
background-color: pink;
font-size: 36px;
line-height: 100px;
text-align: center;
position: absolute;

}

canvas {
position: absolute;
z-index: 2;

}

section {
display: flex;

}

.box {
width: 300px;
height: 200px;
cursor: pointer;

}

.box+.box {
margin-left: 8px;

}

header {
display: flex;
align-items: center;

}

header button {
margin-left: 8px;
height: 24px;

}
p {
width: 400px;
background-color: pink;

}

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));

    [array[i], array[j]] = [array[j], array[i]];

  }
return array;

}
function getRandomNumber() {
return Math.random() > 0.5 ? 1 : 2;

}
let a1 = [0, 1, 2]
let i1 = undefined
let i2 = undefined
let isChange = false
const opater = document.querySelector('.opater')

opater.style.display = 'none'
// 随机一个奖品
const prizes = document.querySelectorAll('.prize')
let a0 = [0, 1, 2]

a0 = shuffleArray(a0)

a0.forEach((v,i) => {
const innerText = !!v ? '山羊' : '汽车'

  prizes[i].innerText = innerText

})

const canvas = document.querySelectorAll('canvas')
const confirmText = document.querySelector('.confirm-text')

canvas.forEach(c => {
// 使用canvas实现功能
// 1. 使用canvas绘制一个灰色的矩形
const ctx = c.getContext('2d')

  ctx.fillStyle = '#ccc'

  ctx.fillRect(0, 0, c.width, c.height)
// 2. 刮奖逻辑
// 鼠标按下且移动的时候，需要擦除canvas画布
let done = false

  c.addEventListener('mousedown', function () {
if (i1 === undefined) return alert('请先选择号码牌，并确认！')
if (!isChange) return alert('请选择换不换！')

    done = true

  })

  c.addEventListener('mousemove', function (e) {
if (done) {
// offsetX 和 offsetY 可以获取到鼠标在元素中的偏移位置
const x = e.offsetX - 5
const y = e.offsetY - 5

      ctx.clearRect(x, y, 10, 10)

    }

  })

  c.addEventListener('mouseup', function () {

    done = false

  })

})
const confirm = document.querySelector('.confirm')
const refresh = document.querySelector('.refresh')

confirm.onclick = function () {
let select = document.querySelector('select')
const options = Array.from(select.children)

  confirmText.innerText = `您选择的号码牌是${select.value}，请问现在换不换？`
// 选择后，去掉一个错误答案
// i1是下标

  i1 = select.value - 1
// delValue是值
let delValue = undefined
// 通过下标找值
if (a0[i1] === 0) {

    delValue = getRandomNumber()

  } else {

    delValue = a0[i1] === 1 ? 2 : 1

  }
// 通过值找下标

  i2 = a0.indexOf(delValue)
// 选择的是i1, 去掉的是
const ctx = canvas[i2].getContext('2d')

  ctx.clearRect(0, 0, 300, 100)

  options.map(v => v.disabled = true)

  confirm.style.display = 'none'

  opater.style.display = 'inline-block'

}
const change = document.querySelector('.change')
const noChange = document.querySelector('.no-change')

change.onclick = function () {

  isChange = true
const x = a1.filter(v => v !== i1 && v !== i2)

  confirmText.innerText = `您确认选择的号码牌是${x[0] + 1}，请刮卡！`

  opater.style.display = 'none'

}

noChange.onclick = function () {

  isChange = true

  confirmText.innerText = `您确认选择的号码牌是${i1 + 1}，请刮卡！`

  opater.style.display = 'none'

}

refresh.onclick = function () {
window.location.reload()

}