Ein Tic Tac Toe Spiel mit React erstellen

Tutorials
JavaScript

Willkommen zu meiner Version des klassischen Tic Tac Toe Spiels! Ich habe ein Tic Tac Toe Spiel mit React und SCSS erstellt und es in etwa 6 Stunden abgeschlossen. Das Spiel bietet einen Einzelspieler-Modus gegen den Computer, ein Popup zur Gewinnerbekanntgabe und Gewinnzähler für beide Spieler. Während das Raster auf n x n anpassbar ist, unterstützt die aktuelle Gewinnlogik nur 3 x 3. Zukünftige Verbesserungen umfassen intelligentere Züge des Computers und eine Echtzeit-Multiplayer-Funktionalität.

Überblick

  • Benötigte Gesamtentwicklungszeit: ~6 Stunden
  • Verwendete Technologien: JavaScript (React) + SCSS

Spielregeln

1. Ziel

Das Ziel des Spiels ist es, drei Ihrer Symbole (X oder O) in einer horizontalen, vertikalen oder diagonalen Reihe auf einem 3 x 3 Raster auszurichten.

2. Zugreihenfolge

  • Spieler A beginnt immer und spielt als X.
  • Der Computergegner spielt als O und macht seinen Zug sofort nach Spieler A.

3. Spielablauf

  • Die Spieler setzen abwechselnd leere Felder auf dem Raster.
  • Der erste Spieler, der drei Symbole ausrichtet, gewinnt das Spiel.

4. Gewinnbedingungen

Ein Spieler gewinnt, wenn er erreicht:

  • Drei Symbole in einer horizontalen Reihe
  • Drei Symbole in einer vertikalen Spalte, oder
  • Drei Symbole in einer diagonalen Linie

5. Zeichnen

Wenn alle Felder gefüllt sind und kein Spieler die Gewinnbedingungen erfüllt, endet das Spiel unentschieden.

6. Punktverfolgung

Die Gewinnzähler verfolgen die Gesamtzahl der Siege sowohl für Spieler A als auch für den Computer.

Implementierte Funktionen (MVP)

Hier ist, was in dieser Version des Spiels enthalten ist:

  1. Gegen den Computer spielen: Ein lustiger Einzelspielermodus, in dem du gegen den Computer antrittst
  2. Gewinneransage-Popup: Am Ende jedes Spiels wird in einem Popup der Gewinner bekannt gegeben.
  3. Gewinnzähler: Verfolge die Gesamtgewinne sowohl für den Spieler als auch für den Computer.
  4. Anpassbares Gitter: Erstelle ein n x n Gitter (obwohl die Gewinnlogik derzeit nur 3 x 3 unterstützt).

Mögliche Verbesserungen

Blick in die Zukunft, hier sind einige Bereiche zur Verbesserung:

  1. [UX] Lokale Speicherung für Punkte: Speichere Spielpunkte lokal, damit sie nach dem Aktualisieren des Browsers bestehen bleiben.
  2. [UX/Tech] Intelligentere Züge des Computers: Ersetze zufällige Züge durch einen Algorithmus für ein wettbewerbsfähigeres Gameplay.
  3. [UX] Echtzeit-Multiplayer: Ermöglichen Sie zwei Spielern, in Echtzeit zu konkurrieren, indem Sie Technologien wie Socket.io verwenden.
  4. [Tech] Erweiterte SCSS-Organisation: Refaktorisieren Sie SCSS mit Mixins, Variablen und besseren Strukturierungstechniken.
  5. [UX/Tech] Sanfte Degradierung: Stellen Sie die Kompatibilität mit nicht-modernen Browsern für breitere Unterstützung sicher.

Einrichtung und Entwicklung

Voraussetzungen

Bevor Sie anfangen, stellen Sie sicher, dass Sie Node.js installiert haben (empfohlene Version: 6.4.1).

Erste Schritte

  1. Klone das Repository von GitHub.

2. Abhängigkeiten installieren:

npm install

3. Starten Sie den Entwicklungsserver:

npm start

  • Öffnen Sie http://localhost:3000 in Ihrem Browser, um die App anzuzeigen.

4. (Optional) Bauen Sie das Projekt für die Produktion:

npm run build

Dies erstellt einen optimierten build-Ordner, der bereit für die Bereitstellung ist.

Tests

Führen Sie Tests im interaktiven Überwachungsmodus mit:

npm test

Technische Details

Dateistruktur

Das Projekt folgt der standardmäßigen Create React App-Struktur mit einem modularen komponentenbasierten Ansatz.

  

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

Beschreibung und Ansatz

  • Die App wurde mit Create React App für ein schnelles MVP-Setup gestartet.
  • Das Spiel initialisiert ein n x n-Raster für das Gameplay.
  • Jede Zelle hat einen Klickereignis-Listener, der es Spieler A (X) ermöglicht, den ersten Zug zu machen.
  • Der Zug des Computers wird mit einer Logik zur zufälligen Auswahl einer Zelle simuliert, die für benutzerdefinierte Rastergrößen verbessert werden muss.
  • Verwendet wurde SCSS für das Styling mit einem Fokus auf Geschwindigkeit statt Komplexität während der Entwicklung.

Testansatz

Manuelle Tests

  • Stellen Sie sicher, dass der Computer einen Zug macht, nachdem Spieler A fertig ist.
  • Überprüfen Sie, ob das Spiel mit einem Gewinner-Ankündigungsbanner endet.
  • Testen Sie automatisierte Züge des Computers.

Potenzielle Unit-Tests

  • Überprüfen Sie, ob der Computer nach Spieler A zieht.
  • Validieren Sie, dass das Spiel den richtigen Gewinner anzeigt.
  • Testen Sie Randfälle für die Rasterinitialisierung und Benutzerinteraktionen.

Fazit

Vielen Dank, dass Sie mein Projekt erkundet haben!

Den vollständigen Quellcode finden Sie auf GitHub und können zu diesem Projekt beitragen. Lassen Sie uns gemeinsam coole Sachen bauen!

Source:
https://dzone.com/articles/building-a-tic-tac-toe-game-using-react