Erstelle ein Sliding Puzzle-Spiel | JavaScript-Projekt

Einführung

Willkommen zu diesem Projekt, bei dem wir ein einfaches Sliding Puzzle-Spiel mit JavaScript erstellen. Am Ende dieser Anleitung wirst du ein funktionierendes 3x3-Sliding Puzzle-Spiel haben, das du im Browser spielen kannst. Das Spiel wird nummerierte Kacheln, einen Timer und Steuerelemente zum Starten, Pausieren und Zurücksetzen des Spiels haben.

Keine Vorkenntnisse sind erforderlich, aber ein grundlegendes Verständnis von JavaScript und HTML wäre hilfreich. Lass uns loslegen!

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie man das Spiellayout in HTML entwirft
Wie man die CSS-Stile für das Spiel schreibt
Wie man die Spielvariablen in JavaScript initialisiert
Wie man die Move-Funktion implementiert, um die Bewegung der Kacheln zu behandeln
Wie man die möglichen Bewegungen der Kacheln bestimmt
Wie man den Spieltimer implementiert
Wie man den Spielablauf mit Start-, Pause- und Zurücksetzfunktionen steuert
Wie man die Kacheln am Anfang oder beim Zurücksetzen zufällig mischen
Wie man das Spiel beim Laden der Seite initialisiert

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Das Layout eines Spiels mit HTML zu entwerfen
Elemente mit CSS zu gestalten
Die Spiellogik mit JavaScript zu implementieren
Benutzer-Eingaben zu verarbeiten und darauf basierende Aktionen auszuführen
Das DOM zu manipulieren, um den Spielzustand zu aktualisieren und Informationen anzuzeigen

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/variables -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/data_types -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/cond_stmts -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/loops -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/functions -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/array_methods -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/dom_select -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/dom_manip -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} javascript/event_handle -.-> lab-445694{{"Erstelle ein Sliding Puzzle-Spiel mit JavaScript"}} end

Entwerfe das Spiellayout in HTML

Entwerfe das Layout des Spiels in index.html, wie im vorherigen Abschnitt beschrieben.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Puzzle</title>
    <link rel="stylesheet" type="text/css" href="puzzle.css" />
    <script type="text/javascript" src="puzzle.js"></script>
  </head>
  <body>
    <div id="container">
      <!-- Äußerster DIV, der die innere Struktur enthält -->
      <div id="game">
        <!-- Spielbereich, der der große DIV-Block ist -->
        <div id="d1" onclick="move(1)">1</div>
        <!-- Kleine DIVs, die die 8 kleinen Blöcke sind. Wenn angeklickt, wird die move()-Funktion ausgeführt. Der Parameter ist die angezeigte Zahl, so dass wir wissen, welcher Block angeklickt wurde -->
        <div id="d2" onclick="move(2)">2</div>
        <div id="d3" onclick="move(3)">3</div>
        <div id="d4" onclick="move(4)">4</div>
        <div id="d5" onclick="move(5)">5</div>
        <div id="d6" onclick="move(6)">6</div>
        <div id="d7" onclick="move(7)">7</div>
        <div id="d8" onclick="move(8)">8</div>
      </div>
      <div id="control">
        <!-- Spielsteuerelementbereich -->
        <p>
          <rowspan id="timeText">Total Time</rowspan>
          <!--  "Total Time" -->
          <rowspan id="timer"></rowspan>
        </p>
        <!-- Bereich zur Anzeige der Spielzeit -->
        <p>
          <rowspan id="start" onclick="start()">Start</rowspan>
          <!--  "Start" -->
          <rowspan id="reset" onclick="reset()">Retry</rowspan>
          <!--  "Retry" -->
        </p>
        <!-- Bereich zur Anzeige der Steuerelemente -->
      </div>
    </div>
  </body>
</html>

✨ Lösung prüfen und üben

Schreibe die CSS-Stile

Nachdem das Layout-Struktur fertiggestellt ist, ist es an der Zeit, unser Spiel mit CSS-Stilen zu verschönern. Während dieser Phase hast du die Freiheit, das Spiel nach deinen Vorstellungen zu personalisieren und zu gestalten, indem du einzigartige Details hinzufügst. Du könntest auch weitere dekorative Elemente einführen, um die Ästhetik des Spiels zu verbessern. Ein wichtiger Hinweis: Wenn du die Größe des Haupt-DIVs des Spiels ändern, musst du den zugehörigen JavaScript-Code anpassen. Wir werden das im folgenden Abschnitt genauer besprechen.

Füge in puzzle.css hinzu:

* {
  padding: 0;
  margin: 0;
  border: 0;
}
/* Das '*' ist ein Wildcard, der die Standardstile für alle Elemente entfernt, da einige Browser möglicherweise Standardstile hinzufügen, was zu Layoutproblemen führen könnte. */

body {
  width: 100%;
  height: 100%;
}
/* Setzt die Höhe und Breite des Body auf 100%, sodass es sich automatisch an die Browser-Bildschirmgröße anpasst. */

#container {
  position: relative;
  width: 620px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 1px;
}
/* Dies ist das DIV, das alle Elemente umschließt. Es hat eine Breite von 620px und eine Höhe von 450px. Diese Größe kann erhöht werden, aber nicht verringert. Sie sollte groß genug sein, um alle internen Elemente zu enthalten. */

#game {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 5px;
  display: inline-block;
  background-color: #ffe171;
  box-shadow: 0 0 10px #ffe171;
}
/* Dies ist das DIV für den Spielbereich. Die Größe wird basierend auf der Größe der kleineren Blöcke berechnet. Hier sind die Blöcke auf 150px x 150px gesetzt, sodass der Spielbereich 150px * 3 = 450px beträgt. */

#game div {
  position: absolute;
  width: 149px;
  height: 149px;
  box-shadow: 1px 1px 2px #777;
  background-color: #20a6fa;
  color: white;
  text-align: center;
  font-size: 150px;
  line-height: 150px;
  cursor: pointer;
  -webkit-transition: 0.3s; /* Browser-Präfix für Chrome-Kompatibilität */
  -moz-transition: 0.3s; /* Für Firefox */
  -ms-transition: 0.3s; /* Für IE */
  -o-transition: 0.3s; /* Für Opera */
  transition: 0.3s;
}
/* Dies setzt die Größe der kleinen Blöcke. Sie werden als absolut positioniert, sodass Änderungen an der Position nicht die Position anderer Elemente beeinflussen. Die Breite und Höhe sind beide 149px. Bemerkenswert ist die Box-Shadow, die die Gesamtgröße erhöht. Die Eigenschaft 'transition:0.3s' lässt Änderungen als Animation erscheinen, sodass wenn die Position des Blocks sich ändert, automatisch eine Animation abgespielt wird. */

#game div:hover {
  color: #ffe171;
}
/* Setzt die Maus-Hover-Animation für die Blöcke. Wenn die Maus über einem Element schwebt, ersetzen diese Eigenschaften die oben genannten, und es kehrt zurück zum Ursprung, wenn die Maus weg bewegt wird. Hier ändern wir die Schriftfarbe. */

#control {
  width: 150px;
  height: 450px;
  display: inline-block;
  float: right;
}
/* Steuersektion. 'display:inline-block' lässt das Element die Block-Eigenschaften beibehalten, ohne eine volle Zeile zu beanspruchen, und 'float:right' positioniert es auf der rechten Seite. */

#control rowspan {
  height: 25px;
  font-size: 20px;
  color: #222;
  margin-top: 10px;
}
/* Allgemeine Stile für die Buttons in der Steuersektion. */

#start {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #4c98f5;
  text-align: center;
  cursor: pointer;
}
/* Stile für den 'Start'-Button. 'cursor:pointer' lässt den Cursor sich zu einer Hand-Symbol ändern, wenn man darüber schwebt. */

#reset {
  display: inline-block;
  font-size: 28px;
  width: 100px;
  height: 28px;
  background-color: #20a6fa;
  color: #ffe171;
  text-shadow: 1px 1px 2px #ffe171; /* Schrift-Schatten */
  border-radius: 5px; /* Runde Ecken */
  box-shadow: 2px 2px 5px #4c98f5; /* Box-Schatten */
  text-align: center; /* Text zentrieren */
  cursor: pointer;
}
/* Stile für den 'Reset'-Button. */

#d1 {
  left: 0px;
}
#d2 {
  left: 150px;
}
#d3 {
  left: 300px;
}
#d4 {
  top: 150px;
}
#d5 {
  top: 150px;
  left: 150px;
}
#d6 {
  top: 150px;
  left: 300px;
}
#d7 {
  top: 300px;
}
#d8 {
  left: 150px;
  top: 300px;
}
/* Vordefinierte Positionen für jedes der Blöcke in der Reihenfolge. */

