Erstellen Sie ein ansprechendes Webbspiel: 'Don't Step on the White Tile'

Einführung

Dieses Projekt führt Sie durch die Erstellung eines einfachen, aber ansprechenden webbasierten Spiels namens "Don't Step on the White Tile". Indem Sie diese Schritte befolgen, lernen Sie, HTML, CSS und JavaScript zu kombinieren, um ein interaktives Spiel zu erstellen, bei dem die Spieler vermeiden müssen, auf weiße Kacheln zu treten, um Punkte zu erzielen. Dieses Projekt eignet sich ideal für Einsteiger, die ihre Webdesign-Fähigkeiten üben möchten.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt werden Sie lernen:

Wie Sie eine grundlegende HTML-Struktur einrichten, um die Oberfläche Ihres Spiels zu gestalten.
Wie Sie CSS nutzen, um das Spiel zu stylen und es visuell ansprechend und benutzerfreundlich zu gestalten.
Wie Sie JavaScript implementieren, um dynamische Funktionen wie das Bewegen von Kacheln, Punktesysteme und Spiellogik hinzuzufügen.
Wie Sie Benutzerinteraktionen über Ereignisse wie Klicks verarbeiten, um die Interaktivität des Spiels zu verbessern.
Wie Sie den DOM manipulieren, um den Zustand des Spiels dynamisch zu aktualisieren, wie z. B. den Punktestand und die Spielende-Bedingungen.
Wie Sie grundlegende Spielentwicklungskonzepte wie Spielschleifen, Kollisionserkennung und Geschwindigkeitsanpassungen anwenden.

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

Ein solides Verständnis dafür zu demonstrieren, wie HTML, CSS und JavaScript kombiniert werden können, um interaktive Webanwendungen zu erstellen.
Praktische Erfahrungen in Spielentwicklungskonzepten wie Animation, Benutzer-Eingabebehandlung und Echtzeit-Updates anzuwenden.
Den DOM manipulieren und Ereignisse verarbeiten, um responsive Webanwendungen zu erstellen.
Ihre Problemlösefähigkeiten durch die Implementierung von Spiellogik und die Behandlung von Randfällen wie Spielende-Bedingungen zu verbessern.
Ihre Kreativität in der Webdesign- und Spielästhetik zu zeigen und weitere Anpassungen und Verbesserungen zu erkunden.
Einen ersten Schritt in Richtung auf komplexere Webdesign- und Spielentwicklungsprojekte zu unternehmen und die Grundlage für weitere Lern- und Entdeckungsprozesse auf dem Gebiet der Webanwendungen zu legen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/arith_ops -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/cond_stmts -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/loops -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/functions -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/dom_select -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/dom_manip -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/event_handle -.-> lab-445719{{"Don't Step on the White Tile"}} javascript/dom_traverse -.-> lab-445719{{"Don't Step on the White Tile"}} end

Aufbau der HTML-Struktur

Beginnen Sie mit der Erstellung der grundlegenden HTML-Struktur für das Spiel in index.html. Dies umfasst den Titel des Spiels, die Anzeige des Punktestands, den Hauptspielbereich (#main) und die Startschaltfläche. Der Hauptspielbereich wird die sich bewegenden Reihen von Kacheln enthalten.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Don't Step on the White Tile</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>Punktestand</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Spiel starten</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

In diesem Schritt haben Sie die grundlegende HTML-Struktur für das Spiel aufgebaut. Die Struktur umfasst einen Titel für das Spiel, eine Anzeige für den Punktestand, einen Hauptspielbereich, der durch #main für die sich bewegenden Kacheln identifiziert wird, und eine Startschaltfläche, um das Spiel zu beginnen. Der Bereich #main wird später mit Reihen von Kacheln befüllt werden, mit denen die Spieler während des Spiels interagieren werden. Diese Einrichtung ist von entscheidender Bedeutung, da sie das Gerüst des Spiels legt, auf das CSS und JavaScript Stil und Funktionalität hinzufügen werden.

✨ Lösung prüfen und üben

Gestaltung der CSS-Stile

Definieren Sie in index.css die CSS-Stile, um das Spiel visuell zu strukturieren. In diesem Schritt wird das Stylen des Hauptspielcontainers, der einzelnen Kacheln (Zellen) und der Startschaltfläche erforderlich, um das Spiel visuell ansprechend zu gestalten.

#main {
  width: 408px;
  height: 408px;
  background: weiß;
  border: 2px solid grau;
  margin: 0 auto;
  overflow: hidden;
}

