LabEx
AnmeldenKostenlos beitreten

Erstellen eines Whack-a-Mole-Webspiels

JavaScriptJavaScriptBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Projekt lernst du, wie du ein Whack-a-Mole-Spiel mit HTML, CSS und JavaScript erstellst. Das Spiel besteht darin, Mäuse, die zufällig aus Löchern auftauchen, zu schlagen, innerhalb einer bestimmten Zeitspanne. Du wirst die erforderlichen HTML-, CSS- und JavaScript-Dateien erstellen und die Spiellogik schrittweise implementieren.

👀 Vorschau

Whack-a-Mole Web Game

🎯 Aufgaben

In diesem Projekt wirst du lernen:

  • Wie du die Projekt-Dateien für das Whack-a-Mole-Spiel einrichtest
  • Wie du die erforderlichen CSS-Stile hinzufügst, um das Spiellayout und -design zu erstellen
  • Wie du die Spiellogik implementierst, um Mäuse erscheinen zu lassen und zu verschwinden, Punkte zu zählen und die Zeit zu verfolgen
  • Wie du Ereignislistener für das Schlagen der Mäuse und das Starten des Spiels erstellst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

  • HTML-, CSS- und JavaScript-Dateien für ein webbasiertes Spiel zu erstellen
  • CSS verwenden, um die Spiel-Elemente zu gestalten und auszurichten
  • Die DOM mit JavaScript manipulieren, um die Spiel-Elemente erscheinen zu lassen und zu verschwinden
  • Benutzerinteraktionen verarbeiten und den Spielzustand aktualisieren
  • Timer in JavaScript verwenden, um die Zeit zu verfolgen und den Spielablauf zu steuern

Erstellen Sie die Projekt-Dateien

Zunächst erstellen wir die Projekt-Dateien für das Whack-a-Mole-Spiel.

  1. cd in das Verzeichnis ~/project.
  2. Erstellen Sie eine neue Datei namens index.html.
  3. Kopieren Sie den folgenden Code und fügen Sie ihn in index.html ein:
<!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/[email protected]/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">
        Time Left: <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"
      >
        Start Game
      </button>
      <div id="grid" class="grid grid-cols-3 gap-4 mt-4">
        <!-- Löcher werden hier hinzugefügt -->
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>
✨ Lösung prüfen und üben

Fügen Sie die CSS-Stile hinzu

  1. Erstellen Sie eine neue Datei namens styles.css.
  2. Kopieren Sie den folgenden Code und fügen Sie ihn in styles.css ein:
.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;
}
✨ Lösung prüfen und üben

Fügen Sie die Spiellogik hinzu

  1. Erstellen Sie eine neue Datei namens main.js.
  2. Wir werden den JavaScript-Code in den folgenden Schritten hinzufügen.

Lassen Sie uns nun die Spiellogik zur main.js-Datei hinzufügen.

  1. Öffnen Sie die main.js-Datei.
  2. Kopieren Sie den folgenden Code und fügen Sie ihn in main.js ein:
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: Implementieren Sie diese Funktion in Schritt 3.
}

function startGame() {
  // TODO: Implementieren Sie diese Funktion in Schritt 4.
}

function whack(e) {
  // TODO: Implementieren Sie diese Funktion in Schritt 5.
}

createHoles();
// TODO: Implementieren Sie den Rest des Codes in Schritt 6.

Dieser Code definiert Variablen, um Referenzen auf verschiedene HTML-Elemente zu speichern, und initialisiert andere erforderliche Variablen. Es werden auch mehrere Funktionen definiert, um Löcher zu erstellen, zufällige Zeiten und Löcher zu generieren, Mäuse erscheinen zu lassen und zu verschwinden, das Spiel zu starten und Mäuse-Schläge zu verarbeiten. Schließlich werden die Löcher erstellt, Ereignislistener auf die Löcher hinzugefügt und der Start-Button-Click-Ereignislistener eingerichtet.

✨ Lösung prüfen und üben

Implementieren Sie die peep-Funktion

In diesem Schritt implementieren wir die peep-Funktion, die die Mäuse zufällig erscheinen und verschwinden lässt.

  1. Öffnen Sie die main.js-Datei.
  2. Finden Sie die peep-Funktion.
  3. Ersetzen Sie den vorhandenen Code durch folgenden Code:
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);
}

Diese Funktion setzt einen zufälligen Zeitintervall zwischen 200ms und 1000ms mit der randomTime-Funktion. Sie wählt ein zufälliges Loch mit der randomHole-Funktion und lässt die Maus erscheinen, indem sie der Maus-Elementklasse die up-Klasse hinzufügt. Nach dem angegebenen Zeitintervall verschwindet die Maus, indem die up-Klasse entfernt wird. Wenn das Spiel nicht beendet ist (timeUp ist false), ruft die Funktion sich selbst rekursiv auf, um eine andere Maus erscheinen zu lassen.

