Erstellen eines React Drag-and-Drop-Puzzle-Spiels

Einführung

In diesem Projekt werden wir ein Puzzle-Spiel mit Drag-and-Drop-Funktionalität mithilfe von React erstellen. Dies ist ein ausgezeichnetes Projekt für Einsteiger, um sich mit React-Komponenten, Zustandsverwaltung und der Behandlung von Benutzereingaben vertraut zu machen. Am Ende dieses Projekts werden Sie ein funktionierendes Puzzle-Spiel haben.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie eine neue React-Anwendung einrichten
• Wie Sie die Hauptkomponente des Puzzle-Spiels erstellen
• Wie Sie den Zustand verwalten und das Puzzle-Bild einrichten
• Wie Sie die Puzzle-Stücke auf dem Bildschirm anzeigen
• Wie Sie die Drag-and-Drop-Funktionalität implementieren
• Wie Sie die PuzzleGame-Komponente in die Hauptanwendungsdatei integrieren
• Wie Sie CSS hinzufügen, um das Puzzle zu stylen

🏆 Errungenschaften

Nach Abschluss dieses Projekts werden Sie in der Lage sein:

• Eine React-Anwendung einzurichten und eine Komponente zu erstellen
• Den Zustand zu verwalten und Benutzereingaben zu behandeln
• Die Drag-and-Drop-Funktionalität zu implementieren
• Styling hinzuzufügen, um das Puzzle visuell ansprechend zu gestalten

Skills Graph

Projektaufstellung

Ziel: Die Grundlage unseres Puzzle-Spiels ist eine neue React-Anwendung.

• Öffnen Sie Ihren Terminal.

• Navigieren Sie zum Projektverzeichnis:

  cd puzzle-game

• Installieren Sie die Projektabhängigkeiten:

  npm install

PuzzleGame-Komponente erstellen

Ziel: Die Hauptkomponente des Puzzle-Spiels einrichten.

• Im Verzeichnis src erstellen Sie einen Ordner namens components.
• Innerhalb von components erstellen Sie eine neue Datei namens PuzzleGame.js.
• Fügen Sie die folgende grundlegende Struktur zu PuzzleGame.js hinzu:

// src/components/PuzzleGame.js
// Importieren von React und useState zur Verwaltung des Komponenten-Zustands
import React, { useState, useEffect } from "react";

// Definition der PuzzleGame-Komponente
const PuzzleGame = () => {
  // Diese Komponente wird die Spiel-Logik und die Benutzeroberfläche verarbeiten
  return (
    <div className="game-container">{/* Hier wird das Puzzle gerendert */}</div>
  );
};

// Exportieren der Komponente für die Verwendung in anderen Dateien
export default PuzzleGame;

Implementieren von Zustand und Bildeinrichtung

Ziel: Den Zustand einrichten, um die Puzzle-Stücke zu verwalten und das Puzzle-Bild zu definieren.

• In PuzzleGame.js importieren Sie useState aus React.
• Definieren Sie eine Zustandsvariable, um die Positionen der Puzzle-Stücke zu verfolgen.
• Definieren Sie die URL des Puzzle-Bilds (legen Sie ein Bild namens corgi.png im public-Ordner ab).

// src/components/PuzzleGame.js

//...andere Imports
const PuzzleGame = () => {
  // Definieren Sie die Bild-URL und die Anfangspositionen der Puzzle-Stücke
  const imgUrl = "corgi.png"; // Stellen Sie sicher, dass dieses Bild im public-Ordner vorhanden ist
  const [positions, setPositions] = useState([...Array(16).keys()]);

  useEffect(() => {
    // Mischen Sie die Positionen für die initiale Puzzle-Einrichtung
    setPositions((prevPositions) => {
      const newPos = [...prevPositions];
      newPos.sort(() => Math.random() - 0.5);
      return newPos;
    });
  }, []);

  // Rückgabestatement der Komponente
  return (
    <div className="game-container">
      {/* Die Benutzeroberfläche des Puzzles wird in späteren Schritten hier hinzugefügt */}
    </div>
  );
};

// Exportieren der PuzzleGame-Komponente
export default PuzzleGame;

Puzzle-Stücke rendern

Ziel: Die Puzzle-Stücke auf dem Bildschirm anzeigen.

• Iterieren Sie über den positions-Zustand, um einzelne Puzzle-Stücke zu rendern.
• Jedes Stück sollte einen Teil des Bilds anzeigen.

// src/components/PuzzleGame.js
const PuzzleGame = () => {
  //...vorheriger Code

  return (
    <div className="game-container">
      <div className="reference-image">
        <img src={imgUrl} alt="Referenzbild" />
      </div>
      <div className="puzzle-container">
        {positions.map((pos, index) => {
          const x = (pos % 4) * 100;
          const y = Math.floor(pos / 4) * 100;
          return (
            <div
              key={index}
              className="puzzle-piece"
              style={{
                backgroundImage: `url('${imgUrl}')`,
                backgroundPosition: `-${x}px -${y}px`
              }}
            />
          );
        })}
      </div>
    </div>
  );
};

