Симуляция Задачи Монти Холла

Введение

Добро пожаловать в проект Симуляции проблемы Монти Холла. Проблема Монти Холла - это головоломка по теории вероятностей, основанная на сценарии телевизионного игры. В этом проекте мы проведем вас по созданию простой веб-симуляции, чтобы продемонстрировать эту головоломку. В конце вы получите функциональную симуляцию Монти Холла, которую сможете протестировать самостоятельно.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

настраивать базовую структуру проекта для веб-приложения;
проектировать простой пользовательский интерфейс с интерактивными элементами с использованием HTML и CSS;
реализовывать игровую логику с использованием JavaScript, симулируя проблему Монти Холла;
отображать динамические обратные связи пользователям на основе их взаимодействий;
понимать и применять фундаментальные концепции вероятностей на практике с помощью симуляции.

🏆 Достижения

После завершения этого проекта вы сможете:

разрабатывать базовую структуру веб-приложения;
создавать интерактивный пользовательский интерфейс с использованием HTML и CSS;
реализовывать игровую логику и условное принятие решений в JavaScript;
предоставлять динамическую обратную связь пользователям на основе их действий;
получить более глубокое понимание концепций вероятностей на основе практической симуляции.

Настройка файлов проекта

Прежде чем приступить к написанию кода, подготовим структуру нашего проекта. Нам понадобятся три файла:

index.html - в этом файле будет хранится структура нашего веб-страницы.
styles.css - здесь мы определим внешний вид нашей симуляции.
script.js - в этом файле будет содержаться логика нашей симуляции.

Для начала создайте три файла, перечисленные выше.

cd ~/project
## Создайте необходимые файлы
touch index.html styles.css script.js

В этом шаге мы настраиваем основные файлы для нашей веб-симуляции. Эти файлы будут содержать структуру, стиль и логику нашего приложения.

Структурирование HTML-страницы

В этом шаге мы разложим структуру нашей веб-страницы. Откройте файл index.html и добавьте следующий контент:

<!-- Содержимое index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Симуляция проблемы Монти Холла</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>

  <body>
    <h2>Симуляция проблемы Монти Холла</h2>
    <!-- Остальной контент будет добавлен в следующих шагах. -->
  </body>
</html>

index.html предоставляет базовую структуру нашей веб-страницы. Именно здесь пользователь будет взаимодействовать с нашей симуляцией.

✨ Проверить решение и практиковаться

Добавление интерактивных элементов

Теперь добавим интерактивные элементы на наш HTML-страницу, чтобы пользователь мог взаимодействовать с симуляцией.

Добавьте следующий контент в index.html:

<!-- Внутри тега body index.html -->
<p>Выберите дверь, чтобы начать:</p>
<button onclick="pickDoor(1)">Дверь 1</button>
<button onclick="pickDoor(2)">Дверь 2</button>
<button onclick="pickDoor(3)">Дверь 3</button>

<div id="result"></div>

<h3>Результаты:</h3>
<p>Выигрыши при смене: <span id="switchWins">0</span></p>
<p>Поражения при смене: <span id="switchLosses">0</span></p>
<p>Выигрыши при оставлении: <span id="stayWins">0</span></p>
<p>Поражения при оставлении: <span id="stayLosses">0</span></p>

Теперь мы усовершенствуем нашу веб-страницу, добавив интерактивные элементы. Добавляя кнопки и отображение результатов, пользователь может активно участвовать в игре Монти Холла и видеть результаты своих решений.

✨ Проверить решение и практиковаться

Стилизация страницы

Для того чтобы наша симуляция была визуально привлекательной, добавим несколько стилей. Откройте файл styles.css и вставьте следующий контент:

/* Содержимое styles.css 
Стили для базового макета веб-страницы:
- Устанавливает светло-серый фон по умолчанию, выравнивание текста по центру и шрифт Arial для тела страницы.
- Стили для заголовков h2 и h3 с определенным синим цветом.
- Стилизация кнопок включает:
  - Синий фон с белым текстом.
  - Круглые углы.
  - Эффект наведения мыши для затемнения фона и небольшого увеличения кнопки.
- #result - это оформленный контейнер с отступами, границей и тенью.
- Абзацы имеют отступы сверху и снизу в 10px.
*/

