LabEx
ログイン登録

モンティ・ホール問題のシミュレーション Web アプリ

JavaScriptBeginner
オンラインで実践に進む

はじめに

モンティ・ホール問題のシミュレーションプロジェクトへようこそ。モンティ・ホール問題は、番組のシナリオに基づく確率のパズルです。このプロジェクトでは、このパズルを示すための簡単なウェブベースのシミュレーションを作成する方法を案内します。最後までやると、機能するモンティ・ホールのシミュレーションができ、自分で理論をテストできるようになります。

👀 プレビュー

Monty Hall

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

  • ウェブアプリケーションの基本的なプロジェクト構造を設定する方法。
  • HTML と CSS を使ってインタラクティブな要素を持つ簡単なユーザーインターフェイスを設計する方法。
  • JavaScript を使ってゲームロジックを実装し、モンティ・ホール問題をシミュレートする方法。
  • ユーザーのインタラクションに基づいて動的なフィードバックをユーザーに表示する方法。
  • 手を動かしたシミュレーションを通じて、確率の基本概念を理解して適用する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

  • 基本的なウェブアプリケーション構造を開発する。
  • HTML と CSS を使ってインタラクティブなユーザーインターフェイスを作成する。
  • JavaScript でゲームロジックと条件付きの意思決定を実装する。
  • ユーザーの行動に基づいて動的なフィードバックを提供する。
  • 実際のシミュレーションを通じて、確率の概念を深く理解する。

プロジェクトファイルをセットアップする

コーディングに取り組む前に、プロジェクト構造を準備しましょう。必要なファイルは 3 つです。

  1. index.html - これがウェブページの構造を保持します。
  2. styles.css - ここでシミュレーションの外観を定義します。
  3. script.js - このファイルにはシミュレーションの背後にあるロジックが含まれます。

始めに、上記の 3 つのファイルを作成します。

cd ~/project
## 必要なファイルを作成する
touch index.html styles.css script.js

このステップでは、ウェブベースのシミュレーションの基本ファイルをセットアップしています。これらのファイルは、アプリケーションの構造、スタイル、ロジックを保持します。

HTML ページの構造を整える

このステップでは、ウェブページの構造を整えます。index.html ファイルを開き、以下のコンテンツを追加します。

<!-- index.html content -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monty Hall Problem Simulation</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>

  <body>
    <h2>Monty Hall Problem Simulation</h2>
    <!-- 残りのコンテンツは次のステップで追加します。 -->
  </body>
</html>

index.html はウェブページの基本構造を提供します。ここでユーザーがシミュレーションとやり取りを行います。

インタラクティブ要素を追加する

さて、ユーザーがシミュレーションとやり取りできるように、HTML ページにインタラクティブな要素を追加しましょう。

index.html に以下のコンテンツを追加します。

<!-- index.html の body タグの中 -->
<p>Pick a door to start:</p>
<button 1</button>
<button 2</button>
<button 3</button>

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

<h3>Results:</h3>
<p>Wins when switched: <span id="switchWins">0</span></p>
<p>Losses when switched: <span id="switchLosses">0</span></p>
<p>Wins when stayed: <span id="stayWins">0</span></p>
<p>Losses when stayed: <span id="stayLosses">0</span></p>

これでインタラクティブな要素を使ってウェブページを強化しています。ボタンと結果表示を追加することで、ユーザーはモンティ・ホールのゲームに積極的に参加し、自分の決定の結果を見ることができます。

ページをスタイリッシュにする

私たちのシミュレーションが視覚的に魅力的になるように、いくつかのスタイルを追加しましょう。styles.css ファイルを開き、以下のコンテンツを貼り付けます。

