🧠 « Code + logique + fun = Toi + JavaScript, bébé. »
JavaScript, parfois un ex agaçant,
parfois ce partenaire adorable qui te surprend chaque jour.
Mais aujourd’hui…
On va créer un mini-jeu JS en seulement 30 lignes, et tu vas dire :
« Attends… 30 lignes ? Tu te moques de moi ? »
Notre type de jeu :
👉 Jeu de réaction
Un carré à l’écran devient vert à un moment aléatoire,
et tu dois cliquer dessus le plus vite possible.
Et oui, on va faire tout ça… en 30 lignes.
🚀 1) La logique du jeu — La micro-chirurgie cérébrale derrière ces 30 lignes
Le jeu a trois phases simples :
✔️ 1. Préparation
Le carré commence en gris. « Pas encore cliquable. »
✔️ 2. Attente
JavaScript adore le suspense.
On utilise setTimeout() pour le rendre vert après un délai aléatoire.
✔️ 3. Mesure de réaction
Le carré devient vert → tu cliques → on enregistre les timestamps → boom, ton temps de réaction.
C’est tout.
Aucun algorithme de la NASA là-dedans.
🧩 2) Le HTML : La scène (seulement 7 lignes)
Bébé, voici littéralement toute la scène :
<div id="box">Click me!</div>
<p id="result"></p>
📌 ASTUCE :
Garde le HTML minimal. « Moins de HTML, plus de magie. »
🎨 3) Le CSS : Habiller le carré avec style
Aujourd’hui on se muscle avec JavaScript,
donc le CSS peut faire sa diva 😘
#box {
width: 200px;
height: 200px;
background: gray;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
cursor: pointer;
border-radius: 20px;
}
💡 Fun fact :
Plus le carré est joli, plus ta réaction est rapide.
(Probablement. Totalement inventé mais ça semble vrai.)
⚙️ 4) La légende JavaScript en 30 lignes
Et la voici.
Compte-les — il y en a vraiment 30 👇
let box = document.getElementById("box");
let result = document.getElementById("result");
let startTime, endTime;
let clickable = false;
function startGame() {
box.style.background = "gray";
box.textContent = "Get ready...";
clickable = false;
let delay = Math.random() * 3000 + 1000;
setTimeout(() => {
box.style.background = "green";
box.textContent = "Click!";
startTime = Date.now();
clickable = true;
}, delay);
}
box.onclick = () => {
if (!clickable) {
result.textContent = "Trop tôt, bébé 😘";
return;
}
endTime = Date.now();
let reaction = endTime - startTime;
result.textContent = `Temps de réaction : ${reaction} ms 🔥`;
startGame();
};
startGame();
🧠 5) Décomposons le code (mode cours à l’université 😘)
🎯 1) Le délai aléatoire
let delay = Math.random() * 3000 + 1000;
JavaScript est comme :
« Surprise ! Tu ne sais pas quand ça deviendra vert.
Amuse-toi bien. »
Cela donne :
✔ minimum 1 seconde
✔ maximum 4 secondes
🎯 2) Rendre le carré « cliquable »
clickable = true;
La gestion d’état est énorme dans le game dev.
Ce booléen dit simplement :
« Oui roi/reine, tu peux cliquer maintenant. »
🎯 3) Mesure du temps de réaction
let reaction = endTime - startTime;
Si tu veux aller plus loin :
✨ temps le plus rapide
✨ moyenne
✨ tableau des scores
✨ système de séries (streak)
Tu peux tout ajouter.
💥 6) 10 idées folles pour améliorer le jeu
Parce qu’un développeur ne laisse jamais un truc fonctionner tranquillement 😌
🌟 1. Le carré saute à des positions aléatoires
🌟 2. Ajouter une animation de fond
🌟 3. Ajouter des effets sonores (et piques en cas de clic trop tôt)
🌟 4. Compte à rebours rouge → jaune → vert
🌟 5. Full mobile-friendly
🌟 6. Système de score
🌟 7. Mode défi 30 secondes
🌟 8. Animation du carré (scale up/down)
🌟 9. Écran de démarrage
🌟 10. MODE CHAOS : couleurs, tailles, positions aléatoires
❤️ 7) Pourquoi ce mini-jeu est un outil incroyable
Parce qu’en seulement 30 lignes, tu apprends :
✔ setTimeout()
✔ Math.random()
✔ Manipulation du DOM
✔ Gestion d’état
✔ Gestion d’événements
✔ Mesure du temps (Date.now())
✔ Logique de jeu
✔ Feedback UI (couleur/texte)
Laisse-moi te dire un secret, bébé :
Ces 30 lignes vont te faire TOMBER AMOUREUX de JavaScript.
