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:
- Espacio de diálogo para el anfitrión, donde interactúa con el jugador.
- las 3 puertas
- 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:
- Declarar todas las variables globales.
- Ocultar elementos innecesarios.
- Crear una función para barajar aleatoriamente las puertas cada vez que jugamos.
- Agregue detectores de eventos para cada puerta cuando lo elija.
- 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/