/* styles.css content 
基本的なウェブページレイアウトのためのスタイルシート：
- ボディにデフォルトの明るい灰色の背景、中央揃えのテキスト、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 ファイルは、私たちのシミュレーションの視覚的な側面を定義する場所です。

  1. ボディのスタイル：

    • font-family: "Arial", sans-serif;：ウェブページのボディのデフォルトフォントを Arial に設定します。Arial が利用できない場合、サンセリフフォントにフォールバックします。
    • margin: 0; padding: 0;：デフォルトのマージンとパディングを削除します。
    • background-color: #f8f9fa;：ページ全体に明るい灰色の背景色を設定します。
    • color: #333;：テキストに暗い灰色の色を設定します。
    • text-align: center;：テキストをページの中央に揃えます。
    • padding-top: 50px;：ボディの上部に 50px のパディングを追加します。

  2. 見出しのスタイル：

    • h2, h3 { color: #007bff; }：h2 と h3 の見出しは特定の青色で塗られます。

  3. ボタンのスタイル：

    • ボタンは青色の背景、白文字、境界なしです。
    • border-radius で角丸を設定します。
    • ボタンにマウスオーバーすると、背景色が暗い青色になり、ボタンが少し拡大します (transform: scale(1.05);)。

  4. 結果コンテナ：

    • #result：id が "result" の要素を表します。
    • 白い背景、灰色の境界、微妙なシャドウがあります。
    • コンテナは角丸のカードまたはボックスのようにスタイリッシュになっています。

  5. 段落のスタイル：

    • 段落 (p) は上下に 10px のマージンがあります。これにより、連続する段落と他の要素の間にスペースが確保されます。

このステップにより、ユーザーインターフェイスが快適で読みやすくなります。

グローバル変数を初期化する

さて、ゲームロジックを実装しましょう。

まず、ゲームの状態を追跡するために使用するグローバル変数を設定します。

script.js を開き、以下を追加します。

// script.js content

// Global variables to track game state
let selectedDoor;
let carBehindDoor;
let switchWins = 0;
let stayWins = 0;
let switchLosses = 0;
let stayLosses = 0;

script.js ファイルで一連のグローバル変数を定義しています。これらの変数は、どのドアが選ばれたか、車がどこにあるか、勝利と敗北のカウントなど、ゲームの状態を管理するのに役立ちます。

ゲーム初期化関数をセットアップする

さて、ゲームを初期化する関数を追加しましょう。この関数は、各ラウンドの開始時に車の位置をランダムに設定します。

script.js に以下を追加します。

// Initialize the game by randomizing the car's location
function initializeGame() {
  carBehindDoor = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

initializeGame 関数は、各ラウンドの舞台を設定します。車の位置をランダムに設定することで、各ゲームの反復が予測不可能であることを保証します。

ドア選択ロジックを実装する

ゲームが初期化されたら、ユーザーのドア選択と、モンティによるヤギのいるドアの 1 つの開示を処理する必要があります。

script.js に追加します。

// A function called when a door is picked
function pickDoor(doorNumber) {
  initializeGame();
  selectedDoor = doorNumber;
  let goatDoor = getGoatDoor();
  document.getElementById("result").innerHTML =
    `You selected Door ${selectedDoor}. Monty opens Door ${goatDoor} to reveal a goat.<br>` +
    `Do you want to <button or ` +
    `<button
}

pickDoor 関数は、ユーザーのドア選択を捕捉します。ヤギのいるドアの 1 つを開示することで次のフェーズを準備し、切り替えるか維持するかの選択を促します。

ヤギの扉を特定する

モンティがヤギを見せるために開くドアを決定するために、別の関数が必要です。このドアは、プレイヤーが選んだドアや、その後ろに車があるドアではなければなりません。

script.js に続けて追加します。

// Find a door with a goat behind it
function getGoatDoor() {
  let goatDoor;
  do {
    goatDoor = Math.floor(Math.random() * 3) + 1;
  } while (goatDoor === selectedDoor || goatDoor === carBehindDoor);
  return goatDoor;
}

getGoatDoor は、ユーザーが選んだドアと車のドア以外のどのドアが開かれてヤギが見られるかを決定する重要な関数です。ゲームのルールに制約されたランダムな選択を行います。

景品開示ロジックをセットアップする

最後に、ユーザーが切り替えるか維持するかの選択に基づいて最終的な開示を処理するロジックを設定します。今のところ、この関数は仮置きとなり、後続の手順で拡張されます。

script.js の追加を次のコードで完了します。

// Reveal the prize behind the chosen door
function revealPrize(switchDoor) {
  if (switchDoor) {
    selectedDoor = 6 - selectedDoor - getGoatDoor();
  }
  // We'll add more logic here in the following steps.
}

initializeGame();

revealPrize 関数は、ゲームの最後の部分を処理します。ユーザーが切り替えるか維持するかの選択に基づいて、この関数は最終的にユーザーが車を勝ち取るか、ヤギを獲得するかを決定します。

ゲーム結果を表示する

このステップでは、revealPrize 関数を強化して、ユーザーの選択結果を表示します。script.js の revealPrize 関数に次のコードを追加します。

// Continuing the revealPrize function in script.js

if (selectedDoor === carBehindDoor) {
  if (switchDoor) {
    switchWins++;
    document.getElementById("switchWins").innerText = switchWins;
  } else {
    stayWins++;
    document.getElementById("stayWins").innerText = stayWins;
  }
  document.getElementById("result").innerText =
    "Congratulations! You won a car! Pick a door to play again.";
} else {
  if (switchDoor) {
    switchLosses++;
    document.getElementById("switchLosses").innerText = switchLosses;
  } else {
    stayLosses++;
    document.getElementById("stayLosses").innerText = stayLosses;
  }
  document.getElementById("result").innerText =
    "Sorry, you got a goat. Pick a door to play again.";
}

ここでの revealPrize 関数の強化は、ゲーム結果をユーザーに伝えるためのものです。このステップはフィードバックにとって重要で、ユーザーが自分の決定の結果を見ることができ、確率の結果を観察するために繰り返しプレイするように促すことができます。

プロジェクトの実行

モンティ・ホールのシミュレーションを動かすには：

  1. すべてのファイル（index.html、styles.css、script.js）を保存してください。
  2. ウェブブラウザで index.html ファイルを開きます。

open web

最後に、このステップでは、ユーザーに対してシミュレーションをブラウザでどのように実行するかを案内し、コードを視覚的で対話型の体験に変えます。

Monty Hall

まとめ

おめでとうございます！あなたは成功裏にモンティ・ホール問題のシミュレーションを作成しました。このプロジェクトを通じて、簡単なウェブプロジェクトの構成方法、要素のスタイリング方法、および対話型の JavaScript 機能の実装方法を学びました。今、あなた自身で複数のシミュレーションを実行して、モンティ・ホール問題の確率の結果を見ることができます！

✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習
関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development