h2 {
  text-align: center;
}

#con {
  width: 100%;
  height: 400px;
  position: relative;
  top: -408px;
  border-collapse: collapse;
}

.row {
  height: 100px;
  width: 100%;
}

.cell {
  height: 100px;
  width: 100px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
}

.black {
  background: schwarz;
}

.btn {
  width: 100%;
  text-align: center;
}

.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: gelbgrün;
  line-height: 50px;
  color: #fff;
}

Sie haben die CSS-Stile definiert, die die visuellen Aspekte des Spiels bestimmen. Die Stile umfassen die Gestaltung des Hauptspielbereichs, das Aussehen der Kacheln (oder Zellen) und die Gestaltung der Startschaltfläche. Indem Sie diese Stile festlegen, haben Sie das Spiel visuell ansprechend gemacht und die Benutzeroberflächenelemente definiert, mit denen die Spieler interagieren werden, wie das Spielbrett und die Startschaltfläche. Diese Stile sind essentiell, um das Spiel für die Spieler ansprechend und zugänglich zu machen.

✨ Lösung prüfen und üben

Spielinitialisierung

In diesem Schritt beginnen Sie mit dem Schreiben des JavaScript-Codes, um Ihr Spiel in index.js zum Leben zu erwecken. Beginnen Sie mit der Erstellung der Funktionen start und init, um das Spiel zu initialisieren und die ersten Reihen für den Spielbereich dynamisch zu erstellen.

// Hilfsfunktion, um ein Element anhand der ID zu erhalten
function $(id) {
  return document.getElementById(id);
}

// Funktion, um ein Div mit einem angegebenen Klassenamen zu erstellen
function createDiv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}

var gameStarted = false;

// Funktion, um das Spiel zu starten
function start() {
  if (!gameStarted) {
    init();
  } else {
    alert(
      "Das Spiel ist bereits gestartet, es ist nicht nötig, erneut zu klicken!"
    );
  }
}

// Initialisiere das Spiel
function init() {
  gameStarted = true;
  for (var i = 0; i < 4; i++) {
    createRow();
  }
}

In diesem Stadium haben Sie begonnen, das Spiel mit JavaScript zum Leben zu erwecken. Der von Ihnen geschriebene Code initialisiert das Spiel und legt die Mechanismen zur Erstellung der ersten Reihen von Kacheln fest. Dies umfasst die Definition von Hilfsfunktionen zur DOM-Manipulation, das Setzen eines Flags, um mehrere Spielstart zu verhindern, und die Grundlage für das dynamische Hinzufügen von Reihen zum Spielbereich. Dieser Schritt ist von entscheidender Bedeutung, da er die dynamischen Elemente des Spiels einrichtet und auf die interaktive Phase des Spiels vorbereitet, in der die Kacheln sich bewegen und die Spieler mit dem Spiel interagieren können.

✨ Lösung prüfen und üben

Behandlung der Bewegung der Reihen und Überprüfung des Spielendes

Erweitern Sie die JavaScript-Funktionalität, um das Herunterbewegen der Reihen und die Überprüfung, ob das Spiel beendet ist, zu ermöglichen. Dies erfordert die Erstellung einer Spielschleife, die die Position der Reihen aktualisiert und überprüft, ob eine Reihe die zugelassene Grenze ohne "betreten" passiert ist.

// Fortsetzung in index.js

var speed = 6; // Anfangsgeschwindigkeit der sich bewegenden Reihen
var clock = null;

// Bewege die Reihen nach unten
function move() {
  var con = $("con");
  var top = parseInt(window.getComputedStyle(con, null)["top"]);
  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + "px";
  checkGameOver();
  if (top == 0) {
    createRow();
    con.style.top = "-102px";
    deleteRow();
  }
}

// Überprüfe, ob das Spiel beendet ist
function checkGameOver() {
  var con = $("con");
  var rows = con.childNodes;
  var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
  var conHeight = con.offsetHeight;
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var rowTop = conTop + i * row.offsetHeight;
    if (rowTop >= conHeight && row.passed !== 1) {
      fail();
      break;
    }
  }
}

