KodikKodik
{}const=>[]async()letfn</>var
WebPraxisEntwicklung

Tower Blocks - Ein aufregendes 3D-Spiel in JavaScript

Erfahren Sie, wie Sie Tower Blocks Game erstellen, ein 3D-Spiel, in dem Sie einen Turm aus Blöcken bauen. Erfahren Sie, wie Sie mit Three.js und GSAP Animationen erstellen, Punkte zählen und den Spielprozess steuern.

К

Kodik

Autor

7 Min. Lesezeit

Tower Blocks Game - ist ein faszinierendes Arcade-Spiel, in dem der Spieler einen Turm bauen muss, indem er Blöcke übereinander legt. Ziel ist es, die Blöcke so genau wie möglich zu platzieren, damit der Turm stabil bleibt.

In diesem Tutorial erstellen wir ein Tower Blocks Game mit HTML, CSS und JavaScript. Wir werden verwenden Three.js für 3D-Visualisierung und GSAP für flüssige Animationen. Das Spiel beinhaltet:

  1. Animation von Blöcken, die sich bewegen und anhalten.

  2. Änderung der Größe und Position der Blöcke in Abhängigkeit von der Genauigkeit der Platzierung.

  3. Punktzahl und Spieloberfläche.

Spielbeschreibung

Tower Blocks Game - ist ein Spiel, in dem Sie einen Turm bauen müssen, indem Sie bewegliche Blöcke platzieren. Je genauer Sie die Blöcke platzieren, desto höher wird der Turm. Wenn ein Block über den vorherigen hinausgeht, wird ein Teil des Blocks abgeschnitten. Das Spiel endet, wenn die Blöcke den Turm vollständig verfehlen.

Besonderheiten:

  • Bequeme Steuerung (Klick oder Leerzeichen).

  • Bunte 3D-Grafik.

  • Allmählich komplizierter werdendes Gameplay.

Phasen der Spielentwicklung

1. Erstellen einer HTML-Struktur

  • Fügen Sie die Hauptelemente hinzu: Spielcontainer, Blöcke für die Benutzeroberfläche (Punktzahl, Anweisungen, Spielende-Bildschirm).

  • Verbinden Sie Stile und Skripte: Three.js, GSAPund die Haupt-JavaScript-Datei.

2. Styling mit CSS

  • Verwenden Sie Stile, um den Spielcontainer zu zentrieren.

  • Erstellen Sie Animationen für das Erscheinen von Benutzeroberflächenelementen.

  • Passen Sie die Anpassungsfähigkeit der Benutzeroberfläche für verschiedene Bildschirme an.

3. Spiellogik in JavaScript

  • Klasse Bühne: Szenen-, Kamera- und Beleuchtungseinstellungen.

  • Block-Klasse: Verwaltung einzelner Blöcke (Größe, Bewegung, Platzierung).

  • Klasse Spiel: Steuerung des Spielprozesses (Hinzufügen von Blöcken, Punktezählung, Spielstatus).

4. Umsetzung der Blockmechanik

  • Bewegung des Blocks entlang der Achse.

  • Bestimmung des Kontaktpunkts mit dem vorherigen Block.

  • Block zuschneiden, wenn er über die Grenzen hinausgeht.

5. Steuerung einstellen

  • Reagiere auf Tastendruck und Mausklicks, um Blöcke zu platzieren.

6. Punktezählung und Spielende

  • Erhöhen Sie die Punktzahl für jeden richtig platzierten Block.

  • Beenden Sie das Spiel, wenn der Block verfehlt wird.

7. Testen und Optimieren

  • Stellen Sie sicher, dass das Spiel auf allen Geräten und Bildschirmen funktioniert.

  • Überprüfen Sie, ob die Übergänge zwischen den Spielzuständen fließend sind.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Tower Blocks Game</title>
    <link rel="stylesheet" href="style.css"> <!-- Подключение стилей -->
</head>
<body>
    <div id="container">
        <!-- Основная область игры -->
        <div id="game"></div>
        
        <!-- Счет игры -->
        <div id="score">0</div>
        
        <!-- Инструкции -->
        <div id="instructions">Кликните, чтобы разместить блок</div>
        
        <!-- Экран окончания игры -->
        <div class="game-over">
            <h2>Игра окончена</h2>
            <p>Вы отлично справились, вы лучший.</p>
            <p>Кликните, чтобы начать заново</p>
        </div>
        
        <!-- Экран готовности к началу игры -->
        <div class="game-ready">
            <div id="start-button">Начать</div>
        </div>
    </div>

    <!-- Подключение скриптов -->
    <script src="https:// codepen.io/steveg3003/pen/zBVakw.js "> </ script> <!- Bibliothek für Hilfsfunktionen ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js "> </ script> <!-- Three.js für die Arbeit mit 3D ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <! -- GSAP für Animation -- >
    <script src="script.js"></script> <!-- Основная логика игры -->