body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
  padding-top: 50px;
}

h2,
h3 {
  color: #007bff;
}

button {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background-color 0.3s,
    transform 0.3s;
}

button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

#result {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

p {
  margin: 10px 0;
}

В файле styles.css мы определяем визуальные аспекты нашей симуляции.

Стили тела страницы:
- font-family: "Arial", sans-serif;: Устанавливает шрифт по умолчанию для тела веб-страницы Arial. Если Arial недоступен, то используется любой sans-serif шрифт.
- margin: 0; padding: 0;: Удаляет стандартные отступы и заполнения.
- background-color: #f8f9fa;: Устанавливает светло-серый фон для всей страницы.
- color: #333;: Устанавливает темно-серый цвет для текста.
- text-align: center;: Выравнивает текст по центру страницы.
- padding-top: 50px;: Добавляет отступ в 50px сверху тела страницы.
Стили заголовков:
- h2, h3 { color: #007bff; }: Заголовки h2 и h3 окрашиваются в определенный оттенок синего цвета.
Стили кнопок:
- Кнопка имеет синий фон, белый текст и без границы.
- Круглые углы задаются с помощью border-radius.
- При наведении на кнопку ее фон становится темнее по оттенку синего цвета, а кнопка немного увеличивается (transform: scale(1.05);).
Контейнер результатов:
- #result: Представляет элемент с идентификатором "result".
- Он имеет белый фон, серую границу и незначительную тень.
- Контейнер оформлен так, чтобы выглядеть как карточка или коробка с округлыми углами.
Стили абзацев:
- Абзацы (p) имеют отступ в 10px сверху и снизу. Это обеспечивает расстояние между последовательными абзацами и другими элементами.

Этот шаг обеспечивает приятный и читаемый интерфейс пользователя.

✨ Проверить решение и практиковаться

Инициализация глобальных переменных

Теперь реализуем игровую логику.

Начнем с настройки глобальных переменных, которые мы будем использовать для отслеживания состояния игры.

Откройте script.js и добавьте:

// Содержимое script.js

// Глобальные переменные для отслеживания состояния игры
let selectedDoor;
let carBehindDoor;
let switchWins = 0;
let stayWins = 0;
let switchLosses = 0;
let stayLosses = 0;

Мы определяем набор глобальных переменных в файле script.js. Эти переменные помогают управлять состоянием игры, например, какой дверь была выбрана, где находится машина и количество побед и поражений.

✨ Проверить решение и практиковаться

Настройка функции инициализации игры

Теперь добавим функцию для инициализации игры. Эта функция будет случайным образом определять расположение машины в начале каждого раунда.

Добавьте следующее в script.js:

// Инициализируем игру, случайным образом определяя расположение машины
function initializeGame() {
  carBehindDoor = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

Функция initializeGame подготовливает условия для каждого раунда. Она случайным образом определяет расположение машины, обеспечивая непредсказуемость каждого игрового цикла.

✨ Проверить решение и практиковаться

Реализация логики выбора двери

После инициализации игры нам нужно обработать выбор двери пользователем и открытие одной из дверей с козой Монти.

Добавьте в script.js:

// Функция, вызываемая при выборе двери
function pickDoor(doorNumber) {
  initializeGame();
  selectedDoor = doorNumber;
  let goatDoor = getGoatDoor();
  document.getElementById("result").innerHTML =
    `Вы выбрали Дверь ${selectedDoor}. Монти открывает Дверь ${goatDoor}, чтобы показать козу.<br>` +
    `Вы хотите <button onclick="revealPrize(true)">Поменять</button> или ` +
    `<button onclick="revealPrize(false)">Остаться</button>?`;
}

Функция pickDoor фиксирует выбор двери пользователем. Она готовит следующую фазу, открывая одну из дверей с козой и предлагая пользователю выбрать поменять дверь или оставаться.

✨ Проверить решение и практиковаться

Определение двери с козой

Нам нужна отдельная функция, чтобы определить, какую дверь откроет Монти, чтобы показать козу. Эта дверь не может быть той, которую выбрал игрок, или той, за которой находится машина.

Продолжайте добавлять в script.js:

// Найти дверь, за которой находится коза
function getGoatDoor() {
  let goatDoor;
  do {
    goatDoor = Math.floor(Math.random() * 3) + 1;
  } while (goatDoor === selectedDoor || goatDoor === carBehindDoor);
  return goatDoor;
}

getGoatDoor - это важная функция, которая определяет, какую дверь, помимо выбранной игроком и дверь с машиной, откроют, чтобы показать козу. Она использует случайный выбор, ограниченный правилами игры.

✨ Проверить решение и практиковаться

Настройка логики открытия приза

Наконец, настроим логику для обработки финального открытия в зависимости от выбора пользователя поменять дверь или оставаться. В настоящее время эта функция будет являться заглушкой и будет расширена в последующих шагах.

Завершите добавления в script.js следующим кодом:

// Откройте приз за выбранной дверью
function revealPrize(switchDoor) {
  if (switchDoor) {
    selectedDoor = 6 - selectedDoor - getGoatDoor();
  }
  // Мы добавим больше логики здесь на следующих шагах.
}

initializeGame();

Функция revealPrize обрабатывает финальную часть игры. В зависимости от выбора пользователя поменять дверь или оставаться, эта функция в конечном итоге определит, выиграл ли пользователь машину или получил козу.

✨ Проверить решение и практиковаться

Отображение результатов игры

В этом шаге мы усовершенствуем функцию revealPrize, чтобы отображать результаты выбора пользователя. Добавьте следующий код в функцию revealPrize в script.js:

// Продолжение функции revealPrize в script.js

if (selectedDoor === carBehindDoor) {
  if (switchDoor) {
    switchWins++;
    document.getElementById("switchWins").innerText = switchWins;
  } else {
    stayWins++;
    document.getElementById("stayWins").innerText = stayWins;
  }
  document.getElementById("result").innerText =
    "Поздравляем! Вы выиграли машину! Выберите дверь, чтобы сыграть снова.";
} else {
  if (switchDoor) {
    switchLosses++;
    document.getElementById("switchLosses").innerText = switchLosses;
  } else {
    stayLosses++;
    document.getElementById("stayLosses").innerText = stayLosses;
  }
  document.getElementById("result").innerText =
    "К сожалению, вы получили козу. Выберите дверь, чтобы сыграть снова.";
}

Усовершенствование функции revealPrize здесь служит для передачи результатов игры пользователю. Этот шаг важен для обратной связи, позволяя пользователю увидеть последствия своих решений и поощряя повторные игры для наблюдения за вероятностными исходами.

✨ Проверить решение и практиковаться

Запуск проекта

Для того, чтобы увидеть симуляцию Монти Холла в действии:

Убедитесь, что все ваши файлы (index.html, styles.css, script.js) сохранены.
Откройте файл index.html в веб-браузере.

Наконец, этот шаг показывает пользователю, как запустить симуляцию в своем браузере, превращая код в визуальное и интерактивное взаимодействие.

Резюме

Поздравляем! Вы успешно создали симуляцию Задачи Монти Холла. Следуя этому проекту, вы узнали, как структурировать простой веб-проект, стилизовать его элементы и реализовать интерактивную функциональность на JavaScript. Теперь вы можете запускать несколько симуляций, чтобы亲眼 увидеть вероятностные исходы Задачи Монти Холла!

Веб-приложение для симуляции Задачи Монти Холла

Введение

👀 Предпросмотр

🎯 Задачи

🏆 Достижения

Настройка файлов проекта

Структурирование HTML-страницы

Добавление интерактивных элементов

Стилизация страницы

Инициализация глобальных переменных

Настройка функции инициализации игры

Реализация логики выбора двери

Определение двери с козой

Настройка логики открытия приза

Отображение результатов игры

Запуск проекта

Резюме