Hier haben Sie die Funktionalität des Spiels erweitert, indem Sie die Logik zum Herunterbewegen der Reihen und die Überprüfung auf Spielendebedingungen hinzugefügt haben. Die move-Funktion aktualisiert die Position der Reihen und simuliert die Bewegung der Kacheln, die die Spieler vermeiden müssen, um auf sie zu treten. Die checkGameOver-Funktion überwacht, ob eine Reihe den unteren Rand des Spielbereichs ohne "betreten" passiert ist, was das Spiel beenden würde. Dieser Schritt führt den Hauptspielmechanismus und die Herausforderung ein und macht das Spiel interaktiv und ansprechend.

✨ Lösung prüfen und üben

Implementierung der Punktzahl und Geschwindigkeitserhöhung

In diesem Schritt konzentrieren Sie sich auf die Implementierung des Punktesystems des Spiels und die Erhöhung der Geschwindigkeit der Reihen, wenn der Punktestand des Spielers zunimmt. Dies fügt einem zusätzlichen Schwierigkeitsgrad hinzu und hält das Spiel interessant.

// Fortsetzung in index.js

// Aktualisiere die Punktzahl
function score() {
  var newScore = parseInt($("score").innerHTML) + 1;
  $("score").innerHTML = newScore;
  if (newScore % 10 == 0) {
    speedUp();
  }
}

// Erhöhe die Geschwindigkeit der sich bewegenden Reihen
function speedUp() {
  speed += 2;
  if (speed == 20) {
    alert("Unfassbare Geschwindigkeit!");
  }
}

In diesem Schritt haben Sie das Punktesystem des Spiels implementiert und eine Funktion hinzugefügt, um die Geschwindigkeit der sich bewegenden Reihen zu erhöhen, wenn der Punktestand des Spielers zunimmt. Dies liefert dem Spieler nicht nur Feedback über seine Leistung, sondern erhöht auch zunehmend die Schwierigkeit des Spiels. Das Punktesystem belohnt die Spieler für das erfolgreiche Vermeiden der weißen Kacheln, und die zunehmende Geschwindigkeit fordert die Reaktionszeiten der Spieler heraus, was das Spiel interessanter und wettbewerbsfähiger macht.

✨ Lösung prüfen und üben

Behandlung von Benutzereingaben

Implementieren Sie die Logik, um Benutzereingaben auf den Kacheln zu behandeln. Die Spieler sollten Punkte erzielen, wenn sie auf schwarze Kacheln klicken, und verlieren, wenn sie auf weiße Kacheln klicken.

// Fortsetzung in index.js

// Beurteile die Aktion des Spielers
function judge(ev) {
  ev = ev || event;
  if (ev.target.className.indexOf("black") !== -1) {
    ev.target.className = "cell";
    ev.target.parentNode.passed = 1;
    score();
  } else if (ev.target.className.indexOf("cell") !== -1) {
    fail();
  }
}

In diesem Schritt haben Sie die judge-Funktion implementiert, um Benutzereingaben innerhalb des Spiels zu behandeln. Wenn ein Spieler auf eine Kachel klickt, bestimmt die Funktion, ob die Kachel schwarz ist oder nicht. Wenn die Kachel schwarz ist (korrekte Aktion), wird sie zu einer normalen Zelle und der Punktestand aktualisiert. Wenn die Kachel nicht schwarz ist (falsche Aktion), wird die Spielende-Sequenz ausgelöst. Diese Funktion ist entscheidend für die Interaktivität des Spiels, da sie den Spielern ermöglicht, mit dem Spiel zu interagieren, indem sie auf Kacheln klicken und sofortige Rückmeldungen zu ihrer Aktion erhalten.

✨ Lösung prüfen und üben

Erstellen und Löschen von Reihen

Entwickeln Sie Funktionen, um dynamisch neue Reihen von Kacheln zu erstellen und die älteste Reihe zu löschen, wenn sie nicht mehr sichtbar ist, um das reibungslose Funktionieren des Spiels zu gewährleisten.

// Fortsetzung in index.js

// Zuweisen Sie die schwarze Zelle in einer Reihe zufällig
function createCell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4);
  temp[i] = "cell black";
  return temp;
}