</body>
</html>

Was machen wir in diesem HTML?

  1. Wir fügen die Spielstruktur hinzu:

    • Wir erstellen einen Container mit id="container", der der Hauptbereich des Spiels sein wird.

    • Im Inneren des Containers platzieren wir:

      • #game - Bereich zum Zeichnen von 3D-Grafiken mit Three.js.

      • #score - Spielstand, der in Echtzeit aktualisiert wird.

      • #instructions - ein Hinweis für den Spieler, der zu Beginn des Spiels angezeigt wird.

      • .game-over - Bildschirm, der angezeigt wird, wenn das Spiel beendet ist.

      • .game-ready - Bildschirm mit einer Schaltfläche zum Starten des Spiels.

  2. Wir verbinden Stile:

    • Wir verwenden <link> zum Verbinden der Datei style.css, die das Erscheinungsbild des Spiels festlegt und die Benutzeroberfläche formatiert.

  3. Wir verbinden Bibliotheken und Skripte:

    • Three.js — Bibliothek zum Erstellen und Arbeiten mit 3D-Grafiken.

    • GSAP — Bibliothek für flüssige Animation von Elementen.

    • script.js - die Hauptdatei mit der Spiellogik.

  4. Wir fügen Meta-Tags hinzu:

    • <meta charset="UTF-8"> - Legt die UTF-8-Codierung fest, um den Text auf Russisch korrekt anzuzeigen.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - stellt die Anpassungsfähigkeit der Spieloberfläche auf mobilen Geräten sicher.

  5. Interaktionsszenarien:

    • Verbundene Skripte implementieren die Spielmechanik:

      • #start-button beginnt das Spiel.

      • Die Interaktion mit #instructions erfolgt zu Beginn des Spiels.

      • Der Bildschirm .game-over erscheint, wenn der Spieler einen Fehler macht.

Wir fügen CSS-Stile hinzu

Für das Styling von Tower Blocks Game verwenden wir CSS, um eine angenehme und benutzerfreundliche Oberfläche zu erstellen, die Anpassungsfähigkeit und Animationen unterstützt.

Grundelemente und ihre Stile

1. Grundeinstellungen

Wir deaktivieren die Standardabstände und das Scrollen, damit das Spiel den gesamten Bildschirm einnimmt:

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Comfortaa", cursive;
}

2. Spielcontainer

Der Container nimmt den gesamten Bildschirm ein und dient als Hauptbereich für das Spiel:

#container {
  width: 100%;
  height: 100%;
}

3. Rechnung

Der Spielstand wird oben auf dem Bildschirm angezeigt, hat eine große Größe und eine flüssige Animation des Erscheinens:

#container #score {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  color: #333344;
  transition: transform 0.5s ease;
}

4. Spielgrafik

Der Bereich #game dient zur Darstellung von 3D-Grafiken mit Three.js und nimmt den gesamten Bildschirm ein:

#container #game {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

5. Bildschirme zum Spielende und -beginn

Die Bildschirme .game-over und .game-ready erscheinen in der Mitte des Bildschirms mit einer Animation:

#container .game-over, #container .game-ready {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Wo finde ich den vollständigen Code?

Der vollständige CSS-Code ist in der App verfügbar Kodik oder auf GitHub-Projekt. So können Sie das gesamte Styling studieren und gegebenenfalls das Erscheinungsbild an Ihre Bedürfnisse anpassen.

Beschreibung der Spiellogik von Tower Blocks Game (JavaScript)

JavaScript ist die Grundlage für die Umsetzung der gesamten Spiellogik von Tower Blocks Game. Es ist verantwortlich für die Steuerung der 3D-Szene, die Bewegung der Blöcke, die Punktezählung und die Interaktion mit dem Spieler.

JavaScript-Grundelemente und ihre Funktionalität

1. Erstellen einer 3D-Szene

Für die Arbeit mit 3D-Grafiken verwenden wir die Bibliothek Three.js. Mit der Klasse Stage werden eine Szene, eine Kamera und eine Beleuchtung erstellt:

class Stage {
  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(...);
    this.light = new THREE.DirectionalLight(0xffffff, 0.5);
    this.scene.add(this.light);
  }
}

Was wir tun:

  • Wir stellen die Kamera für die orthographische Projektion ein (geeignet für Spiele mit "Draufsicht").

  • Wir fügen Beleuchtung hinzu, um visuelles Volumen zu schaffen.

2. Erstellen von Blöcken

Die Klasse Block steuert einzelne Blöcke, ihre Größe, Bewegung und Platzierung:

class Block {
  constructor(previousBlock) {
    this.dimension = { width: 10, height: 2, depth: 10 };
    this.position = { x: 0, y: ..., z: 0 };
    this.mesh = new THREE.Mesh(new THREE.BoxGeometry(...), new THREE.MeshToonMaterial(...));
  }

  tick() {
    // Steuert die Bewegung des Blocks
    this.position[this.workingPlane] += this.direction;
  }

  place() {
    // Logik des Blockzuschnitts bei Nichtübereinstimmung mit dem vorherigen
  }
}

Was wir tun:

  • Wir legen die Größe und die Startpositionen der Blöcke fest.

  • Wir implementieren die Bewegung von Blöcken und deren Stopp beim Drücken.

3. Spielsteuerung

Die Klasse Game kombiniert Spiellogik, Zustandsverwaltung, Hinzufügen neuer Blöcke und Punktezählung:

class Game {
  constructor() {
    this.blocks = [];
    this.stage = new Stage();
    this.state = 'READY';
    this.score = 0;
  }

  addBlock() {
    // Fügt dem Turm einen neuen Block hinzu
  }

  placeBlock() {
    // Platziert den aktuellen Block und prüft, ob das Spiel beendet ist
  }

  restartGame() {
    // Beendet das Spiel nach Abschluss
  }
}

Was wir tun:

  • Wir verarbeiten den Status des Spiels: Start, Spiel, Ende, Neustart.

  • Wir verwalten das Hinzufügen neuer Blöcke und das Aktualisieren der Szene.

  • Wir zählen Punkte für erfolgreich platzierte Blöcke.

4. Interaktion mit dem Spieler

Das Spiel reagiert auf Benutzeraktionen: Drücken der Leertaste oder Klicken mit der Maus, um Blöcke zu platzieren:

document.addEventListener('click', () => game.onAction());
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) game.onAction(); // Leertaste drücken
});

5. Animationen

Mit Hilfe der Bibliothek GSAP Wir implementieren eine gleichmäßige Kamerabewegung und Blockanimation:

TweenLite.to(this.camera.position, 0.3, { y: newY });
TweenLite.to(block.position, 1, { x: ... });

Was wir tun:

  • Die Kamera bewegt sich sanft nach oben und folgt den Blöcken.

  • Blöcke, die nicht übereinstimmen, fliegen zur Seite und verschwinden.

Wo finde ich den vollständigen Code?

Der vollständige JavaScript-Code ist in der App verfügbar Kodik oder auf GitHub-Projekt. Sie können es genauer studieren und gegebenenfalls an Ihre Bedürfnisse anpassen.

Befund

Erstellen eines Spiels Tower Blocks Game - ist ein faszinierender Prozess, der die Arbeit mit 3D-Grafiken, Animationen und Spielmechaniken kombiniert. Wir haben uns die wichtigsten Punkte der Entwicklung angesehen: Szenenkonfiguration, Blockverwaltung, Implementierung von Interaktionen und Styling der Benutzeroberfläche.

Wo kann man spielen und lernen, wie man ein Spiel erstellt?

Spielen Sie Tower Blocks Game und Sie können den Code in der App im Detail studieren Kodik. Dies ist eine großartige Gelegenheit, nicht nur das Spiel zu genießen, sondern auch zu lernen, wie Sie Ihre eigenen Projekte entwickeln, indem Sie das Beispiel in der Praxis studieren. Der vollständige Quellcode ist auch verfügbar unter GitHub-Projekt, wo Sie es herunterladen und an Ihre Bedürfnisse anpassen können.

Versuchen Sie, selbst ein Spiel zu erstellen, experimentieren Sie mit den Einstellungen und verbessern Sie es - das ist die Magie des Programmierens! 🚀

🎯Hör auf zu zögern

Artikel gefallen?
Zeit zum Üben!

Bei Kodik liest du nicht nur — du schreibst sofort Code. Theorie + Praxis = echte Skills.

⚡Sofortige Praxis
🧠KI erklärt Code
🏆Zertifikat

Keine Registrierung • Keine Karte