✨ Lösung prüfen und üben

Implementieren Sie die startGame-Funktion

Als nächstes implementieren wir die startGame-Funktion, die das Spiel initialisiert und den Timer startet.

  1. Öffnen Sie die main.js-Datei.
  2. Finden Sie die startGame-Funktion.
  3. Ersetzen Sie den vorhandenen Code durch folgenden Code:
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);
}

Diese Funktion initialisiert die Punktzahl, setzt timeUp auf false und setzt die Punktzahlanzeige zurück. Sie ruft die peep-Funktion auf, um das Erscheinen der Mäuse zu starten. Sie startet einen Spieltimer mit setTimeout, um timeUp nach 10 Sekunden auf true zu setzen. Sie setzt auch einen Countdown-Timer ein, um die Zeitanzeige 每秒 zu aktualisieren. Der Countdown wird zunächst auf 10 gesetzt, und wenn er auf 0 erreicht, wird der Countdown-Timer gelöscht, die Start-Schaltfläche wird aktiviert und die Funktion gibt zurück.

✨ Lösung prüfen und üben

Implementieren Sie die whack-Funktion

Lassen Sie uns nun die whack-Funktion implementieren, die das Schlagen der Mäuse und das Aktualisieren der Punktzahl behandelt.

  1. Öffnen Sie die main.js-Datei.
  2. Finden Sie die whack-Funktion.
  3. Ersetzen Sie den vorhandenen Code durch folgenden Code:
function whack(e) {
  if (!e.isTrusted || !this.querySelector(".mole").classList.contains("up"))
    return; // fake click detected or the mole is not up
  score++;
  this.querySelector(".mole").classList.remove("up");
  this.querySelector(".mole").classList.add("whacked");
  scoreDisplay.textContent = score;
}

Diese Funktion wird aufgerufen, wenn auf eine Maus geklickt wird. Sie überprüft, ob das Klickereignis vertrauenswürdig ist (e.isTrusted), um gefälschte Klicks zu vermeiden. Sie überprüft auch, ob die Maus derzeit oben ist, indem sie überprüft, ob sie die up-Klasse hat. Wenn der Klick gültig ist, erhöht sie die Punktzahl, entfernt die up-Klasse vom Maus-Element, fügt die whacked-Klasse hinzu, um visuell anzuzeigen, dass die Maus geschlagen wurde, und aktualisiert die Punktzahlanzeige.

✨ Lösung prüfen und üben

Initialisieren Sie das Spiel und die Ereignislistener

In diesem Schritt initialisieren wir das Spiel, indem wir die Löcher erstellen und Ereignislistener auf die Löcher und die Start-Schaltfläche hinzufügen.

  1. Öffnen Sie die main.js-Datei.
  2. Finden Sie die Zeile mit dem createHoles()-Funktionsaufruf.
  3. Fügen Sie den folgenden Code nach dem createHoles()-Funktionsaufruf hinzu:
holes.forEach((hole) => hole.addEventListener("click", whack));

startBtn.addEventListener("click", startGame);

Dieser Code fügt einem Ereignislistener für das Klicken jedes Loch-Element hinzu. Wenn auf ein Loch geklickt wird, wird die whack-Funktion aufgerufen. Es wird auch ein Ereignislistener für das Klicken der Start-Schaltfläche hinzugefügt, der die startGame-Funktion aufruft, wenn auf die Schaltfläche geklickt wird.

Testen Sie das Whack-a-Mole-Spiel

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE und wechseln Sie zur Registerkarte Web 8080.

WebIDE Go Live-Schaltfläche

Dadurch wird das Projekt in der Registerkarte Web 8080 geöffnet.

Ansicht der Web 8080-Registerkarte
✨ Lösung prüfen und üben

Zusammenfassung

In diesem Projekt haben wir die Projektdateien für das Whack-a-Mole-Spiel erstellt. Wir haben die HTML-Struktur erstellt, CSS-Stile hinzugefügt und die Spiel-Logik mit JavaScript implementiert. Die nächsten Schritte würden die weitere Anpassung und Verbesserung des Spiels beinhalten, wie zum Beispiel das Hinzufügen von Geräuschen, Ebenen und Schwierigkeits-Einstellungen.

Verwandt JavaScript Kurse
Schnellstart mit JavaScript

Schnellstart mit JavaScript

JavaScript
Anfänger
Erstellen Sie eine VSCode-Erweiterung mit ChatGPT

Erstellen Sie eine VSCode-Erweiterung mit ChatGPT

GitJavaScriptTypeScript
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger