LabEx
Se connecterInscription gratuite

Application web de simulation du problème de Monty Hall

JavaScriptJavaScriptBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Bienvenue dans le projet de simulation du problème de Monty Hall. Le problème de Monty Hall est un puzzle de probabilité basé sur un scénario de jeu télévisé. Dans ce projet, nous allons vous guider dans la création d'une simulation web simple pour démontrer le puzzle. À la fin, vous aurez une simulation fonctionnelle de Monty Hall pour tester la théorie vous-même.

👀 Aperçu

Monty Hall

🎯 Tâches

Dans ce projet, vous allez apprendre :

  • Comment configurer une structure de projet de base pour une application web.
  • Comment concevoir une interface utilisateur simple avec des éléments interactifs à l'aide de HTML et CSS.
  • Comment implémenter la logique du jeu à l'aide de JavaScript, en simulant le problème de Monty Hall.
  • Comment afficher des réponses dynamiques aux utilisateurs en fonction de leurs interactions.
  • Comment comprendre et appliquer les concepts fondamentaux de probabilité grâce à une simulation pratique.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

  • Développer une structure de base d'application web.
  • Créer une interface utilisateur interactive à l'aide de HTML et CSS.
  • Implémenter la logique du jeu et la prise de décision conditionnelle en JavaScript.
  • Fournir des réponses dynamiques aux utilisateurs en fonction de leurs actions.
  • Gagner une compréhension plus approfondie des concepts de probabilité grâce à une simulation pratique.

Configurer les fichiers du projet

Avant de plonger dans la programmation, préparons la structure de notre projet. Nous aurons besoin de trois fichiers :

  1. index.html - Ce fichier contiendra la structure de notre page web.
  2. styles.css - Ici, nous définirons l'apparence de notre simulation.
  3. script.js - Ce fichier contiendra la logique derrière notre simulation.

Pour commencer, créez les trois fichiers mentionnés ci-dessus.

cd ~/projet
## Créez les fichiers requis
touch index.html styles.css script.js

Dans cette étape, nous configurons les fichiers de base de notre simulation web. Ces fichiers contiendront la structure, le style et la logique de notre application.

Structurer la page HTML

Dans cette étape, nous allons disposer la structure de notre page web. Ouvrez le fichier index.html et ajoutez le contenu suivant :

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

  <body>
    <h2>Simulation du problème de Monty Hall</h2>
    <!-- Le reste du contenu sera ajouté dans les étapes suivantes. -->
  </body>
</html>

Le fichier index.html fournit la structure de base de notre page web. C'est là que l'utilisateur interagira avec notre simulation.

✨ Vérifier la solution et pratiquer

Ajouter des éléments interactifs

Maintenant, ajoutons des éléments interactifs à notre page HTML pour que l'utilisateur puisse interagir avec la simulation.

Ajoutez le contenu suivant à index.html :

<!-- À l'intérieur de la balise body de index.html -->
<p>Choisissez une porte pour commencer :</p>
<button onclick="pickDoor(1)">Porte 1</button>
<button onclick="pickDoor(2)">Porte 2</button>
<button onclick="pickDoor(3)">Porte 3</button>

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

<h3>Résultats :</h3>
<p>Victoires en changeant : <span id="switchWins">0</span></p>
<p>Défaites en changeant : <span id="switchLosses">0</span></p>
<p>Victoires en restant : <span id="stayWins">0</span></p>
<p>Défaites en restant : <span id="stayLosses">0</span></p>

Nous améliorons maintenant notre page web avec des éléments interactifs. En ajoutant des boutons et un affichage des résultats, l'utilisateur peut participer activement au jeu de Monty Hall et voir les résultats de ses décisions.

✨ Vérifier la solution et pratiquer

Styliser la page

Pour que notre simulation soit visuellement attrayante, ajoutons quelques styles. Ouvrez le fichier styles.css et collez le contenu suivant :

/* contenu de styles.css 
Feuille de style pour une mise en page de base de page web :
- Définit un fond gris clair par défaut, un alignement du texte au centre et une police Arial pour le corps.
- Styles pour les en-têtes h2 et h3 avec une couleur bleue spécifique.
- Le style du bouton comprend :
  - Couleur de fond bleue avec texte blanc.
  - Bords arrondis.
  - Effet au survol pour assombrir le fond et agrandir légèrement le bouton.
- #result est un conteneur stylisé avec un rembourrage, une bordure et une ombre.
- Les paragraphes ont une marge supérieure et inférieure de 10 px.
*/

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

