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
Projektaufstellung
Ziel: Die Grundlage unseres Puzzle-Spiels ist eine neue React-Anwendung.
Öffnen Sie Ihren Terminal.
Navigieren Sie zum Projektverzeichnis:
cd puzzle-gameInstallieren Sie die Projektabhängigkeiten:
npm install
PuzzleGame-Komponente erstellen
Ziel: Die Hauptkomponente des Puzzle-Spiels einrichten.
- Im Verzeichnis
srcerstellen Sie einen Ordner namenscomponents. - Innerhalb von
componentserstellen Sie eine neue Datei namensPuzzleGame.js. - Fügen Sie die folgende grundlegende Struktur zu
PuzzleGame.jshinzu:
// 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;
Zustand und Bildeinrichtung implementieren
Ziel: Den Zustand einrichten, um die Puzzle-Stücke zu verwalten und das Puzzle-Bild zu definieren.
- In
PuzzleGame.jsimportieren SieuseStateaus 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.pngimpublic-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;
Puzzleteile 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>
);
};
Ziehen und Ablegen-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>
);
};
Das App-Komponente aktualisieren
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;
Das Puzzle gestalten
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-containerund.puzzle-piecehinzu, 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 */
}
Das Programm ausführen
Ziel: Starten Sie die Anwendung, um das fertige Puzzle-Spiel zu sehen.
Im Projektverzeichnis führen Sie Folgendes aus:
npm startDie 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.
