Créez un jeu Web Whack-a-Mole captivant

Introduction

Dans ce projet, vous allez apprendre à créer un jeu de Whack-a-Mole (Le jeu du martèlement) à l'aide de HTML, CSS et JavaScript. Le jeu consiste à frapper des taupes qui apparaissent aléatoirement dans des trous dans une limite de temps spécifiée. Vous allez créer les fichiers HTML, CSS et JavaScript nécessaires et implémenter la logique du jeu étape par étape.

👀 Aperçu

Whack-a-Mole Web Game

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer les fichiers du projet pour le jeu de Whack-a-Mole
Comment ajouter les styles CSS nécessaires pour créer la mise en page et la conception du jeu
Comment implémenter la logique du jeu pour faire apparaître et disparaître les taupes, garder le score et suivre le temps
Comment créer des écouteurs d'événements pour frapper les taupes et démarrer le jeu

🏆 Réalisations

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

Créer des fichiers HTML, CSS et JavaScript pour un jeu web
Utiliser CSS pour styliser et mettre en page les éléments du jeu
Manipuler le DOM à l'aide de JavaScript pour faire apparaître et disparaître les éléments du jeu
Gérer les interactions de l'utilisateur et mettre à jour l'état du jeu
Utiliser des temporisateurs en JavaScript pour suivre le temps et contrôler le flux du jeu

Créer les fichiers du projet

Tout d'abord, créons les fichiers du projet pour le jeu de Whack-a-Mole.

Utilisez cd pour accéder au répertoire ~/projet.
Créez un nouveau fichier appelé index.html.
Copiez et collez le code suivant dans index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Whack-a-Mole!</title>
  </head>

  <body
    class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 flex items-center justify-center h-screen"
  >
    <div class="game bg-white p-8 rounded-lg shadow-2xl text-center">
      <h1 class="text-4xl font-bold mb-4 text-red-600">Whack-a-Mole!</h1>
      <p class="score text-2xl text-red-600">
        Score: <span id="score">0</span>
      </p>
      <p class="time text-2xl text-red-600">
        Temps restant: <span id="time">0</span>
      </p>
      <button
        id="startBtn"
        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
      >
        Démarrer le jeu
      </button>
      <div id="grid" class="grid grid-cols-3 gap-4 mt-4">
        <!-- Les trous seront ajoutés ici -->
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Ajouter les styles CSS

Créez un nouveau fichier appelé styles.css.
Copiez et collez le code suivant dans styles.css :

.game {
  width: 600px;
  border-radius: 2rem;
}

.hole {
  height: 0;
  padding-bottom: 100%;
  position: relative;
  background: #eee;
  border: 3px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
}

.mole {
  width: 100%;
  height: 100%;
  background: #a0522d;
  border-radius: 50%;
  position: absolute;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.mole.up {
  transform: translateY(0);
}

.mole.whacked {
  background: #008cff;
}

#startBtn {
  background-color: #0051ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#startBtn:hover {
  background-color: #028a5f;
}

Ajouter la logique du jeu

Créez un nouveau fichier appelé main.js.
Nous ajouterons le code JavaScript dans les étapes suivantes.

Maintenant, ajoutons la logique du jeu au fichier main.js.

Ouvrez le fichier main.js.
Copiez et collez le code suivant dans main.js :

const grid = document.querySelector("#grid");
const scoreDisplay = document.querySelector("#score");
const timeDisplay = document.querySelector("#time");
const startBtn = document.querySelector("#startBtn");
let holes = [];
let score = 0;
let lastHole;
let timeUp = false;
let gameTimer;
let countdownTimer;
let countdown;

function createHoles() {
  for (let i = 0; i < 6; i++) {
    const hole = document.createElement("div");
    const mole = document.createElement("div");

    hole.classList.add("hole");
    mole.classList.add("mole");

    hole.appendChild(mole);
    grid.appendChild(hole);

    holes.push(hole);
  }
}

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
  const idx = Math.floor(Math.random() * holes.length);
  const hole = holes[idx];
  if (hole === lastHole) {
    return randomHole(holes);
  }
  lastHole = hole;
  return hole;
}

function peep() {
  // TODO: Implémentez cette fonction dans l'étape 3.
}

function startGame() {
  // TODO: Implémentez cette fonction dans l'étape 4.
}

function whack(e) {
  // TODO: Implémentez cette fonction dans l'étape 5.
}

createHoles();
// TODO: Implémentez le reste du code dans l'étape 6.

Ce code définit des variables pour stocker des références à divers éléments HTML et initialise d'autres variables nécessaires. Il définit également plusieurs fonctions pour créer des trous, générer des temps et des trous aléatoires, faire apparaître et disparaître les taupes, démarrer le jeu et gérer les coups de taupes. Enfin, il crée les trous, ajoute des écouteurs d'événements aux trous et configure l'écouteur d'événement du clic sur le bouton de démarrage.