Das Setzen der Stile ist ein wichtiger Schritt vorwärts. Als nächstes würden wir zur JavaScript-Logik übergehen, um unser Puzzle-Spiel zum Leben zu erwecken. Es wird empfohlen, die Anfangsstillegung gemäß den obigen Anweisungen durchzuführen. Nachdem die Funktionalität des Spiels gut verstanden ist, hast du die Freiheit, deine Kreativität zu zeigen und die Stile weiter zu personalisieren. Unüberlegte frühe Änderungen können jedoch zu unvorhergesehenen Fehlern führen.

✨ Lösung prüfen und üben

Initialisiere die Spielvariablen in JavaScript

Bevor du die Spielfunktionalität hinzufügst, initialisiere die essentiellen Spielzustandsvariablen.

Füge in puzzle.js hinzu:

// puzzle.js

var time = 0;
// Speichert die verstrichene Zeit
var pause = true;
// Flag, um anzuzeigen, ob das Spiel pausiert ist, true bedeutet, dass es pausiert ist
var set_timer;
// Timer-Funktion
var d = new Array(10);
// Speichert die Nummer der kleinen DIV, die derzeit im großen DIV ist
var d_direct = new Array(
  [0],
  [2, 4], // Das große DIV mit der Nummer 1 kann an die Positionen 2 und 4 gehen
  [1, 3, 5],
  [2, 6],
  [1, 5, 7],
  [2, 4, 6, 8],
  [3, 5, 9],
  [4, 8],
  [5, 7, 9],
  [6, 8]
);
// Speichert die möglichen Bewegungspositionen für die großen DIVs
var d_posXY = new Array(
  [0],
  [0, 0], // Die erste Zahl repräsentiert die linke Position, die zweite die obere. Beispiel: Die Position des ersten Blocks ist links:0px, oben:0px
  [150, 0],
  [300, 0],
  [0, 150],
  [150, 150],
  [300, 150],
  [0, 300],
  [150, 300],
  [300, 300]
);
// Position der großen DIVs
d[1] = 1;
d[2] = 2;
d[3] = 3;
d[4] = 4;
d[5] = 5;
d[6] = 6;
d[7] = 7;
d[8] = 8;
d[9] = 0;
// Standardanordnung, das neunte große DIV ist leer, also 0. Wir verwenden 0, um die leere Kachel zu repräsentieren.

✨ Lösung prüfen und üben

Implementiere die Move-Funktion

Erstelle eine Funktion, die es ermöglicht, die Kacheln aufgrund der Benutzereingabe zu bewegen.

Füge in puzzle.js hinzu:

// puzzle.js

function move(id) {
  // Move-Funktion
  var i = 1;
  for (i = 1; i < 10; ++i) {
    if (d[i] == id) break;
  }
  // Diese Schleife findet die Position der kleinen DIV innerhalb des großen DIV
  var target_d = 0;
  // Speichert die möglichen Positionen für die kleine DIV, 0 bedeutet, dass sie sich nicht bewegen kann
  target_d = whereCanTo(i);
  // Findet heraus, wohin die kleine DIV sich bewegen kann. Wenn es 0 zurückgibt, bedeutet das, dass sie sich nicht bewegen kann, andernfalls gibt es die Zielpositionnummer zurück
  if (target_d != 0) {
    d[i] = 0;
    // Setzt die Nummer des aktuellen großen DIV auf 0, weil die kleine DIV sich bewegt hat, also ist das aktuelle große DIV jetzt leer
    d[target_d] = id;
    // Setzt das Zielgroße DIV auf die Nummer der angeklickten kleinen DIV
    document.getElementById("d" + id).style.left = d_posXY[target_d][0] + "px";
    document.getElementById("d" + id).style.top = d_posXY[target_d][1] + "px";
    // Schließlich setzt die Position der angeklickten kleinen DIV auf die Position des Zielgroßen DIVs
  }

  var finish_flag = true;
  // Flag, um anzuzeigen, ob das Spiel abgeschlossen ist, true bedeutet, dass es abgeschlossen ist
  for (var k = 1; k < 9; ++k) {
    if (d[k] != k) {
      finish_flag = false;
      break;
    }
  }
  // Iteriert von 1, überprüft jede große DIV-Nummer. Wenn sie nicht in der richtigen Reihenfolge sind, ist das Spiel nicht abgeschlossen.
  if (finish_flag == true) {
    if (!pause) start();
    alert("Congratulations!");
  }
  // Wenn true, ist das Spiel abgeschlossen. Wenn es nicht pausiert ist, ruft die Pause-Funktion auf und zeigt eine Erfolgsmeldung an.
}

