instructions.adoc

But de l’exercice

Nous allons créer un jeu simple en utilisant HTML et JavaScript. Si tu suis toutes les étapes à la fin tu devrais avoir une page qui ressemble à

Le but est de trouver le nombre que le programme aura aléatoirement choisi entre 1 et 1000. Si jamais tu renseignes un nombre trop petit et que tu cliques sur Jouer, le programme affichera un message "C’est plus".

Si le nombre est trop petit le message sera "C’est moins". Le nombre de coup sera compté et le but est de trouver la solution en moins de coup possible. Bien évidemment si le bon nombre est trouvé on indiquera au joueur qu’il a gagné

A toi de jouer

Etape 1 : Utiliser jsfiddle

Pour créer ce jeu tu vas te baser sur Jsfiddle. Si tu ne sais pas ce que c’est ou comment ça marche, c’est simple tu peux suivre ces instructions.

Etape 2 : Création du HTML

Nous allons commencer par créer le formulaire de saisie

Tes premières lignes de HTML

1. Tu peux effacer tout ce que tu as fait dans la première partie et nous allons commencer par créer le titre Nombre aléatoire. En HTML le titre se met entre des balise <h1>. Par exemple <h1>Nombre aléatoire</h1>. Si tu veux définir un sous titre tu peux utiliser la balise <h2>, un sous-sous titre la balise <h3>…​

2. Quand tu veux écrire du texte tu dois le mettre entre les balises <p> et </p>. Si tu veux mettre en gras du texte ce sont les balises <b> et </b>, pour la mise en italique c’est <i> et </i>, pour souligner c’est <u> et </u>. A toi de jouer essaye de créer le résultat suivant

Ajouter un champ de saisi et des boutons

L’ajout d’un champ de formulaire se fait en utilisant la balise <input>. Cette balise est un peu particulière car tu n’as pas besoin de préciser de balise fermante </input>. En HTML tu as 3 balises comme celle ci que tu n’as pas besoin de fermer : <input>, <br> (qui permet d’aller à la ligne) et <hr> (qui permet de tracer un trai de séparation)

1. Tu peux donc créer ton premier champ en tapant <input type="number" placeholder="Saisissez un nombre"/>. Comme tu peux le voir on peut ajouter des propriétés à une balise. Dans cet exemple nous avons 2

   • type qui permet de saisir le type de champ. Tu peux avoir date, text, email, month, tel, color…​

   • placeholder qui permet d’ajouter une aide en grisé quand le champ est vide. Par exemple ici on affiche un message pour saisir un nombre

2. Place ce champ dans ta page dans jsfiddle

3. Un bouton se définit en utilisant les balises <button> et </button>. Tu peux définir un bouton Jouer et un bouton Recommencer

Ton formulaire doit ressembler à ça

Si on mettait un coup de peinture

Ce n’est pas obligatoire mais tu peux rendre ce que tu as fait plus joli en ajoutant des styles dans la zone CSS. Tu eux copier et coller les lignes ci dessous dans la zone CSS

/* on change la police d'écriture et la couleur */
html {
  font-family: Arial;
  color: #495057;
}

/**
 * Permet d'avoir des boutons un peu plus joli que le standart
 */
button {
  cursor: pointer;
  border-radius: 4px;
  font-weight: 400;
  padding: 0.5em;
  line-height: 1.5;
  border: 1px solid #aaaaaa;
}

/**
 * Redéfini les champs de saisie
 */
input {
  display: block;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  margin-bottom: 0.5em;
}

Après ce coup de peinture en utilisant des styles ta page doit ressembler à

Etape 3 : Utiliser JavaScript pour rendre les choses dynamiques

Pour le moment il ne se passe rien quand on clique sur le bouton jouer. On va utiliser du JavaScript pour donner de la vie à cette page et la rendre plus dynamique

Mes premiers pas en Javascript

1. Avant de commencer comme tu es maintenant un vrai développeur Web qui fait du HTML, du CSS et maintenant du JavaScript, nous allons ouvrir la console développeur. Pour celà tape en même temps sur les touches . Une fenêtre doit apparaître en bas du navigateur. C’est la console des développeurs

2. Tu peux écrire maintenant dans la zone JsFiddle réservée à JavaScript l’instruction console.log('Bonjour tout le monde')

3. Une fois que c’est fait clique sur le bouton . Normalement tu dois voir le message Bonjour tout le monde dans la console

Définir une variable

Nous allons essayer d’aller plus loin

1. Crée une variable qui se nomme nom et qui aura la valeur 'Mixteen'. Tu peux modifier l’instruction précédente console.log('Bonjour tout le monde') pour qu’elle affiche maintenant la valeur de ta variable et le message 'Bonjour MixTeen'

2. N’oublie pas de sauvegarder régulièrement ton travail en appuyant sur le bouton

3. Crée une deuxième variable qui se nomme nombreAleatoire et qui va prendre pour le moment une valeur fixe. Par exemple 586. Utilise l’instruction console.log pour afficher le message 'Le nombre aléaoire est 586' (586 étant la valeur de cette nouvelle variable)