Drag- und Drop-Funktionalität hinzufügen

Ziel: Die Logik für das Ziehen und Ablegen von Puzzle-Stücken implementieren.

• Fügen Sie Handler für das Drag-Start-, Drag-Over- und Drop-Ereignis hinzu.
• Implementieren Sie die Logik, um Puzzle-Stücke zu tauschen, wenn sie abgelegt werden.

// src/components/PuzzleGame.js

const PuzzleGame = () => {
  //...vorheriger Code

  // Behandeln des Startes eines Drag-Ereignisses
  const handleDragStart = (e, position) => {
    e.dataTransfer.setData("text/plain", position);
  };

  // Behandeln des Drop-Ereignisses
  const handleDrop = (e, position) => {
    e.preventDefault();
    const originalPosition = e.dataTransfer.getData("text");
    // Fügen Sie hier die Logik hinzu, um die Positionen der Puzzle-Stücke zu tauschen
    setPositions((prevPositions) => {
      const newPos = [...prevPositions];
      [newPos[originalPosition], newPos[position]] = [
        newPos[position],
        newPos[originalPosition]
      ];
      return newPos;
    });
  };

  // Erlauben der Drop-Aktion, indem das Standardverhalten verhindert wird
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  // Rendern von Puzzle-Stücken mit hinzugefügten Drag- und Drop-Handlern
};

// src/components/PuzzleGame.js
const PuzzleGame = () => {
  //...vorheriger Code

  return (
    <div className="game-container">
      <div className="reference-image">
        <img src={imgUrl} alt="Referenzbild" />
      </div>
      <div className="puzzle-container">
        {positions.map((pos, index) => {
          const x = (pos % 4) * 100;
          const y = Math.floor(pos / 4) * 100;
          return (
            <div
              key={index}
              className="puzzle-piece"
              draggable
              onDragStart={(e) => handleDragStart(e, index)}
              onDrop={(e) => handleDrop(e, index)}
              onDragOver={handleDragOver}
              style={{
                backgroundImage: `url('${imgUrl}')`,
                backgroundPosition: `-${x}px -${y}px`
              }}
            />
          );
        })}
      </div>
    </div>
  );
};

Aktualisieren der App-Komponente

Ziel: Die PuzzleGame-Komponente in die Hauptanwendungsdatei aufnehmen.

• Öffnen Sie src/App.js.
• Rendern Sie die PuzzleGame-Komponente.

// src/App.js

import React from "react";
import "./App.css";
import PuzzleGame from "./components/PuzzleGame";

// App-Komponente, die die PuzzleGame-Komponente rendert
function App() {
  return (
    <div className="App">
      <PuzzleGame />
    </div>
  );
}

export default App;

Styling des Puzzles

Ziel: Fügen Sie CSS hinzu, um das Puzzle optisch ansprechend zu gestalten.

• Öffnen Sie src/App.css.
• Fügen Sie Stile für .game-container und .puzzle-piece hinzu, um das Puzzle richtig auszurichten.

body {
  font-family: "Arial", sans-serif;
  text-align: center;
  padding: 20px;
  background: #f0f0f0;
}

.game-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.reference-image {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #aaa9a9;
  /* Fügen Sie eine Grenze hinzu, um die Konsistenz zu gewährleisten */
  padding: 10px;
  /* Fügen Sie etwas Abstand um das Bild hinzu */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Fügen Sie eine Schattenwirkung hinzu, um Tiefe zu erzeugen */
}

.reference-image img {
  display: block;
  /* Entfernen Sie jeglichen standardmäßigen Zeilenabstand */
  max-width: 200px;
}

.puzzle-container {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 5px solid #aaa9a9;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  /* Fügen Sie eine größere Schattenwirkung hinzu, um einen 3D-Effekt zu erzeugen */
  background: #ddd;
  /* Leichte Hintergrundfarbe für die Leerzeichen */
}

.puzzle-piece {
  width: 100%;
  height: 100%;
  background-size: 400px 400px;
  cursor: grab;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  /* Fügen Sie einen Einschubschatten für jedes Stück hinzu */
}

Ausführen der Anwendung

Ziel: Starten Sie die Anwendung, um das fertige Puzzle-Spiel zu sehen.

• Im Projektverzeichnis führen Sie Folgendes aus:

  npm start

• Die Anwendung sollte in Ihrem Webbrowser geöffnet werden und das Puzzle-Spiel anzeigen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich ein Drag-and-Drop-Puzzle-Spiel in React gebaut. Dieses Projekt umfasste das Einrichten eines React-Projekts, das Erstellen von Komponenten, das Verwalten des Zustands, das Behandeln von Benutzereingaben und das Anwenden von grundlegenden Stilen. Sie können jetzt experimentieren, indem Sie weitere Funktionen wie einen Timer, einen Score oder verschiedene Schwierigkeitsstufen hinzufügen, um das Spiel zu verbessern.