Retour aux projets
Projet personnel 2025

Pierre·Feuille
·Ciseaux

Un jeu classique réinterprété en JavaScript vanilla — conçu de A à Z pour maîtriser la logique de jeu, la manipulation du DOM et la persistance des données côté client.

Live
Aperçu du jeu Pierre Feuille Ciseaux
JavaScript
HTML5
CSS3
3
3
Langages
0
0
Dépendance
3
3
Manches / partie
Score persistant

Le projet

Développé en dehors des cours, ce projet est né d'une envie simple : aller au-delà des exercices académiques et construire quelque chose de bout en bout, seul. Le défi ? Recréer Pierre-Feuille-Ciseaux en JavaScript pur, sans framework ni librairie externe.

L'idée est de démontrer une maîtrise réelle du DOM, de la logique conditionnelle et de la gestion d'état — des fondamentaux que j'ai mis en pratique de façon concrète plutôt que théorique.

Le jeu se joue en 3 manches avec victoire anticipée possible, et conserve un score global persistant entre les sessions via localStorage.

Les langages

HTML5
Structure sémantique de l'interface — modale de règles, zones de jeu, compteur de manches.
Structure · Accessibilité · Sémantique
CSS3
Design inspiré du challenge Frontend Mentor — dégradés, responsive, layout flexbox et positionnement des icônes.
Mise en page · Animations · Responsive
JavaScript
Cœur du projet : logique de jeu, manipulation du DOM, gestion des événements, persistance via localStorage.
Logique · DOM · localStorage · Events

Comment j'ai construit ça

1
Maquette & structure HTML
Partir du design Frontend Mentor pour définir les zones : sélection, affichage du résultat, score, modale.
2
Logique de base JS
Capturer le choix joueur via les événements click, générer un choix aléatoire pour l'ordinateur.
3
Système de manches
Implémenter 3 manches avec victoire anticipée à 2 gains, puis afficher le résultat final.
4
Score & persistance
Sauvegarder le score global dans localStorage pour le retrouver à chaque nouvelle session.

Les obstacles rencontrés

Événements
Accumulation des event listeners
Placer les addEventListener à l'intérieur d'une fonction causait leur multiplication à chaque appel, créant des comportements inattendus.
Déclarer les écouteurs une seule fois, hors de toute fonction.
DOM
Récupérer l'ID du bouton cliqué
Comprendre la différence entre event.target et event.currentTarget — notamment quand l'image enfant intercepte le clic à la place du div parent.
Utiliser event.currentTarget.id pour cibler l'élément écouté.
Logique
Conditions de victoire imbriquées
Écrire les 9 combinaisons possibles (3×3) de façon lisible tout en gérant correctement l'égalité, les 3 victoires et les 3 défaites.
Regrouper par cas : égalité d'abord, puis conditions de victoire, le reste = défaite.
État
Réinitialisation propre entre parties
S'assurer que la remise à zéro (variables + affichage DOM) était complète et ne laissait aucun état résiduel de la partie précédente.
Fonction rejouer() dédiée qui remet tout à l'état initial.

L'interface en image

Écran de sélection desktop
Sélection — Desktop
Écran de victoire desktop
Résultat victoire — Desktop
Écran de sélection mobile
Sélection — Mobile
Modale des règles
Modale des règles
Prêt à jouer ?

Testez le jeu
en ligne

Pierre Feuille Ciseaux
3 armes · 3 manches · 1 vainqueur