Création d'un jeu de puzzle glisser-déposer en React

Introduction

Dans ce projet, nous allons créer un jeu de puzzle avec glisser-déposer à l'aide de React. Il s'agit d'un excellent projet pour les débutants qui souhaitent apprendre les composants React, la gestion de l'état et la gestion des interactions utilisateur. À la fin de ce projet, vous aurez un jeu de puzzle fonctionnel.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer une nouvelle application React
• Comment créer le composant principal du jeu de puzzle
• Comment gérer l'état et configurer l'image du puzzle
• Comment afficher les pièces du puzzle à l'écran
• Comment implémenter la fonctionnalité de glisser-déposer
• Comment intégrer le composant PuzzleGame dans le fichier principal de l'application
• Comment ajouter du CSS pour styliser le puzzle

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer une application React et créer un composant
• Gérer l'état et gérer les interactions utilisateur
• Implémenter la fonctionnalité de glisser-déposer
• Intégrer un style pour rendre le puzzle visuellement attrayant

Skills Graph

Configuration du projet

Objectif : La base de notre jeu de puzzle est une nouvelle application React.

• Ouvrez votre terminal.

• Accédez à votre répertoire de projet :

  cd puzzle-game

• Installez les dépendances du projet :

  npm install

Créer le composant PuzzleGame

Objectif : Configurer le composant principal du jeu de puzzle.

• Dans le répertoire src, créez un dossier nommé components.
• Dans components, créez un nouveau fichier nommé PuzzleGame.js.
• Ajoutez la structure de base suivante à PuzzleGame.js :

// src/components/PuzzleGame.js
// Importation de React et de useState pour gérer l'état du composant
import React, { useState, useEffect } from "react";

// Définition du composant PuzzleGame
const PuzzleGame = () => {
  // Ce composant gérera la logique du jeu et l'interface utilisateur
  return (
    <div className="game-container">
      {/* C'est ici que le puzzle sera affiché */}
    </div>
  );
};

// Exportation du composant pour l'utilisation dans d'autres fichiers
export default PuzzleGame;

Implémenter l'état et la configuration de l'image

Objectif : Configurer l'état pour gérer les pièces du puzzle et définir l'image du puzzle.

• Dans PuzzleGame.js, importez useState de React.
• Définissez une variable d'état pour suivre les positions des pièces du puzzle.
• Définissez l'URL de l'image du puzzle (placez une image nommée corgi.png dans le dossier public).

// src/components/PuzzleGame.js

//...autres importations
const PuzzleGame = () => {
  // Définissez l'URL de l'image et les positions initiales des pièces du puzzle
  const imgUrl = "corgi.png"; // Assurez-vous que cette image existe dans le dossier public
  const [positions, setPositions] = useState([...Array(16).keys()]);

  useEffect(() => {
    // Mélangez les positions pour la configuration initiale du puzzle
    setPositions((prevPositions) => {
      const newPos = [...prevPositions];
      newPos.sort(() => Math.random() - 0.5);
      return newPos;
    });
  }, []);

  // Instruction de retour du composant
  return (
    <div className="game-container">
      {/* L'interface utilisateur du puzzle sera ajoutée ici dans les étapes suivantes */}
    </div>
  );
};

// Exportation du composant PuzzleGame
export default PuzzleGame;

Afficher les pièces du puzzle

Objectif : Afficher les pièces du puzzle à l'écran.

• Parcourez l'état positions pour afficher chaque pièce du puzzle individuellement.
• Chaque pièce devrait afficher une partie de l'image.

// src/components/PuzzleGame.js
const PuzzleGame = () => {
  //...code précédent

  return (
    <div className="game-container">
      <div className="reference-image">
        <img src={imgUrl} alt="Image de référence" />
      </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>
  );
};

Ajouter la fonctionnalité de glisser-déposer

Objectif : Implémenter la logique de glisser-déposer des pièces du puzzle.

• Ajoutez des gestionnaires pour les événements de début de glissement, de survol de glissement et de dépose.
• Implémentez la logique pour échanger les pièces du puzzle lorsqu'elles sont déposées.

// src/components/PuzzleGame.js

const PuzzleGame = () => {
  //...code précédent

  // Gérer le début d'un événement de glissement
  const handleDragStart = (e, position) => {
    e.dataTransfer.setData("text/plain", position);
  };

  // Gérer l'événement de dépose
  const handleDrop = (e, position) => {
    e.preventDefault();
    const originalPosition = e.dataTransfer.getData("text");
    // Ajoutez la logique ici pour échanger les positions des pièces du puzzle
    setPositions((prevPositions) => {
      const newPos = [...prevPositions];
      [newPos[originalPosition], newPos[position]] = [
        newPos[position],
        newPos[originalPosition]
      ];
      return newPos;
    });
  };

  // Autoriser l'action de dépose en empêchant le comportement par défaut
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  // Afficher les pièces du puzzle avec les gestionnaires de glisser-déposer ajoutés
};

// src/components/PuzzleGame.js
const PuzzleGame = () => {
  //...code précédent

  return (
    <div className="game-container">
      <div className="reference-image">
        <img src={imgUrl} alt="Image de référence" />
      </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>
  );
};

Mettre à jour le composant App

Objectif : Intégrer le composant PuzzleGame dans le fichier principal de l'application.

• Ouvrez src/App.js.
• Affichez le composant PuzzleGame.

// src/App.js

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

// Composant App qui affiche le composant PuzzleGame
function App() {
  return (
    <div className="App">
      <PuzzleGame />
    </div>
  );
}

export default App;

Styliser le puzzle

Objectif : Ajouter du CSS pour rendre le puzzle visuellement attrayant.

• Ouvrez src/App.css.
• Ajoutez des styles pour .game-container et .puzzle-piece pour disposer correctement le puzzle.

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;
  /* Ajoutez une bordure pour la cohérence */
  padding: 10px;
  /* Ajoutez un peu de marge autour de l'image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Ajoutez une ombre pour le relief */
}

.reference-image img {
  display: block;
  /* Supprimez tout espacement en ligne par défaut */
  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);
  /* Ajoutez une ombre plus importante pour un effet 3D */
  background: #ddd;
  /* Fond clair pour les espaces */
}

.puzzle-piece {
  width: 100%;
  height: 100%;
  background-size: 400px 400px;
  cursor: grab;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  /* Ajoutez une ombre interne pour chaque pièce */
}

Exécuter l'application

Objectif : Lancer l'application pour voir le jeu de puzzle terminé.

• Dans votre répertoire de projet, exécutez :

  npm start

• L'application devrait s'ouvrir dans votre navigateur web, affichant le jeu de puzzle.

Sommaire

Félicitations ! Vous avez réussi à construire un jeu de puzzle glisser-déposer en React. Ce projet a couvert la configuration d'un projet React, la création de composants, la gestion de l'état, la gestion des interactions utilisateur et l'application de styles de base. Vous pouvez désormais expérimenter en ajoutant des fonctionnalités supplémentaires telles qu'un minuteur, un score ou différents niveaux pour améliorer le jeu.