Le fichier styles.css est où nous définissons les aspects visuels de notre simulation.

  1. Styles du corps :

    • font-family: "Arial", sans-serif; : Définit la police par défaut du corps de la page web sur Arial. Si Arial n'est pas disponible, elle tombe回退到任何无衬线字体。
    • margin: 0; padding: 0; : Supprime la marge et le rembourrage par défaut.
    • background-color: #f8f9fa; : Définit une couleur de fond gris clair pour toute la page.
    • color: #333; : Définit une couleur de texte gris foncé.
    • text-align: center; : Affiche le texte au centre de la page.
    • padding-top: 50px; : Ajoute un rembourrage de 50 px au haut du corps.

  2. Styles des en-têtes :

    • h2, h3 { color: #007bff; } : Les en-têtes h2 et h3 sont colorés avec une teinte bleue spécifique.

  3. Styles des boutons :

    • Le bouton a un fond bleu, un texte blanc et aucune bordure.
    • Les coins arrondis sont définis avec border-radius.
    • Lorsque l'on survole le bouton, sa couleur de fond devient une teinte bleue plus foncée et le bouton s'agrandit légèrement (transform: scale(1.05);).

  4. Conteneur de résultat :

    • #result : Représente un élément avec l'identifiant "result".
    • Il a un fond blanc, une bordure grise et une ombre subtile.
    • Le conteneur est stylisé pour ressembler à une carte ou à une boîte avec des coins arrondis.

  5. Styles des paragraphes :

    • Les paragraphes (p) ont une marge de 10 px au-dessus et en-dessous. Cela assure un espacement entre les paragraphes consécutifs et les autres éléments.

Cette étape garantit que l'interface utilisateur est agréable et lisible.

✨ Vérifier la solution et pratiquer

Initialiser les variables globales

Maintenant, mettons en œuvre la logique du jeu.

Commencez par configurer les variables globales que nous utiliserons pour suivre l'état du jeu.

Ouvrez script.js et ajoutez :

// contenu de script.js

// Variables globales pour suivre l'état du jeu
let porteSelectionnee;
let voitureDerriereLaPorte;
let victoiresEnChangeant = 0;
let victoiresEnRestant = 0;
let defaitesEnChangeant = 0;
let defaitesEnRestant = 0;

Nous définissons un ensemble de variables globales dans le fichier script.js. Ces variables aident à gérer l'état du jeu, comme quelle porte a été choisie, où se trouve la voiture et le compte des victoires et des défaites.

✨ Vérifier la solution et pratiquer

Configurer la fonction d'initialisation du jeu

Maintenant, nous allons ajouter une fonction pour initialiser le jeu. Cette fonction aléatorisera l'emplacement de la voiture au début de chaque manche.

Ajoutez le code suivant à script.js :

// Initialise le jeu en aléatorisant l'emplacement de la voiture
function initialiserJeu() {
  voitureDerriereLaPorte = Math.floor(Math.random() * 3) + 1;
  document.getElementById("result").innerText = "";
}

La fonction initialiserJeu prépare la scène pour chaque manche. Elle aléatorise l'emplacement de la voiture, ce qui garantit que chaque itération de jeu est imprévisible.

✨ Vérifier la solution et pratiquer

Implémenter la logique de sélection de porte

Une fois le jeu initialisé, nous devons gérer la sélection de porte par l'utilisateur et la révélation d'une des portes avec une chèvre par Monty.

Ajoutez au fichier script.js :

// Une fonction appelée lorsqu'une porte est choisie
function choisirPorte(numeroPorte) {
  initialiserJeu();
  porteSelectionnee = numeroPorte;
  let porteAvecChevre = obtenirPorteAvecChevre();
  document.getElementById("result").innerHTML =
    `Vous avez sélectionné la Porte ${porteSelectionnee}. Monty ouvre la Porte ${porteAvecChevre} pour révéler une chèvre.<br>` +
    `Voulez-vous <button onclick="révélerPrix(true)">Changer</button> ou ` +
    `<button onclick="révélerPrix(false)">Restez</button>?`;
}

La fonction choisirPorte capture la sélection de porte de l'utilisateur. Elle prépare la phase suivante en révélant une des portes avec une chèvre et en invitant l'utilisateur à choisir entre changer ou rester.

✨ Vérifier la solution et pratiquer

Déterminer la porte avec une chèvre

Nous avons besoin d'une fonction séparée pour déterminer laquelle des portes Monty ouvrira pour révéler une chèvre. Cette porte ne peut pas être celle que le joueur a sélectionnée ni celle derrière laquelle se trouve la voiture.

Continuez d'ajouter au fichier script.js :

// Trouver une porte derrière laquelle se trouve une chèvre
function obtenirPorteAvecChevre() {
  let porteAvecChevre;
  do {
    porteAvecChevre = Math.floor(Math.random() * 3) + 1;
  } while (
    porteAvecChevre === porteSelectionnee ||
    porteAvecChevre === voitureDerriereLaPorte
  );
  return porteAvecChevre;
}

obtenirPorteAvecChevre est une fonction cruciale qui détermine laquelle des portes, autre que la porte sélectionnée par l'utilisateur et la porte de la voiture, sera ouverte pour révéler une chèvre. Elle utilise une sélection aléatoire contraint par les règles du jeu.

✨ Vérifier la solution et pratiquer

Configurer la logique de révélation du prix

Enfin, nous allons configurer la logique pour gérer la révélation finale en fonction du choix de l'utilisateur de changer ou de rester. Pour l'instant, cette fonction sera un emplacement réservé et sera développée dans les étapes suivantes.

Complétez vos ajouts au fichier script.js avec :

// Révéler le prix derrière la porte choisie
function révélerPrix(changerPorte) {
  if (changerPorte) {
    porteSelectionnee = 6 - porteSelectionnee - obtenirPorteAvecChevre();
  }
  // Nous ajouterons plus de logique ici dans les étapes suivantes.
}

initialiserJeu();

La fonction révélerPrix gère la partie finale du jeu. En fonction du choix de l'utilisateur de changer ou de rester, cette fonction déterminera finalement si l'utilisateur gagne une voiture ou obtient une chèvre.

✨ Vérifier la solution et pratiquer

Afficher les résultats du jeu

Dans cette étape, nous allons améliorer la fonction révélerPrix pour afficher les résultats du choix de l'utilisateur. Ajoutez le code suivant à la fonction révélerPrix dans script.js :

// Continuer la fonction révélerPrix dans script.js

if (porteSelectionnee === voitureDerriereLaPorte) {
  if (changerPorte) {
    victoiresEnChanger++;
    document.getElementById("victoiresEnChanger").innerText =
      victoiresEnChanger;
  } else {
    victoiresEnRestant++;
    document.getElementById("victoiresEnRestant").innerText =
      victoiresEnRestant;
  }
  document.getElementById("result").innerText =
    "Félicitations! Vous avez gagné une voiture! Choisissez une porte pour rejouer.";
} else {
  if (changerPorte) {
    défaitesEnChanger++;
    document.getElementById("défaitesEnChanger").innerText = défaitesEnChanger;
  } else {
    défaitesEnRestant++;
    document.getElementById("défaitesEnRestant").innerText = défaitesEnRestant;
  }
  document.getElementById("result").innerText =
    "Désolé, vous avez obtenu une chèvre. Choisissez une porte pour rejouer.";
}

L'amélioration de la fonction révélerPrix ici sert à communiquer les résultats du jeu à l'utilisateur. Cette étape est cruciale pour la rétroaction, permettant à l'utilisateur de voir les conséquences de leur décision et encourageant les parties répétées pour observer les résultats probabilistes.

✨ Vérifier la solution et pratiquer

Exécution du projet

Pour voir la simulation de Monty Hall en action :

  1. Vérifiez que tous vos fichiers (index.html, styles.css, script.js) sont enregistrés.
  2. Ouvrez le fichier index.html dans un navigateur web.
open web

Enfin, cette étape guide l'utilisateur sur la manière d'exécuter la simulation dans leur navigateur, transformant le code en une expérience visuelle et interactive.

Monty Hall

Sommaire

Félicitations! Vous avez réussi à construire une simulation du problème de Monty Hall. En suivant ce projet, vous avez appris à structurer un projet web simple, à styliser ses éléments et à implémenter des fonctionnalités interactives en JavaScript. Maintenant, vous pouvez exécuter plusieurs simulations pour voir les résultats probabilistes du problème de Monty Hall vous-même!

Connexe JavaScript Cours
Démarrage rapide avec JavaScript

Démarrage rapide avec JavaScript

JavaScript
Débutant
Créer une extension VSCode avec ChatGPT

Créer une extension VSCode avec ChatGPT

GitJavaScriptTypeScript
Débutant
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

HTMLCSSJavaScript
Débutant