用 Vanilla JavaScript 创建一个 Monty Hall 游戏

Monty Hall 问题是一个流行的概率谜题，它基于一个电视游戏节目并以其主持人 Monty Hall 的名字命名。

在这场蒙蒂霍尔比赛中，

• 将有三扇关闭的门，您可以选择其中之一。其中一扇门后面是一辆汽车，另一扇门后面是山羊。主人知道汽车和山羊的位置。
• 选择一扇门后，主人会打开另外两扇有山羊的门之一。
• 现在，您可以坚持您最初选择的门，也可以切换。

这是游戏的一瞥。

让我们用 HTML、CSS 和 vanilla JavaScript 创建这个游戏的交互式版本。

HTML：我们在游戏中需要的主要部分是：

1. 主持人的对话空间，他/她在此与玩家互动。
2. 3门
3. 结果页

我们包括所有可能的场景和对话，然后使用 JavaScript，我们可以在必要时使用它们。

在这里，在指令类中，我们包含了主机的所有对话，我们可以用 JavaScript 使这个交互。在说明课之后，是包含 3 个门的主要部分。最后，根据玩家的选择，我们有不同的场景。

HTML

    MontyHall
    


    
        
            welcome to Montyhall game
        
        
            
              Please Select a door
            
            You selected door1
            You selected door2
            You selected door3
            
                  
Ok, I'm opening a door
  
                  
Do you want to switch?
  
                
                    Yes
                    No
                
            
        
  
        
            
            
            
  
        
    
    
          
Congratulations!!!!!
  
          
You made the right choice by switching
  
          
By switching, you increased your
           probability of winning to 0.67
  
        
            
              Know more
            
            
                      Play again
                    
        
    
    
          
You Lost!!!
  
          
The chances of you winning was 67% since you
            switched,yet you still lost 
  
          
Play again to redefine your luck
  
        
            
              Know more
            
            Play again
        
    
    
          
Congratulations!!!!!
  
          
You are a very lucky person
  
          
The probability of you winning was only 0.33 because
           you didn't switch,yet you still won
  
        
            
              Know more
            
            
              Play again
            
        
    
    
          
You Lost!!!!
  
          
Since you didn't switch, your chances 
            of winning was only 33%
  
          
Play again to redefine your luck
  
        
            
              Know more
            
            Play again
        
    
    

CSS：让我们为游戏添加一些样式。它是高度可定制的，可以随意添加自己的样式。

CSS

/*Basic Styling */
* {
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
}
  