4. Tu peux créer une dernière valeur qui va se nommer nombreSaisi. Cette variable sera liée plus tard au champ de saisie que tu as mis dans ta page HTML. Tu peux pour le moment attribuer la valeur 450 et afficher le message 'Le nombre saisi est 450'

Une fois que tu as terminé tu dois voir affiché dans la console développeur

Utiliser des conditions

Il est temps d’utiliser des conditions pour savoir si le nombre saisi est trop petit, trop grand ou exact

Ecrit une condition avec les mots clés if et else qui traduisent

    SI nombreSaisi EGAL A nombreAleatoire ALORS
        j'affiche dans la console le message 'Tu as gagné'
    SINON SI nombreSaisi INFERIEUR A nombreAleatoire ALORS
        j'affiche dans la console le message 'C'est plus'
    SINON
        j'affiche dans la console le message 'C'est moins'

1. Tu peux exécuter le code en cliquant sur . Si tu as respecté les instructions de l’étape précédente tu devrais voir le message C’est plus

2. Change la valeur de la variable nombreSaisi, et indique 800. Si tu recliques sur le bouton d’exécution tu devrais le message C’est moins

3. Change la valeur de la variable nombreSaisi, et indique 586. Si tu recliques sur le bouton d’exécution tu devrais le message Tu as gagné

Utiliser les fonctions

Déplace les conditions que tu as écrites précédemment dans une fonction que tu peux appeler verifierResultat. Cette fonction acceptera un paramètre qui est le nombre saisi

function verifierResultat(nombreSaisi){
    // conditions...
}

Ecrit 3 appels de cette fonction

verifierResultat(450);
verifierResultat(800);
verifierResultat(586);

Quand tu exécutes le code en cliquant sur tu dois voir dans l’ordre les messages suivants dans la console:

• C’est plus

• C’est moins

• Tu as gagné

Préparer ta page HTML pour qu’elle utilise du JavaScript

Tu vas pouvoir commencer par ajouter des identifiants (propriété id) à chaque élément du document HTML que nous allons manipuler dans notre code JavaScript

• <p id="message">Saisissez un nombre</p>

• <p id="nombreCoups">Nombre de coups: 0</p>

• <input type="number" id="nombreSaisi" placeholder="Saisissez un nombre"/>

Pour les boutons on va indiquer le nom de la fonction que l’on va appeler quand on clique dessus

• <button onclick="jouer()"/>Jouer</button>

• <button onclick="recommencer()"/>Recommencer</button>

Ecrire les fonctions JavaScript liées aux événements

Dans la partie d’avant nous avons ajouté des identifiants sur les zones de la page que nous voulons lire (champ nombre) ou écrire (le message et le score)

Ecris la fonction jouer(). Cette fonction

• commence par lire le nombre saisi dans la page via l’instruction document.getElementById('nombreSaisi').value en la plaçant dans une variable nommée nombreSaisi

• appelle la fonction verifierResultat(nombreSaisi)

• toutes les valeurs lues dans les champs input sont considérées comme des chaines de caractères, du texte. Il faut convertir cette valeur en numérique via la fonction parseInt

  let nombreSaisi = 0;
  if(document.getElementById('nombreSaisi').value){
    nombreSaisi = 	parseInt(document.getElementById('nombreSaisi').value);
  }

A cette étape du jeu tu peux déjà utiliser le champ de saisi pour tester si le nombre saisi s’approche de la solution

Tu peux maintenant écrire la fonction recommencer(). Cette fonction peut simplement lancer l’instruction document.location.reload() qui recharge la page comme tu aurais pu le faire en utilisant le bouton du navigateur

Introduire un peu d’aléas

Pour le moment nous avons fixé le nombre à trouver à 586. Pour générer un nombre alétoire en JavaScript on peut utiliser une des fonctions de l’objet Math qui fournit plusieurs utilitaire en JavaScript pour faire des calculs avancés

parseInt(Math.random() * 1000 + 1) permet de générer un nombre entre 1 et 1000. En fait Math.random() génère un nombre flottant entre 0 et 1. Par exemple 0.586544333. C’est pourquoi on le multplie par 1000 et on utilise la fonction parseInt pour l’arrondir

C’est à toi tu peux maintenant modifier ton programme

Afficher des messages

Pour le moment les message s’affichent dans la console. De plus nous n’avons pas gérer le score..

1. Tu peux commencer par modifier la fonction verifierResultat(nombreSaisi) et écrire le message dans la zone qui a l’id message. Tu peux utiliser document.getElementById('message') pour faire référence à la zone et utiliser innerHTML pour changer le contenu de la balise document.getElementById('message').innerHTML = 'Nouveau message';

2. Maintenant tu vas pouvoir gérer par toi même l’ajout du score

   • déclare une variable score en haut de ton script et initialise la valeur à 0

   • à chaque fois que tu entres dans ta fonction verifierResultat(nombreSaisi) tu peux ajouter un à cette variable

   • à la fin de cette méthode du peux mettre à jour la zone ayant l’id nombreCoups dans la page via les méthodes déjà utilisées plus haut

A cette étape tu dois maintenant avoir un résultat similaire à ce qu’il y a dans cette page https://jsfiddle.net/e4wxxoyc/2/