今天小草老师布置了一个题目,利用js设计一个游戏,而这款游戏恰好就是当前美国的一个很著名的综艺里面的游戏:
三门问题(Monty Hall problem)亦称为蒙提霍尔问题、蒙特霍问题或蒙提霍尔悖论,大致出自美国的电视游戏节目Let's Make a Deal。问题名字来自该节目的主持人蒙提·霍尔(Monty Hall)。参赛者会看见三扇关闭了的门,其中一扇的后面有一辆汽车,选中后面有车的那扇门可赢得该汽车,另外两扇门后面则各藏有一只山羊。当参赛者选定了一扇门,但未去开启它的时候,节目主持人开启剩下两扇门的其中一扇,露出其中一只山羊。主持人其后会问参赛者要不要换另一扇仍然关上的门。问题是:换另一扇门是否会增加参赛者赢得汽车的机率。如果严格按照上述的条件,那么答案是会。不换门的话,赢得汽车的几率是1/3。换门的话,赢得汽车的几率是2/3。
正好让我想到上学期学过的概率论的问题。
因为车子在A或者B或者C门后面的概率是一样的,是等可能的,我们先假设参赛者先选A门,若参赛者在主持人开牌之后仍然开这扇门,车子在门A后面,这种概率为1/3,然后主持人一定会打开一扇羊的门,也就是你当前剩下的选择只有一种了(除了选择A门之外)这样的话,就相当于主持人将两个可能的答案排除一个,将中奖的概率强行挤在一起,也就是打开另一扇门中奖的概率直接乘二,是不是与我们的常识相悖呢,这也是个很有趣的概率问题,究其原因就是主持人的排除操作,为我们增加了概率,具体用概率论的公式来讲的话,可能要涉及到先验和后验概率,使用贝叶斯公式进行求解,但是显然没有我这里好理解:
所以结论就是我们要毫不犹豫地换门!
当然,本文的重点当然不是这个,只是做一个简单的js的小程序来模拟这个游戏的规则,难理解的还是概率问题,至于游戏的逻辑,就是很简单的一个机制,相信各位一看代码便知,只是竹子刚刚开始学习js,对于很多用法还不是很熟练,比如相等是三个等号,比如全局变量,还有作为一个acmer,真的很难适应没有类型的变量,在判断分支的时候忽略了这个问题而导致竹子改了好久,注意全局变量的使用,初学js,代码有些简陋,希望各位读者不喜勿喷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Door Game</title>
<link rel="stylesheet" href="b.css">
<style media="screen">
* {
margin: 0px;
padding: 0px;
font-size: 20px;
}
</style>
</head>
<body>
</div>
<div class="Header">
<!-- <img src="img/banner.jpg" alt=""> -->
</div>
<div class = "zhengwen">
<div class="Sidebar">
</div>
<div class="content">
<div class = "title">
Open the Door!
</div>
<div class = "GameArea">
<div class = "doors">
<img id = "0" src="img/door.jpg" onclick="ClickHandler(this);" alt="">
<img id = "1" src="img/door.jpg" onclick="ClickHandler(this);" alt="">
<img id = "2" src="img/door.jpg" onclick="ClickHandler(this);" alt="">
</div>
<div class = "result">
<p id = "res">Welcome!</p>
</div>
</div>
<div class = "footer">
<input id = "but" type="button" value = "" onclick = "ChangeImage()">
<script type="text/JavaScript">
// 推荐的事件处理函数的写法
var myImage = [];
myImage[0] = document.getElementById("0");
myImage[1] = document.getElementById("1");
myImage[2] = document.getElementById("2");
let randomNum1 = Math.random() * 3;
var n = Math.floor(randomNum1);
var target = myImage[n];
var flag = 0, flag1 = 0;
var goal = document.getElementById("but");
var res = document.getElementById("res");
function ClickHandler(sender) {
if(flag1 === 0){
let m = n;
let p = parseInt(sender.id);
if(flag === 0) {
if(p !== n ){
m = 3 - n - p;
}
else {
while(m === n){
let randomNum2 = Math.random() * 3;
m = Math.floor(randomNum2);
}
}
let img = myImage[m];
img.src = 'img/goat.JPG';
flag = 1;
}
else {
flag1 = 1;
let y = parseInt(sender.id);
if(y!== n){
sender.src = 'img/goat.JPG';
res.textContent = "You Lose!";
}
else if(y === n){
sender.src = 'img/car.JPG';
let goal = document.getElementById("res");
res.textContent = "You Win!";
}
goal.value = "Play again!";
}
}
}
function ChangeImage(){
let randomNum1 = Math.random() * 3;
n = Math.floor(randomNum1);
target = myImage[n];
flag = 0;
flag1 = 0;
res.textContent = "Welcome!";
goal.value = "";
for(let i = 0; i < 3; i ++){
myImage[i].src = 'img/door.jpg';
}
}
</script>
</div>
<div>
</div>
</body>
</html>
.Header{
display: flex;
background-image: url("img/banner.jpg");
background-position: center;
height: 120px;
width: 100%;
background-repeat: no-repeat;
background-color: aquamarine;
z-index: 1;
}
.zhengwen{
display:flex;
}
.Sidebar{
background-color:aqua;
width: 25%;
}
.content{
display: grid;
justify-items: center;
width: 60%;
}
.GameArea{
height: 400px;
width: 660px;
display: grid;
background-image: url("img/wall.jpg");
}
.doors{
width: 400px;
height: 350px;
justify-self: center;
align-items: center;
display: flex;
}
.doors img{
width: 120px;
height: 300px;
margin: 5px;
}
.footer{
height: 30px;
color: coral;
}
.title{
background-color: aliceblue;
font-size: larger;
color: rgb(165, 42, 114);
}
.result{
justify-self: center; /* 水平居中 */
color: rgb(20, 107, 220);
}