body {
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
header {
    height: 20vh;
    font-family: 'Bangers', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    text-align: center;
}
  
.instructions {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: 'McLaren', cursive;
    margin: 30px 0;
}
  
.door-row {
    text-align: center;
    margin-top: 40px;
}
  
.door {
    width: 200px;
    height: 350px;
    margin: 10px 40px;
    margin-bottom: 40px;
    cursor: pointer;
    border: 10px solid #000;
}
  
.buttons {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
button {
    padding: 10px 40px;
    background-color: #000;
    border: none;
    border-radius: 50px;
    color: #f5f5f5;
    cursor: pointer;
    margin: 0 20px;
    font-size: 18px;
    outline:none;
    box-shadow: 0px 10px 13px -7px #000000, 
                7px 5px 15px 5px rgba(0, 0, 0, 0);
}
  
button:active {
    transform: scale(0.9);
}
  
.result p {
    font-size: 22px;
    line-height: 40px;
    text-align: center;
}
  
.result p:first-child {
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 30px;
}
  
.links {
    width: 100vw;
    height: 10vw;
    text-align: center;
    margin: 40px 0;
}
  
.result a {
    color: gray;
    background-color: #000;
    text-decoration: none;
}
.result a:hover {
    color:#f5f5f5;
}
  
@media screen and (max-width:700px) {
    header {
        margin-top: 20px;
        font-size: 20px;
        text-align: center;
    }
}

JavaScript：JavaScript的工作流程是：

1. 声明所有全局变量。
2. 隐藏不必要的元素。
3. 创建一个函数，用于在我们每次玩游戏时随机洗牌。
4. 选择时为每个门添加事件侦听器。
5. 对于点击的每一扇门，显示主机对话，打开一扇包含山羊的门，然后让玩家选择。
   然后，根据玩家的选择打开门并显示结果页面。

• 声明变量：

  Javascript

  // Declaring global variables
  const body = document.getElementById('body');
  const instructions = document.getElementById('instructions');
  const row1 = document.getElementById('row1');
  const row2 = document.getElementById('row2');
  const d1 = document.getElementById('d1');
  const d2 = document.getElementById('d2');
  const d3 = document.getElementById('d3');
  const switchChoiceYes = document.getElementById('btn-1');
  const switchChoiceNo = document.getElementById('btn-2');
  const doorImage1 = document.getElementById('door1');
  const doorImage2 = document.getElementById('door2');
  const doorImage3 = document.getElementById('door3');
  const SwitchAndWin = document.getElementById("switchAndWin");
  const SwitchAndLose = document.getElementById("switchAndLose");
  const NoSwitchAndWin = document.getElementById("NoSwitchAndWin");
  const NoSwitchAndLose = document.getElementById("NoSwitchAndLose");
    
  // Image of Car
  const winPath = 
  "https://image.flaticon.com/icons/svg/3118/3118467.svg";
  // Image of Goat
  const losePath = 
  "https://image.flaticon.com/icons/svg/836/836069.svg";
    
  // Variables for shuffling the doors
  var openDoor1, openDoor2, openDoor3, winner;
  

• 隐藏不必要的元素：

  Javascript

  // Hiding unnecessary elements
  row2.hidden = true;
  SwitchAndWin.hidden = true;
  SwitchAndLose.hidden = true;
  NoSwitchAndWin.hidden = true;
  NoSwitchAndLose.hidden = true;
  d1.hidden = true;
  d2.hidden = true;
  d3.hidden = true;
  

• 创建一个函数，用于在我们每次玩游戏时随机洗牌。

  Javascript

  // Function to randomly shuffle the doors
  function winDoorGenerator() {
      winner = Math.floor(Math.random() * 3);
      if (winner === 1) {
          openDoor1 = winPath;
          openDoor2 = losePath;
          openDoor3 = losePath;
      } else if (winner === 2) {
          openDoor2 = winPath;
          openDoor1 = losePath;
          openDoor3 = losePath;
      } else {
          openDoor3 = winPath;
          openDoor2 = losePath;
          openDoor1 = losePath;
      }
  }
  // Calling the function
  winDoorGenerator();
  

• door1 的事件监听器：

  Javascript

  // Event listener for door 1
  doorImage1.onclick = () => {
    
      // Revealing necessary elements for dialogue
      row1.hidden = true;
      d1.hidden = false;
      setTimeout(()=>{
          d1.hidden = true;
      },1000);
      setTimeout(()=>{
          row2.hidden = false;
      },1000);
    
      // Opening a door which has a goat behind it.
      if (openDoor2 === losePath) {
          setTimeout(() => 
          { doorImage2.src = openDoor2; }, 2000);
    
      } else if (openDoor3 === losePath) {
          setTimeout(() => 
          { doorImage3.src = openDoor3; }, 2000);
      }
    
      //Event listener if the player opts to switch
      switchChoiceYes.onclick = () => {
    
          // If the opened door is door2, forming a
          // suitable dialogue.
          if (doorImage2.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg"){
              row2.hidden = true;
              instructions.innerHTML = "You switched to door3";
              setTimeout(()=>{
                  instructions.innerHTML = 
                  "Revealing your chosen door......";
              },1000);
    
              // Opening the choosen door
              setTimeout(() => 
              { doorImage3.src = openDoor3; }, 2500);
    
              //Conditions to display the result page
              if (openDoor3 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          }
          //If the opened door is door3, forming a suitable dialogue.
          else if (doorImage3.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg") {
              row2.hidden = true;
              instructions.innerHTML = "You switched to door2";
              setTimeout(()=>{
                  instructions.innerHTML = 
                  "Revealing your chosen door......";
              },1000);
                
              // Opening the choosen door
              setTimeout(() => { doorImage2.src = openDoor2; }, 2500);
              //Conditions to display the result page
              if (openDoor2 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          }
      }
      //Event listener if the player does not opts to switch
      switchChoiceNo.onclick = () => {
          row2.hidden = true;
          instructions.innerHTML = "Your choice is still door1";
          setTimeout(() => 
          { instructions.innerHTML = 
          "Revealing your chosen door......"; }, 1000);
            
          // Opening the choosen door
          setTimeout(() => { doorImage1.src = openDoor1; }, 2500);
            
          // Conditions to display the result page
          if (openDoor1 === losePath) {
              setTimeout(() => { noSwitchAndLose(); }, 3500)
          } else {
              setTimeout(() => { noSwitchAndWin(); }, 3500)
          }
      }
  }
  

• switchAndWin()、switchAndLose()、noSwitchAndWin()、noSwitchAndLose() 是四个函数，它们根据玩家的选择显示结果。

  Javascript

  const switchAndWin = () => {
      body.hidden = true;
      SwitchAndWin.hidden = false;
  }
  const switchAndLose = () => {
      body.hidden = true;
      SwitchAndLose.hidden = false;
  }
  const noSwitchAndWin = () => {
      body.hidden = true;
      NoSwitchAndWin.hidden = false;
  }
  const noSwitchAndLose = () => {
      body.hidden = true;
      NoSwitchAndLose.hidden = false;
  }
  

• 同样，对于 door2 和 door3，在点击时添加事件侦听器。

  Javascript

  doorImage2.onclick = () => {
      row1.hidden = true;
      d2.hidden = false;
      setTimeout(() => { d2.hidden = true; }, 1000);
      setTimeout(() => { row2.hidden = false; }, 1000)
    
      if (openDoor1 === losePath) {
          setTimeout(() =>
          { doorImage1.src = openDoor1; }, 2000);
    
      } else if (openDoor3 === losePath) {
          setTimeout(() => 
          { doorImage3.src = openDoor3; }, 2000);
      }
    
      switchChoiceYes.onclick = () => {
          if (doorImage1.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg") {
              row2.hidden = true;
              instructions.innerHTML = "You switched to door3"
              setTimeout(() => 
              { instructions.innerHTML = 
              "Revealing your chosen door......"; }, 1000);
              setTimeout(() => { doorImage3.src = openDoor3; }, 2500);
              if (openDoor3 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          } else if (doorImage3.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg") {
              row2.hidden = true;
              instructions.innerHTML = "You switched to door1";
              setTimeout(() => { instructions.innerHTML 
              = "Revealing your chosen door......"; }, 1000);
              setTimeout(() => { doorImage1.src = openDoor1; }, 2500);
              if (openDoor1 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          }
      }
      switchChoiceNo.onclick = () => {
          row2.hidden = true;
          instructions.innerHTML = "Your choice is still door2"
          setTimeout(() => { instructions.innerHTML =
          "Revealing your chosen door......"; }, 1000);
          setTimeout(() => { doorImage2.src = openDoor2; }, 2500);
          if (openDoor2 === losePath) {
              setTimeout(() => { noSwitchAndLose(); }, 3500)
          } else {
              setTimeout(() => { noSwitchAndWin(); }, 3500)
          }
      }
  }
  doorImage3.onclick = () => {
      row1.hidden = true;
      d3.hidden = false;
      setTimeout(() => { d3.hidden = true; }, 1000);
      setTimeout(() => { row2.hidden = false; }, 1000)
    
      if (openDoor1 === losePath) {
          setTimeout(() => { doorImage1.src = openDoor1; }, 2000);
    
      } else if (openDoor2 === losePath) {
          setTimeout(() => { doorImage2.src = openDoor2; }, 2000);
      }
    
      switchChoiceYes.onclick = () => {
          if (doorImage1.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg") {
              row2.hidden = true;
              instructions.innerHTML = "You switched to door2"
              setTimeout(() => { instructions.innerHTML = 
              "Revealing your chosen door......"; }, 1000);
              setTimeout(() => { doorImage2.src = openDoor2; }, 2500);
              if (openDoor2 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          } else if (doorImage2.src === 
          "https://image.flaticon.com/icons/svg/836/836069.svg") {
              row2.hidden = true;
              instructions.innerHTML = "You switched to door1"
              setTimeout(() => { instructions.innerHTML = 
              "Revealing your chosen door......"; }, 1000);
              setTimeout(() => { doorImage1.src = openDoor1; }, 2500);
              if (openDoor1 === losePath) {
                  setTimeout(() => { switchAndLose(); }, 3500)
              } else {
                  setTimeout(() => { switchAndWin(); }, 3500)
              }
          }
      }
      switchChoiceNo.onclick = () => {
          row2.hidden = true;
          instructions.innerHTML = "Your choice is still door3"
          setTimeout(() => { instructions.innerHTML = 
          "Revealing your chosen door......"; }, 1000);
          setTimeout(() => { doorImage3.src = openDoor3; }, 2500);
          if (openDoor3 === losePath) {
              setTimeout(() => { noSwitchAndLose(); }, 3500)
          } else {
              setTimeout(() => { noSwitchAndWin(); }, 3500)
          }
      }
  }
  

这是游戏的实时版本： https : //monty-hall-gfg.netlify.app/