Implémenter la fonction de regard

Dans cette étape, nous allons implémenter la fonction peep, qui fait apparaître et disparaître les taupes de manière aléatoire.

Ouvrez le fichier main.js.
Localisez la fonction peep.
Remplacez le code existant par le code suivant :

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.querySelector(".mole").classList.add("up");

  setTimeout(() => {
    hole.querySelector(".mole").classList.remove("up");
    hole.querySelector(".mole").classList.remove("whacked");
    if (!timeUp) peep();
  }, time);
}

Cette fonction définit un intervalle de temps aléatoire entre 200 ms et 1000 ms à l'aide de la fonction randomTime. Elle sélectionne un trou aléatoire à l'aide de la fonction randomHole et fait apparaître la taupe en ajoutant la classe up à l'élément de la taupe. Après l'intervalle de temps spécifié, la taupe disparaît en supprimant la classe up. Si le jeu n'est pas terminé (timeUp est false), la fonction s'appelle elle-même de manière récursive pour faire apparaître une autre taupe.

Implémenter la fonction startGame

Ensuite, nous allons implémenter la fonction startGame, qui initialise le jeu et lance le minuteur.

Ouvrez le fichier main.js.
Localisez la fonction startGame.
Remplacez le code existant par le code suivant :

function startGame() {
  scoreDisplay.textContent = 0;
  timeUp = false;
  score = 0;
  peep();
  gameTimer = setTimeout(() => (timeUp = true), 10000);
  countdown = 10;
  timeDisplay.textContent = countdown;
  startBtn.disabled = true;
  countdownTimer = setInterval(() => {
    countdown--;
    if (countdown < 0) {
      clearInterval(countdownTimer);
      startBtn.disabled = false;
      return;
    }
    timeDisplay.textContent = countdown;
  }, 1000);
}

Cette fonction initialise le score, définit timeUp sur false et réinitialise l'affichage du score. Elle appelle la fonction peep pour commencer à faire apparaître les taupes. Elle lance un minuteur de jeu à l'aide de setTimeout pour définir timeUp sur true après 10 secondes. Elle configure également un minuteur de comptage à rebours pour mettre à jour l'affichage du temps toutes les secondes. Le comptage à rebours est initialisé à 10, et lorsqu'il atteint 0, le minuteur de comptage à rebours est arrêté, le bouton de démarrage est activé et la fonction retourne.

Implémenter la fonction whack

Maintenant, implémentons la fonction whack, qui gère le fait de frapper les taupes et met à jour le score.

Ouvrez le fichier main.js.
Localisez la fonction whack.
Remplacez le code existant par le code suivant :

function whack(e) {
  if (!e.isTrusted || !this.querySelector(".mole").classList.contains("up"))
    return; // clic simulé détecté ou la taupe n'est pas levée
  score++;
  this.querySelector(".mole").classList.remove("up");
  this.querySelector(".mole").classList.add("whacked");
  scoreDisplay.textContent = score;
}

Cette fonction est appelée lorsqu'on clique sur une taupe. Elle vérifie si l'événement de clic est fiable (e.isTrusted) pour empêcher les clics simulés. Elle vérifie également si la taupe est actuellement levée en vérifiant si elle a la classe up. Si le clic est valide, elle incrémente le score, retire la classe up de l'élément de la taupe, ajoute la classe whacked pour indiquer visuellement que la taupe a été frappée et met à jour l'affichage du score.

Initialiser le jeu et les écouteurs d'événements

Dans cette étape, nous allons initialiser le jeu en créant les trous et en ajoutant des écouteurs d'événements aux trous et au bouton de démarrage.

Ouvrez le fichier main.js.
Localisez la ligne avec l'appel de la fonction createHoles().
Ajoutez le code suivant après l'appel de la fonction createHoles() :

holes.forEach((hole) => hole.addEventListener("click", whack));

startBtn.addEventListener("click", startGame);

Ce code ajoute un écouteur d'événement de clic à chaque élément de trou. Lorsqu'un trou est cliqué, la fonction whack est appelée. Il ajoute également un écouteur d'événement de clic au bouton de démarrage, qui appelle la fonction startGame lorsqu'il est cliqué.

Tester le jeu Whack-a-Mole

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE, puis basculez vers l'onglet Web 8080.

Bouton Go Live de WebIDE

Cela ouvrira le projet dans l'onglet Web 8080.

Vue de l'onglet Web 8080

Résumé

Dans ce projet, nous avons créé les fichiers du projet pour le jeu Whack-a-Mole. Nous avons créé la structure HTML, ajouté des styles CSS et implémenté la logique du jeu à l'aide de JavaScript. Les étapes suivantes consisteront à personnaliser et améliorer davantage le jeu, comme en ajoutant des sons, des niveaux et des paramètres de difficulté.

Création d'un jeu Web Whack-a-Mole