BRE03

JavaScript Jour 1 : Mini-projet le nombre mystère

Objectif

Utiliser différents concepts vu dans le jour 1 (variables, types, boucle, conditions) pour réaliser un mini jeu.

Consignes

Le but du jeu, c’est de faire deviner un nombre de votre choix (entre 0 et 100) à l’utilisateur.

Vous allez générer un nombre aléatoire entre 0 et 100.

La boucle du jeu dure tant que l’utilisateur n’a pas trouvé le nombre mystère.

Vous allez devoir lui demander de saisir un nombre grâce à window.prompt.

Si le nombre de l’utilisateur est inférieur au vôtre, utilisez window.alert pour lui dire que c’est plus.

Si le nombre de l’utilisateur est supérieur au vôtre, utilisez window.alert pour lui dire que c’est moins.

Si son nombre est égal au vôtre : dites lui qu’il a gagné.

Étape 0

Dans le dossier du repository GitHub bre03-js-j1 créé plus tôt, créez un dossier mini-projet.

Étape 1

Dans le dossier mini-projet créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html :

<!DOCTYPE html>
<html lang="fr">
	<head>
        <meta charset="utf-8" />
		<title>Mini-projet nombre mystère</title>
	</head>
	<body>
		<script type="application/javascript" src="index.js"></script>
	</body>
</html>

Étape 2 : créer les variables

Nous allons commencer par déclarer deux variables :

l’une appelée number va contenir notre nombre aléatoire
l’autre appelée win va stocker le fait que le joueur ou la joueuse ait gagné, par défaut cette variable vaut false.

Créer un nombre aléatoire

Pour générer un nombre aléatoire entre 0 et 100, utilisez la ligne suivante :

let number = Math.floor(Math.random() * 100);

Étape 3 : créer la boucle

Nous allons ensuite créer une boucle qui tourne tant que notre joueur n’a pas gagné.

🚨 Attention pour l’instant ne lancez pas le jeu, il ne peut pas s’arrêter et vous aurez une boucle infinie, je vous redirai dans les consignes quand vous pouvez tester.

Étape 4 : récupérer le nombre du joueur

À chaque tour de notre boucle, nous allons demander au joueur quel nombre entre 0 et 100 il souhaite tester.

Nous allons pour ça utiliser window.prompt que nous avons vu dans le cours et stocker le résultat dans une variable appelée guessTxt.

Nous allons ensuite utiliser la ligne suivante pour transformer la proposition de l’utilisateur qui est une String en Number.

let guess = parseInt(guessTxt);

🚨 Pour le moment, on ne teste pas la boucle est toujours infinie.

Étape 5 : les conditions

À chaque tour de boucle, nous allons comparer guess (la proposition de l’utilisateur) et number notre nombre aléatoire.

Si number est supérieur à guess, utilisez window.alert que nous avons vu en cours pour signaler à l’utilisateur que le nombre mystère est plus grand que sa proposition.

Si number est inférieur à guess, utilisez window.alert que nous avons vu en cours pour signaler à l’utilisateur que le nombre mystère est plus petit que sa proposition.

Si number est égal à guess, la boucle s’arrête et utilisez window.alert que nous avons vu en cours pour signaler à l’utilisateur que c’est gagné.

🚨 Maintenant que la boucle peut s’arrêter, vous pouvez tester.