// Erstellen Sie eine neue Reihe von Kacheln
function createRow() {
  var con = $("con");
  var row = createDiv("row");
  var arr = createCell();
  for (var i = 0; i < 4; i++) {
    row.appendChild(createDiv(arr[i]));
  }
  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// Löschen Sie die letzte Reihe, wenn es mehr als 5 Reihen gibt
function deleteRow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

Sie haben die createRow-Funktion hinzugefügt, um dynamisch Reihen von Kacheln mit einer schwarzen Kachel an einer zufälligen Position zu generieren, was die Unvorhersehbarkeit und die Herausforderung des Spiels erhöht. Die deleteRow-Funktion entfernt die älteste Reihe, die nicht mehr sichtbar ist, optimiert die Leistung des Spiels und gewährleistet, dass der Spielbereich nicht mit unbehandelten Elementen überläuft. Diese Funktionen arbeiten zusammen, um eine kontinuierliche Kachelfluss für die Spieler zu gewährleisten, mit dem sie interagieren können.

✨ Lösung prüfen und üben

Implementierung der Spielende-Logik

Definieren Sie die Bedingungen, unter denen das Spiel endet, wie zum Beispiel das Klicken auf eine weiße Kachel oder das Übersehen einer schwarzen Kachel. Zeigen Sie den Endpunktestand des Spielers an und bieten Sie die Option, das Spiel neu zu starten.

// Fortsetzung in index.js

// Beende das Spiel
function fail() {
  clearInterval(clock);
  gameStarted = false;
  confirm("Ihr Endpunktestand ist " + parseInt($("score").innerHTML));
  window.location.reload();
}

Indem Sie die fail-Funktion definiert haben, haben Sie die Bedingungen festgelegt, unter denen das Spiel endet. Diese Funktion wird aufgerufen, wenn der Spieler einen falschen Zug macht oder eine schwarze Kachel übersieht. Sie stoppt die Spielschleife, zeigt den Endpunktestand des Spielers an und lädt die Seite neu, um einen neuen Start zu ermöglichen. Dieser Schritt ist von entscheidender Bedeutung für das Bereitstellen einer vollständigen Spielumgebung, einschließlich der Herausforderung, Fehler zu vermeiden, und der Endgültigkeit des Spielendes.

✨ Lösung prüfen und üben

Starten der Spielschleife

Setzen Sie die Hauptspielschleife auf, die die Kacheln den Bildschirm hinunter bewegt. Anpassen Sie die Bewegungsgeschwindigkeit basierend auf dem Punktestand des Spielers, um die Schwierigkeit zu erhöhen.

// Fortsetzung in index.js

// Starte die Spielschleife
function start() {
  if (!gameStarted) {
    init();
    clock = setInterval("move()", 30);
  }
}

Sie haben die Hauptspielschleife mit der move-Funktion eingerichtet, die die Reihen ständig den Bildschirm hinunter bewegt und das Fortschreiten des Spiels simuliert. Die Bewegungsgeschwindigkeit erhöht sich, wenn der Punktestand des Spielers steigt, was die Schwierigkeit des Spiels erhöht. Diese Schleife ist das Herzschlag des Spiels, treibt das Spielgeschehen und fordert den Spieler heraus, mit der zunehmenden Geschwindigkeit Schritt zu halten.

✨ Lösung prüfen und üben

Hinzufügen eines Ereignislisteners

Fügen Sie einem Ereignislistener für das Spielbereich hinzu, um Spieleraktionen wie das Klicken auf Kacheln zu erkennen und darauf zu reagieren.

// Fortsetzung in index.js

// Fügen Sie einen Ereignislistener für den Hauptspielcontainer hinzu
$("main").onclick = function (ev) {
  judge(ev);
};

In diesem Schritt haben Sie einen Ereignislistener für den Hauptspielbereich hinzugefügt, was es ermöglicht, auf Spielerklicks zu reagieren. Diese Funktionalität ist unerlässlich, um Benutzerinteraktionen zu erfassen, damit das Spiel Spielerzüge verarbeiten und den Spielzustand entsprechend aktualisieren kann. Sie ist das, was das Spiel interaktiv und auf Spieleraktionen reagierend macht.

Um die folgenden Effekte zu sehen, klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE und wechseln Sie zur Registerkarte "Web 8080".

✨ Lösung prüfen und üben

Zusammenfassung

Durch die Fertigstellung dieses Projekts haben Sie ein funktionierendes webbasiertes Spiel namens "Don't Step on the White Tile" erstellt. Dieses Projekt verbessert nicht nur Ihr Verständnis dafür, wie HTML, CSS und JavaScript zusammenarbeiten, um interaktive Webinhalte zu schaffen, sondern liefert auch eine Grundlage für die Erstellung von komplexeren webbasierten Spielen in Zukunft. Experimentieren Sie mit unterschiedlichen Stilen, Funktionen und Funktionalitäten, um das Spiel zu Ihrem eigenen unverwechselbaren Meisterwerk zu machen. Frohe Programmierung!