Projet individuel. Il s'agit d'une plateforme web ludique regroupant plusieurs mini-jeux interactifs (Snake, Morpion, Memory...) intégrés comme composants React, avec un système de scores local.

• Interface d'accueil intuitive pour choisir un jeu
• Indépendance pour chaque mini-jeu (modulaire)
• Système de scoreboard local (utilisation du localStorage)
• Design moderne, responsive et épuré avec Tailwind CSS

Explication Tailwind CSS :

Le projet utilise Tailwind CSS pour créer rapidement une interface claire et responsive. Grâce à ses classes utilitaires, la mise en page est fluide, les couleurs sont cohérentes, et les composants ont un style uniforme sans avoir à écrire de CSS personnalisé.

Utilisation de Vite.js :

Vite.js est utilisé pour initialiser et compiler rapidement le projet. Il permet un démarrage instantané du serveur de développement, un rechargement rapide à chaud (HMR), et un build optimisée pour la production. Son intégration avec React améliore grandement l'expérience développeur.

Structure des composants :

• App.js : point d’entrée principal avec gestion de la navigation

Le fichier App.js constitue le cœur de l’application React. Il contient la structure principale et configure la navigation entre les différentes pages grâce à un routeur (par exemple react-router-dom). Il intègre les composants globaux comme l’en-tête ou le menu, et définit les routes menant aux différentes vues.

• Header, Menu : composants de l’interface commune

Header est un composant présent sur toutes les pages, dans mon header c'est le nom du site et les differents jeux sous formats bouton.

• SnakeGame, MemoryGame, TicTacToe : composants de jeux indépendants

• Gestion de l’état local avec useState pour suivre des données dans un composant, et gestion de l’état global avec useContext pour partager des données entre plusieurs composants.


Exemple de gestion d’état avec useState pour les données locales, et useContext pour un contexte global partagé.

• Utiliser dans mon code pour stocker les scores des joueurs etc.

Compétences mises en œuvre :

• Développement React.js (Hooks, composants fonctionnels)
• Utilisation de Vite.js pour la compilation rapide
• Gestion de styles avec Tailwind CSS
• Stockage local avec localStorage
• Git et gestion de version avec GitHub

Technologies : React.js, JavaScript, Tailwind CSS, Vite.js, Git, GitHub

Code source : github.com/yanisyaniss/Mini-Jeux

Projet consistant à recréer le célèbre jeu Tetris en JavaScript à l’aide de la bibliothèque p5.js. Le joueur doit empiler des pièces pour compléter des lignes, avec une interface graphique responsive et des contrôles fluides.

• Interface avec score, et grille dynamique
• Contrôles clavier (flèches) pour une expérience intuitive
• Difficulté progressive et gestion de la fin de partie

Architecture du code :

• Game : Gestion globale du jeu

La boucle de jeu repose sur `setup()` et `draw()` : les pièces tombent automatiquement, le score augmente à chaque pièce fixée, et la détection de fin de partie s’effectue lorsque les blocs atteignent le haut de la grille. Ce système simple rend le jeu fluide et progressif.

• Board : Affichage de la grille et vérification des lignes

La classe Grille gère l'affichage de la grille de jeu. Chaque case est dessinée en fonction de son état : colorée si occupée, grise si vide. La grille est représentée sous forme de matrice à deux dimensions, initialisée à zéro, et utilise p5.js pour dessiner les cases à l'écran.


• ScoreManager : Calcul et stockage du score

Cette fonction JavaScript met à jour dynamiquement le score du joueur dans l'interface. Elle modifie le contenu textuel de l'élément HTML ayant pour ID score, en affichant la valeur actuelle de la variable score.

Technologies : JavaScript, p5.js, GitHub, éditeur en ligne p5.js

Code source : github.com/yanisyaniss/Tetris

A la fin de chaque partie il y a un ecran d'affichage "Game Over" et pour relancer une partie il faut appuyer sur F5

Code Game OVER