简单写一个JavaScript的游戏

小竹子14

已于 2023-11-20 19:47:55 修改

阅读量79

点赞数 5

文章标签：游戏概率论 html 前端 css javascript

于 2023-11-20 15:53:49 首次发布

本文链接：https://blog.csdn.net/weixin_73529240/article/details/134510075

版权

今天小草老师布置了一个题目，利用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);
}

小竹子14

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
简单写一个JavaScript的游戏

不换门的话，赢得汽车的几率是1/3。换门的话，赢得汽车的几率是2/3。当然，本文的重点当然不是这个，只是做一个简单的js的小程序来模拟这个游戏的规则，难理解的还是概率问题，至于游戏的逻辑，就是很简单的一个机制，相信各位一看代码便知，只是竹子刚刚开始学习js，对于很多用法还不是很熟练，比如相等是三个等号，比如全局变量，还有作为一个acmer，真的很难适应没有类型的变量，在判断分支的时候忽略了这个问题而导致竹子改了好久，注意全局变量的使用，初学js，代码有些简陋，希望各位读者不喜勿喷。
复制链接

扫一扫