Construction d’un jeu de morpion en utilisant React

Bienvenue dans ma version du classique Tic Tac Toe ! J’ai créé un jeu de Tic Tac Toe en utilisant React et SCSS, que j’ai terminé en environ 6 heures. Le jeu propose un mode solo contre l’ordinateur, une fenêtre pop-up d’annonce du gagnant et des compteurs de victoires pour les deux joueurs. Bien que la grille soit personnalisable à n x n, la logique de victoire actuelle ne prend en charge que 3 x 3. Les améliorations futures incluent des mouvements plus intelligents de l’ordinateur et une fonctionnalité multijoueur en temps réel.

Résumé

• Temps de développement total nécessaire : ~6 heures
• Technologies utilisées : JavaScript (React) + SCSS

Règles du jeu

1. Objectif

Le but du jeu est d’aligner trois de vos symboles (X ou O) dans une ligne horizontale, verticale ou diagonale sur une grille 3 x 3.

2. Ordre de jeu

• Le joueur A commence toujours et joue en tant que X.
• L’adversaire informatique joue en tant que O et effectue son mouvement immédiatement après le joueur A.

3. Déroulement du jeu

• Les joueurs prennent tour à tour pour marquer des cellules vides sur la grille.
• Le premier joueur à aligner trois symboles remporte la partie.

4. Conditions de victoire

Un joueur gagne s’il obtient :

• Trois symboles dans une ligne horizontale
• Trois symboles dans une colonne verticale, ou
• Trois symboles dans une ligne diagonale

5. Dessinez

Si toutes les cellules sont remplies et qu’aucun joueur ne remplit les conditions de victoire, le jeu se termine par un match nul.

6. Suivi des scores

Les compteurs de victoire suivent le nombre total de victoires pour le Joueur A et l’ordinateur.

Fonctionnalités mises en œuvre (MVP)

Voici ce qui est inclus dans cette version du jeu :

1. Jouez contre l’ordinateur : Un mode solo amusant où vous affrontez l’ordinateur
2. Popup d’annonce du gagnant : À la fin de chaque partie, un popup révèle le gagnant.
3. Compteurs de victoire : Suivez le total des victoires pour le joueur et l’ordinateur.
4. Grille personnalisable : Créez une grille n x n (bien que la logique de victoire ne supporte actuellement que 3 x 3).

Améliorations possibles

En regardant vers l’avenir, voici quelques domaines à améliorer :

1. [UX] Stockage local pour les scores : Enregistrez les scores de jeu localement afin qu’ils persistent après le rafraîchissement du navigateur.
2. [UX/Tech] Mouvements d’ordinateur plus intelligents : Remplacez les mouvements aléatoires par un algorithme pour un gameplay plus compétitif.
3. [UX] Multijoueur en temps réel : Permettre à deux joueurs de s’affronter en temps réel en utilisant des technologies comme Socket.io.
4. [Tech] Organisation avancée de SCSS : Refactoriser le SCSS en utilisant des mixins, des variables et de meilleures techniques de structuration.
5. [UX/Tech] Dégradation gracieuse : Assurer la compatibilité avec les navigateurs non modernes pour un support plus large.

Configuration et Développement

Prérequis

Avant de commencer, assurez-vous d’avoir Node.js installé (version recommandée : 6.4.1).

Premiers Pas

1. Clonez le dépôt depuis GitHub.

2. Installez les dépendances :

npm install

3. Démarrez le serveur de développement :

npm start

• Ouvrez http://localhost:3000 dans votre navigateur pour voir l’application.

4. (Optionnel) Construisez le projet pour la production :

npm run build

Cela crée un dossier build optimisé, prêt pour le déploiement.

Tests

Exécutez des tests en mode veille interactive avec :

npm test

Détails Techniques

Structure des Fichiers

Le projet suit la structure standard Create React App avec une approche modulaire basée sur des composants.

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

Description et Approche

• L’application a été lancée avec Create React App pour une configuration MVP rapide.
• Le jeu initialise une grille n x n pour le gameplay.
• Chaque cellule a un écouteur d’événements de clic, permettant au Joueur A (X) de faire le premier mouvement.
• Le tour de l’ordinateur est simulé avec une logique de sélection de cellule aléatoire, qui devra être améliorée pour des tailles de grille personnalisées.
• Utilisé SCSS pour le style avec un accent sur la vitesse plutôt que sur la complexité durant le développement.

Approche de test

Tests manuels

• Assurez-vous que l’ordinateur effectue un mouvement après que le Joueur A ait terminé.
• Vérifiez que le jeu se termine avec une annonce de gagnant.
• Testez les mouvements automatisés par l’ordinateur.

Tests unitaires potentiels

• Vérifiez si l’ordinateur joue après le Joueur A.
• Validez que le jeu affiche le bon gagnant.
• Testez les cas limites pour l’initialisation de la grille et les interactions utilisateur.

Conclusion

Merci d’avoir exploré mon projet !

Vous pouvez trouver le code source complet et contribuer à ce projet sur GitHub. Construisons des choses cool ensemble !