📌  相关文章
📜  用 Vanilla JavaScript 创建一个 Monty Hall 游戏

📅  最后修改于: 2021-11-07 08:26:39             🧑  作者: Mango

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?

                   
                                                          
            
        
           
            door             door             door            
    
    
          

Congratulations!!!!!

             

You made the right choice by switching

             

By switching, you increased your            probability of winning to 0.67

                
    
          

You Lost!!!

             

The chances of you winning was 67% since you             switched,yet you still lost

             

Play again to redefine your luck

                
    
          

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

                
    
          

You Lost!!!!

             

Since you didn't switch, your chances              of winning was only 33%

             

Play again to redefine your luck

                
    


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
// 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();


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)
        }
    }
}


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;
}


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)
        }
    }
}


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/