Создайте игру Монти Холла на ванильном JavaScript

Опубликовано: 5 Января, 2022

Задача Монти Холла - это популярная вероятностная головоломка, основанная на телеигре и названная в честь ее ведущего, Монти Холла.

В этой игре Монти Холла

Будет три закрытых двери, и вам будет предложено выбрать одну из них. За одной дверью - машина, за другими - козы. Хозяин знает о размещении машины и коз.
После того, как вы выберете дверь, хозяин открывает одну из двух других дверей с козой.
Теперь вы можете либо придерживаться своего первоначального выбора двери, либо переключиться.

Вот проблеск игры.

Давайте создадим интерактивную версию этой игры с HTML, CSS и ванильным JavaScript.

HTML: Основные части, которые нам нужны в игре:

Диалоговое пространство для ведущего, где он / она взаимодействует с игроком.
3 двери
Страница результатов

Мы включаем все возможные сценарии и диалоги, а позже с JavaScript, мы можем использовать их при необходимости.

Здесь, в классе инструкций, мы включили все диалоги хоста, и мы можем сделать это интерактивным с помощью JavaScript. После класса инструкций идет основная секция, содержащая 3 двери. Наконец, у нас есть разные сценарии, основанные на выборе игрока.

HTML

 <!DOCTYPE html>
 < head >
    < title >MontyHall</ title >
    < link rel = "stylesheet" href = "style.css" >
 </ head >
 < body >
    < div id = "body" >
        < header >
            < h1 >welcome to Montyhall game</ h1 >
        </ header >
        < div id = "instructions" class = "instructions" >
            < div id = "row1" class = "row1" >
              Please Select a door
            </ div >
            < div id = "d1" >You selected door1</ div >
            < div id = "d2" >You selected door2</ div >
            < div id = "d3" >You selected door3</ div >
            < div id = "row2" class = "row2" >
                 
< p >Ok, I'm opening a door</ p >
 
                 
< p >Do you want to switch?</ p >
 
                < div class = "buttons" >
                    < button id = "btn-1" >Yes</ button >
                    < button id = "btn-2" >No</ button >
                </ div >
            </ div >
        </ div >
 
        < main class = "door-row" >
            < img id = "door1" class = "door"
                 src = "./door.png" alt = "door" >
            < img id = "door2" class = "door"
                 src = "./door.png" alt = "door" >
            < img id = "door3" class = "door"
                 src = "./door.png" alt = "door" >
 
        </ main >
    </ div >
    < div id = "switchAndWin" class = "result" >
         
< p >Congratulations!!!!!</ p >
 
         
< p >You made the right choice by switching</ p >
 
         
< p >By switching, you increased your
           probability of winning to 0.67</ p >
 
        < div class = "links" >
            < button >< a href =
 " https://en.wikipedia.org/wiki/Monty_Hall_problem "
                       target = "_blank" >
              Know more</ a >
            </ button >
            < button >< a href = "index.html" >
                      Play again
                    </ a ></ button >
        </ div >
    </ div >
    < div id = "switchAndLose" class = "result" >
         
< p >You Lost!!!</ p >
 
         
< p >The chances of you winning was 67% since you
            switched,yet you still lost </ p >
 
         
< p >Play again to redefine your luck</ p >
 
        < div class = "links" >
            < button >< a href =
 " https://en.wikipedia.org/wiki/Monty_Hall_problem "
                       target = "_blank" >
              Know more</ a >
            </ button >
            < button >< a href = "index.html" >Play again</ a ></ button >
        </ div >
    </ div >
    < div id = "NoSwitchAndWin" class = "result" >
         
< p >Congratulations!!!!!</ p >
 
         
< p >You are a very lucky person</ p >
 
         
< p >The probability of you winning was only 0.33 because
           you didn't switch,yet you still won</ p >
 
        < div class = "links" >
            < button >< a href =
 " https://en.wikipedia.org/wiki/Monty_Hall_problem "
                       target = "_blank" >
              Know more</ a >
            </ button >
            < button >< a href = "index.html" >
              Play again</ a >
            </ button >
        </ div >
    </ div >
    < div id = "NoSwitchAndLose" class = "result" >
         
< p >You Lost!!!!</ p >
 
         
< p >Since you didn't switch, your chances
            of winning was only 33%</ p >
 
         
< p >Play again to redefine your luck</ p >
 
        < div class = "links" >
            < button >< a href =
 " https://en.wikipedia.org/wiki/Monty_Hall_problem "
                       target = "_blank" >
              Know more</ a >
            </ button >
            < button >< a href = "index.html" >Play again</ a ></ button >
        </ div >
    </ div >
    < script src = "script1.js" async defer></ script >
 </ body >
 </ html > 

CSS: Давайте добавим немного стиля в нашу игру. Он легко настраивается, и вы можете свободно добавлять свои собственные стили.

CSS

 /*Basic Styling */
 * {
    margin : 0 ;
    padding : 0% ;
    box-sizing: border-box;
 }
 
body {
    background-color : #ffffff ;
    min-height : 100 vh;
    display : flex;
    align-items: center ;
    justify- content : center ;
    flex- direction : column;
 }
 
header {
    height : 20 vh;
    font-family : 'Bangers' , cursive ;
    display : flex;
    justify- content : center ;
    align-items: center ;
    font-size : 30px ;
    text-align : center ;
 }
 
.instructions {
    height : 15 vh;
    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 : 100 vw;
    height : 10 vw;
    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:

Объявите все глобальные переменные.
Скрыть ненужные элементы.
Создайте функцию для случайного перемешивания дверей каждый раз, когда мы играем.
При выборе добавьте слушателей событий для каждой двери.
Для каждой двери, по которой щелкают, покажите диалог хозяина, откройте дверь, в которой находится коза, и попросите игрока сделать выбор.
Затем, по выбору игрока, откройте дверь и отобразите страницу результатов.

Объявление переменных:

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(() =>

            
РЕКОМЕНДУЕМЫЕ СТАТЬИ
                                    


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2022. Все права защищены.