✨ Lösung prüfen und üben

Bestimme die möglichen Bewegungen der Kacheln

Erstelle eine Funktion, um zu bestimmen, wohin eine Kachel aufgrund ihrer aktuellen Position bewegen kann.

Füge in puzzle.js hinzu:

// puzzle.js

function whereCanTo(cur_div) {
  // Funktion, um zu bestimmen, ob ein bestimmtes DIV sich bewegen kann und wohin
  var j = 0;
  var move_flag = false;
  for (j = 0; j < d_direct[cur_div].length; ++j) {
    if (d[d_direct[cur_div][j]] == 0) {
      move_flag = true;
      break;
    }
  }
  if (move_flag == true) {
    return d_direct[cur_div][j];
  } else {
    return 0;
  }
  // Wenn es sich bewegen kann, gibt es die Zielpositionnummer zurück, andernfalls gibt es 0 zurück
}

✨ Lösung prüfen und üben

Implementiere den Spiel-Timer

Füge eine Timer-Funktion hinzu, um die verstrichene Zeit während des Spiels zu verfolgen.

Füge in puzzle.js hinzu:

// puzzle.js

function timer() {
  // Timer-Funktion, wird每秒 ausgeführt
  time += 1;
  var min = parseInt(time / 60); // Konvertiert Sekunden in Minuten
  var sec = time % 60; // Holt die verbleibenden Sekunden
  document.getElementById("timer").innerHTML =
    min + " Minuten " + sec + " Sekunden";
}

✨ Lösung prüfen und üben

Steuere den Spielablauf

Implementiere Funktionen, um das Spiel basierend auf Benutzereingaben zu starten, zu pausieren oder zurückzusetzen.

Füge in puzzle.js hinzu:

// puzzle.js

function start() {
  // Starte oder pausiere das Spiel
  if (pause) {
    document.getElementById("start").innerHTML = "Pause";
    pause = false;
    set_timer = setInterval(timer, 1000);
  } else {
    document.getElementById("start").innerHTML = "Start";
    pause = true;
    clearInterval(set_timer);
  }
}
function reset() {
  // Setze das Spiel zurück
  time = 0;
  random_d();
  if (pause) start();
}

✨ Lösung prüfen und üben

Mische die Kacheln zufällig

Erstelle eine Funktion, um die Kacheln am Anfang oder beim Zurücksetzen zufällig zu mischen.

Füge in puzzle.js hinzu:

// puzzle.js

function random_d() {
  // Mische die Kacheln zufällig
  for (var i = 9; i > 1; --i) {
    var to = parseInt(Math.random() * (i - 1) + 1);
    if (d[i] != 0) {
      document.getElementById("d" + d[i]).style.left = d_posXY[to][0] + "px";
      document.getElementById("d" + d[i]).style.top = d_posXY[to][1] + "px";
    }
    if (d[to] != 0) {
      document.getElementById("d" + d[to]).style.left = d_posXY[i][0] + "px";
      document.getElementById("d" + d[to]).style.top = d_posXY[i][1] + "px";
    }
    var tem = d[to];
    d[to] = d[i];
    d[i] = tem;
  }
}

✨ Lösung prüfen und üben

Initialisiere das Spiel beim Laden der Seite

Schließlich stellen Sie sicher, dass die Spielkacheln beim Laden der Webseite angezeigt und zum Spielen bereit sind.

Füge in puzzle.js hinzu:

// puzzle.js

// Initialisiere das Spiel beim Laden der Seite
window.onload = function () {
  reset();
};

✨ Lösung prüfen und üben

Ausführen der App

Öffnen Sie index.html in einem Webbrowser.
Der Effekt der Seite ist wie folgt:

✨ Lösung prüfen und üben

Zusammenfassung

Sie haben jetzt erfolgreich ein Sliding Puzzle-Spiel mit JavaScript auf strukturierte und organisierte Weise gebaut! Die schrittweise Zergliederung sollte es Lehrern einfacher machen, jede Komponente der Spiel-Logik zu verstehen. Denken Sie daran, dass dies nur eine Basisversion ist und es viel Raum für Verbesserungen und zusätzliche Funktionen gibt. Tauchen Sie ein und machen Sie es zu Ihrem eigenen. Frohes Programmieren!