🎯 Jeu de Devinette de Nombre en JavaScript

« L’ordinateur choisit un nombre… et toi, tu choisis la logique. » 😅

Dans ce projet, tu apprendras pas à pas :

• Comment JavaScript pense
• Comment il communique avec l’utilisateur
• Comment il gère les erreurs

Et oui… beaucoup d’humour, plein d’astuces et un tas de moments “aha !” 😄

🧠 Qu’allez-vous apprendre dans ce projet ? (De vrais acquis)

✔️ Générer des nombres aléatoires (de la bonne manière)
✔️ Récupérer les entrées utilisateur en toute sécurité
✔️ La logique de jeu (une mini version du state management)
✔️ Afficher des retours en temps réel avec le DOM
✔️ Écouter l’utilisateur grâce aux événements
✔️ Penser : « Je peux aussi utiliser ça en React »

📦 Logique générale du jeu (Penser comme JavaScript)

Commençons par construire le cerveau du jeu :

1️⃣ L’ordinateur choisit un nombre aléatoire entre 1 et 100
2️⃣ L’utilisateur dispose d’un nombre limité d’essais
3️⃣ À chaque tentative :
    Correct → 🎉 victoire
    Faux → un indice est donné
4️⃣ Plus d’essais → 😵 fin du jeu

📌 Règle d’or
Construis la logique avant d’écrire le code.
JavaScript n’est pas un magicien — si tu ne réfléchis pas, lui non plus 😄

🎲 1. Générer un nombre aléatoire (Le cœur du jeu ❤️)

const randomNumber = Math.floor(Math.random() * 100) + 1;

🧠 Que se passe-t-il ici ? (Étape par étape)

Math.random()
👉 Génère un nombre décimal aléatoire entre 0 et 1
Exemple : 0.374829

Math.random() * 100
👉 Donne un nombre entre 0 et 99.999

Math.floor(…)
👉 Supprime la partie décimale
56.87 → 56

+ 1
👉 Décale la plage pour obtenir 1–100 (très important !)

📌 Astuce
Math.floor(Math.random() * max) + min
Ce modèle te servira dans beaucoup de projets.

❤️ 2. Nombre d’essais (La vie du joueur)

let attemptsLeft = 5;

🧠 Cette variable représente :

• L’état du jeu
• Elle diminue à chaque erreur
• À 0, le jeu se termine

« Pas d’essais, pas d’espoir. » 😅

📌 Astuce pratique
Plus tard, tu peux l’utiliser pour :

• Les niveaux de difficulté
• Les paramètres utilisateur

🖥️ 3. Côté HTML (Mise en scène 🎭)

Un HTML minimal mais efficace :

<input type="number" id="guessInput" placeholder="Entrez un nombre entre 1 et 100" />
<button id="guessBtn">Deviner</button>

<p id="message"></p>
<p id="attempts"></p>

🧠 Ici :

• input → communique avec l’utilisateur
• button → déclenche le jeu
• p → affiche les retours

🔗 4. Relier le DOM à JavaScript

const guessInput = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const message = document.getElementById("message");
const attempts = document.getElementById("attempts");

attempts.textContent = `Essais restants : ${attemptsLeft}`;

🧠 Logique :

• HTML → connecté à JS
• JS → contrôle le HTML
• L’utilisateur → profite du spectacle 😄

📌 Astuce pro
Récupère les éléments du DOM au début : code plus propre, dev plus heureux.

🎮 5. Que le jeu commence ! (Event Listener)

guessBtn.addEventListener("click", () => {
  const userGuess = Number(guessInput.value);

🧠 Ici :

• Le bouton est cliqué
• La valeur de l’input est récupérée
• Number() convertit string → number

📌 Pourquoi c’est important
"10" === 10 ❌
Number("10") === 10 ✅

🚧 6. Vérification des entrées invalides (Sauver l’utilisateur)

if (!userGuess) {
  message.textContent = "⚠️ Veuillez entrer un nombre valide !";
  return;
}

🧠 Cela empêche :

• Les champs vides
• 0
• NaN

📌 Leçon de la vraie vie
Ne fais jamais totalement confiance à l’utilisateur 😄
…mais reste poli.

🎯 7. Vérifier la bonne réponse (Moment de victoire 🎉)

if (userGuess === randomNumber) {
  message.textContent = "🎉 Félicitations ! Bonne réponse !";
  guessBtn.disabled = true;
}

🧠 Ici :

• Le jeu est gagné
• Le bouton est désactivé
• L’utilisateur est heureux 😊

📌 Astuce UX
Désactiver les entrées après la victoire améliore l’expérience.

🔽 8. Mauvaise réponse & gestion des essais

else {
  attemptsLeft--;

😬 Oups… mauvaise réponse

• Les essais diminuent
• La tension monte

😵 9. Plus d’essais ? (Game Over)

if (attemptsLeft === 0) {
  message.textContent = `😵 Partie terminée ! Le nombre était : ${randomNumber}`;
  guessBtn.disabled = true;
}

🧠 Ici :

• Le jeu se termine
• Le bon nombre est révélé
• L’utilisateur soupire 😅

🔼🔽 10. Indice Plus Grand / Plus Petit

message.textContent =
  userGuess < randomNumber
    ? "🔼 Essaie un nombre plus grand"
    : "🔽 Essaie un nombre plus petit";

attempts.textContent = `Essais restants : ${attemptsLeft}`;

🧠 Avec l’opérateur ternaire :

• Code plus propre
• Moins de if
• Meilleure lisibilité

📌 Astuce pro
Souvent un bonus lors des entretiens 😉

🧹 11. Nettoyer l’input (Petit mais important)

guessInput.value = "";

🎯 L’utilisateur est prêt pour la prochaine tentative !

🧪 12. Que t’apprend réellement ce projet ?

✔️ L’état d’esprit JavaScript
✔️ La logique de jeu et d’application
✔️ La relation DOM + state + événements
✔️ La conscience « je peux l’intégrer dans un framework »

🚀 13. Idées pour passer au niveau supérieur (Chemin vers la maîtrise)

Tu peux améliorer ce projet avec :

🔁 Bouton restart
🎚️ Niveaux de difficulté
🧠 Historique des tentatives
🎨 Feedback coloré
🔊 Effets sonores
📱 Responsive mobile

🎯 Mot de la fin

Ce jeu est peut-être petit, mais il enseigne une grande leçon :

« JavaScript n’est pas seulement une syntaxe — c’est une façon de penser. » 😄