• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

TD : Jeu du "Plus ou moins"

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Plus que quelques chapitres avant de clore cette première partie, qui traite des bases du JavaScript. Il est maintenant temps de mettre en pratique ce que vous avez appris jusqu'ici : ce chapitre va vous y aider.

Au programme, la création du jeu "Plus ou moins", que vous connaissez sûrement si vous avez déjà lu d'autres tutos sur ce site (c'est l'étape juste après le "hello world" :D ).

Présentation des TD

Pourquoi des TD ?

Avant de nous lancer dans le sujet, donnons quelques explications à propos des TD (Travaux Dirigés).
Ces chapitres ont pour but de vous faire pratiquer le JS : c'est de cette manière que vous retiendrez le mieux ce que vous avez appris, et c'est également de cette façon que vous vous rendrez compte des points "sensibles" auxquels il faudra faire particulièrement attention.

Je vous conseille donc de consacrer un peu de temps à ces TD, surtout s'ils concernent des notions que vous ne maîtrisez pas très bien. Ils sont, à mon avis, tout aussi importants que les autres chapitres.

Comment ça se passe ?

Le déroulement des TD devrait ressembler à ceci :

  • présentation de l'exercice et des consignes

  • des explications détaillées sur la manière d'aborder le problème et de le résoudre

  • une correction

  • les idées d'améliorations, avec éventuellement une "correction" pour certaines d'entre elles.
    (Si vous réalisez des améliorations, n'hésitez pas à les poster sur le forum, et à nous envoyer le lien par MP.)

Notez que c'est un plan général, qui variera plus ou moins d'un TD à l'autre.

Les consignes

Le jeu

Passons sans plus attendre au sujet de ce TD. Comme je vous l'ai dit dans l'introduction, il s'agit du jeu "Plus ou moins".
Le principe est simple : l'ordinateur choisit un nombre au hasard, plus petit ou égal à 100.
Le but est de deviner ce nombre. À chaque fois qu'on propose un nombre, on indique si le nombre à deviner est plus petit ou plus grand que celui-ci.

Les consignes

Le jeu se déroule donc ainsi :

  • choix d'un nombre aléatoire

  • on demande des nombres, et on indique si le nombre à trouver est plus grand ou plus petit que ceux proposés

  • quand l'utilisateur a gagné, on affiche le nombre de coups qu'il lui a fallu.

Pour l'instant, on place le code directement dans le code de la page, sans créer de fonction.

Quelques précisions concernant chacune des étapes décrites ci-dessus...

Choix d'un nombre aléatoire
function nb_aleatoire(min, max)
{
     var nb = min + (max-min+1)*Math.random();
     return Math.floor(nb);
}

(Pour rappel, une déclaration de fonction se place dans l'en-tête de la page web.)

Cette fonction renvoie un nombre entier choisi aléatoirement entre min et max (inclus).
Un exemple d'utilisation pour simuler un lancé de dé :

var de = nb_aleatoire(1, 6);
alert("Vous lancez un dé et obtenez " + de);
Demander des nombres et afficher "Plus" ou "Moins"

La seconde étape consiste à demander des nombres, et à afficher à chaque fois si le nombre à deviner est plus grand (plus) ou plus petit (moins), jusqu'à ce que l'utilisateur ait trouvé le bon nombre.

Au passage, on compte combien il lui faut d'essais avant de gagner.

On ne va utiliser que des prompt, pour éviter que l'utilisateur ne clique 50 fois sur "OK" à chaque partie :p .

Image utilisateur

Premier message

Image utilisateur

Message suivant, après avoir entré un nombre

Pour l'instant, on se contente d'ignorer le bouton "Annuler".

Fin de la partie

On affiche un message annonçant à l'utilisateur qu'il a gagné (c'est quand même la moindre des choses ^^ ), en lui indiquant combien de coups il lui a fallu.

À vous !

C'est tout pour les consignes, il ne reste plus qu'à coder tout ça :) .

Avant de vous jeter sur votre clavier, réfléchissez donc à la manière dont vous allez créer votre script (quelle boucle utiliser, etc.) ; et si vous bloquez, n'hésitez pas à lire la suite (les explications, pas la correction :p ).

Correction

Avant de vous donner une correction, expliquons comment procéder pour réaliser ce script.

Par où commencer ?

Structure du script

Première question à se poser :
à quoi va ressembler notre script ?

Ici, pas besoin de créer de fonctions, l'énoncé précise que le code sera placé directement dans le corps de la page.

Reste à savoir quelle structure utiliser.
Vu les étapes, ce sera quelque chose comme ceci :

  • une initialisation (principalement la déclaration des variables)

  • une boucle (pour demander les valeurs et afficher les messages)

  • quelques instructions pour afficher le résultat.

La boucle

Il va nous falloir choisir quel type de boucle utiliser.
On peut d'ores et déjà éliminer la boucle for : la condition de la boucle ne porte pas sur un compteur, mais sur les nombres qu'on demande à l'utilisateur.

Il nous reste while et do... while.

Dans notre cas, on va demander un nombre à chaque tour de boucle.
La condition portera justement sur ce nombre (est-ce qu'il est égal au nombre cherché ?).
Il est donc plus judicieux d'utiliser do... while, car il faut demander le nombre avant de vérifier la condition.

Les variables

Essayons de recenser les variables que nous allons devoir utiliser.

Ce qu'on peut déjà affirmer, c'est qu'il nous faudra :

  • une variable qui contiendra le nombre à deviner : appelons-la nb

  • une variable pour compter le nombre de coups, qu'on appellera cpt

  • une pour enregistrer le nombre saisi par l'utilisateur (il faudra faire des tests dessus), qu'on va appeler saisie.

De plus, lorsqu'on demandera un nombre à l'utilisateur, le message à afficher dépendra du nombre qu'il a saisi avant.
On va donc créer une variable, nommée msg qui contiendra le message qu'il faudra afficher la prochaine fois qu'on demandera un nombre.

Correction

À partir du travail fait ci-dessus, ce n'est pas trop dur d'écrire le script.
Voici ce que ça donne (il faut donc placer ce code dans le corps de la page) :

var nb = nb_aleatoire(1, 100);  // nb a deviner
var cpt = 0;    // nb de coups
var saisie;
var msg = 'Le nombre à deviner est compris entre 1 et 100.';

do
{
     saisie = prompt(msg);
     cpt++;
     // message a afficher au prochain tour :
     if(saisie > nb)
          msg = "C'est moins";
     else
          msg = "C'est plus";
}
while(saisie != nb);

alert("Bravo, tu as gagne en " + cpt + " coups !");

Amélioration 1 : jouer plusieurs fois de suite

But de cette amélioration

Petite présentation

Notre script, qui permet de jouer une partie de "Plus ou moins", est maintenant fonctionnel.

L'amélioration que je vous propose de réaliser va permettre de jouer plusieurs parties à la suite, en affichant, une fois le jeu terminé, votre meilleur score (votre plus petit nombre de tentatives).

Ce que vous devez faire

La première modification (d'une difficulté facilité sans précédent :p ) va consister à créer une fonction (on va l'appeler PoM_manche), qui jouera une manche de PoM, et qui renverra le score (au lieu de l'afficher). C'est donc, à quelques modifications près, le code que vous avez réalisé.
Pour plus de possibilités par la suite, on va donner deux paramètres, mini et maxi, à cette fonction, et le nombre qu'il faudra deviner sera compris entre ces deux valeurs (incluses).

Ensuite, on va jouer plusieurs manches, en demandant à la fin de chacune si l'utilisateur souhaite rejouer.
Une fois la partie terminée, on affichera le nombre de manches jouées et le meilleur score.

Image utilisateur

Fin d'une manche

Image utilisateur

Fin de partie

Réalisation du script

Structure

Notre programme va donc avoir une structure semblable à la précédente : il sera basé sur une boucle. Cette boucle sera encore une fois do... while, car la condition ("Rejouer ?") vient après la manche jouée.

Concernant les variables, on a :

  • une variable cpt pour compter le nombre de manches

  • une variable best_score pour enregistrer le meilleur score (on l'initialisera à 0)

  • une variable score, qui contiendra le score de la dernière manche (on va devoir le comparer au meilleur score, il faut donc le stocker dans une variable).

Création de la fonction

PoM_manche

Les quelques modifications :

  • ne plus appeler alert, mais utiliser return pour renvoyer le nombre de coups

  • ne plus utiliser 1 et 100 pour le choix du nombre, mais mini et maxi (penser aussi à modifier le premier message).

function PoM_manche(min, max)
{
     var nb = nb_aleatoire(min, max);
     var cpt = 0;
     var saisie;
     var msg = 'Le nombre a deviner est compris entre ' + min + ' et ' + max + '.';

     do
     {
          saisie = prompt(msg);
          cpt++;
          if(saisie > nb)
               msg = "C'est moins";
          else
               msg = "C'est plus";
     }
     while(saisie != nb);

     return cpt;
}
Code pour jouer plusieurs parties

Les remarques ont été faites plus haut.

var cpt = 0;   // nb de manches jouees
var best_score = 0;  // meilleur score
var score;  // score de la partie en cours

do
{
     score = PoM_manche(1, 100);
     cpt++;
     if(score < best_score || best_score == 0)
          best_score = score;
     continuer = confirm("Bravo, tu as gagne en " + score + " coups.\nVeux-tu rejouer ?");
}
while(continuer);

// affichage du meilleur score
alert("Tu as joue " + cpt + " manche(s).\nTon meilleur score est de " + best_score + " coups.");

Amélioration 2 : quelques finitions

But de l'amélioration

Il s'agit de corriger certains détails :

  • on va créer une fonction, PoM_partie, qui jouera une partie de PoM (à partir du code de l'amélioration 1). Elle retournera le meilleur score (en plus de l'afficher).

  • On précisera à cette fonction (en argument) les valeurs entre lesquelles choisir le nombre aléatoire.

  • On va prendre en compte le bouton "Annuler" lorsqu'on demande de saisir un nombre : il arrête la manche en cours, affiche le meilleur score des autres manches, et quitte la partie.

L'avantage des deux premiers points est que l'on pourra lancer le jeu à partir d'un lien sur la page, et qu'on pourra proposer plusieurs niveaux de difficulté (en prenant un nombre compris entre 1 et 250, par exemple).

Réalisation

Manière de procéder

Concernant la création de la fonction, pas de difficulté.

En ce qui concerne le bouton "Annuler", il y a plus de choses à dire.
La fonction qui est la première concernée est PoM_manche (c'est elle qui demande les nombres). Lorsqu'on cliquera sur "Annuler", on va immédiatement renvoyer 0, grâce à return.

Revenons à nos moutons : la fonction PoM_manche va donc renvoyer 0 quand on annule la partie.
Dans ce cas, on ne demande pas à l'utilisateur s'il veut continuer (puisqu'il a annulé ^^ ), mais on va régler la variable continuer à false (ce qui aura le même effet que si on lui avait demandé et qu'il avait refusé).

Script

Voici donc la fonction PoM_manche :

function PoM_manche(min, max)
{
     var nb = nb_aleatoire(min, max);        // nb a deviner
     var cpt = 0;    // nb de coups pour le trouver
     var saisie;     // nb tape par le joueur
     var msg = 'Le nombre a deviner est compris entre ' + min + ' et ' + max + '.';

     do
     {
          saisie = prompt(msg);

          // si "Annuler"
          if(saisie == null)
               return 0;

          cpt++;
          if(saisie > nb)
               msg = "C'est moins";
          else
               msg = "C'est plus";
     }
     while(saisie != nb);

     return cpt;
}

... et PoM_partie :

function PoM_partie(min, max)
{
     var cpt = 0;    // nb de manches jouees
     var best_score = 0;     // meilleur score
     var score;      // score de la partie en cours
     var continuer;

     do
     {
          score = PoM_manche(min, max);   // joue la manche
          if(score)
          {
               cpt++;
               if(score < best_score || best_score == 0)
                    best_score = score;
               continuer = confirm("Bravo, tu as gagne en " + score + " coups.\nVeux-tu rejouer ?");
          }
          else
               continuer = false;
     }
     while(continuer);

     alert("Tu as joue " + cpt + " manche(s).\nTon meilleur score est de " + best_score + " coups.");
     return best_score;
}

Code final

Pour ceux qui le désirent, voici le code final de la page.
Il y a donc 3 liens, correspondant à 3 niveaux de difficulté.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     <head>
          <title>TD : Jeu du "plus ou moins"</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


          <script type="text/javascript">
          <!--

          function nb_aleatoire(min, max)
          {
               var nb = min + (max-min+1)*Math.random();
               return Math.floor(nb);
          }
                
          function PoM_manche(min, max)
          {
               var nb = nb_aleatoire(min, max);        // nb a deviner
               var cpt = 0;    // nb de coups pour le trouver
               var saisie;     // nb tape par le joueur
               var msg = 'Le nombre a deviner est compris entre ' + min + ' et ' + max + '.';

               do
               {
                    saisie = prompt(msg);

                    // si "Annuler"
                    if(saisie == null)
                         return 0;

                    cpt++;
                    if(saisie > nb)
                         msg = "C'est moins";
                    else
                         msg = "C'est plus";
               }
               while(saisie != nb);

               return cpt;
          }
                
          function PoM_partie(min, max)
          {
               var cpt = 0;    // nb de manches jouees
               var best_score = 0;     // meilleur score
               var score;      // score de la partie en cours
               var continuer;

               do
               {
                    score = PoM_manche(min, max);   // joue la manche
                    if(score)
                    {
                         cpt++;
                         if(score < best_score || best_score == 0)
                              best_score = score;
                         continuer = confirm("Bravo, tu as gagne en " + score + " coups.\nVeux-tu rejouer ?");
                    }
                    else
                         continuer = false;
               }
               while(continuer);

               alert("Tu as joue " + cpt + " manche(s).\nTon meilleur score est de " + best_score + " coups.");
               return best_score;
          }

          //-->
          </script>


     </head>
     <body>
        
          <p>
               <a href="#" onclick="javascript:PoM_partie(1,63)">Niveau Z&eacute;r0</a><br />
               <a href="#" onclick="javascript:PoM_partie(1,100)">Niveau Normal</a><br />
               <a href="#" onclick="javascript:PoM_partie(0,250)">Niveau Geek</a>
          </p>
                
     </body>
</html>

Et voilà, le premier TD est terminé :) .

Si vous l'avez réussi tout seuls, félicitations : vous avez acquis les bases, ce qui vous permettra sans doute d'être à l'aise pour la suite.
Sinon, ne paniquez pas : l'essentiel est de comprendre le raisonnement, la correction est là pour vous guider et vous faire comprendre. Ceci dit, si vous êtes dans ce cas, il serait bien (pour vous faciliter la chose par la suite) que vous réalisiez les exemples des chapitres précédents : on retient mieux ainsi qu'en lisant simplement un tuto.

Exemple de certificat de réussite
Exemple de certificat de réussite