Crear un juego de Monty Hall en Vanilla JavaScript

Posted on by Rudeus Greyrat

El problema de Monty Hall es un acertijo de probabilidad popular basado en un programa de juegos de televisión y que lleva el nombre de su presentador, Monty Hall. 

En este juego de Monty Hall, 

  • Habrá tres puertas cerradas y se le dará la opción de elegir una de ellas. Detrás de una de las puertas, hay un coche y detrás de las otras puertas, cabras. El anfitrión sabe sobre la ubicación del automóvil y las cabras.
  • Después de elegir una puerta, el anfitrión abre una de las otras dos puertas que tiene una cabra.
  • Ahora, puede quedarse con su elección original de puerta o puede cambiar.

Aquí hay un vistazo del juego.

Creemos una versión interactiva de este juego con HTML, CSS y JavaScript estándar.

HTML: Las partes principales que necesitamos en el juego son:

  1. Espacio de diálogo para el anfitrión, donde interactúa con el jugador.
  2. las 3 puertas
  3. página de resultados

Incluimos todos los escenarios y diálogos posibles y luego con JavaScript, podemos usarlos cuando sea necesario.

Aquí, en la clase de instrucciones, incluimos todos los diálogos del anfitrión, y podemos hacer esto interactivo con JavaScript. Después de la clase de instrucciones, está la sección principal que contiene las 3 puertas. Por último, tenemos diferentes escenarios en función de la elección del jugador.

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: Agreguemos un poco de estilo a nuestro juego. Es altamente personalizable y siéntete libre de agregar tus propios estilos.

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: El flujo de trabajo de javascript es: 

  1. Declarar todas las variables globales.
  2. Ocultar elementos innecesarios.
  3. Crear una función para barajar aleatoriamente las puertas cada vez que jugamos.
  4. Agregue detectores de eventos para cada puerta cuando lo elija.
  5. Por cada puerta en la que se haga clic, muestre el diálogo del anfitrión, abra una puerta que contenga una cabra y pídale al jugador que elija.
    Luego, según la elección del jugador, abra la puerta y muestre la página de resultados.

Declarando las variables:

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;

Ocultar los elementos innecesarios:

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;

Crear una función para barajar aleatoriamente las puertas cada vez que jugamos.

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

Oyente de eventos para la puerta 1:

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 chosen 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 chosen 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 chosen 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() son cuatro funciones que muestran el resultado del jugador según su elección.

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

De manera similar, para la puerta 2 y la puerta 3, agregue detectores de eventos cuando haga clic.

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

Aquí está la versión en vivo del juego: https://monty-hall-gfg.netlify.app/

Publicación traducida automáticamente

Artículo escrito por twaves53 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *