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

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

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

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

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

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

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

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

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

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

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

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(() => Technical Scripter JavaScript Как сделать HTML CSS Проект РЕКОМЕНДУЕМЫЕ СТАТЬИ Что такое тернарный оператор? 23 Января, 2024 Количество чисел между L и R, взаимно простых с P 27 Февраля, 2023 Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно. 27 Февраля, 2023 Максимизируйте сумму трех чисел, выполнив побитовое XOR 27 Февраля, 2023 Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого 27 Февраля, 2023 Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки 27 Февраля, 2023 Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты 27 Февраля, 2023 Найдите общее количество фигур 'X' 26 Февраля, 2023