[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> Javascript
> Lecture du tutoriel
TD : Jeu du "Plus ou moins"
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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"
).
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.
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
En JS, il n'existe pas de fonction "simple" donnant un nombre entier aléatoire, il faut la créer.
Vous apprendrez cela d'ici quelques chapitres, il vous manque quelques notions pour l'instant.
Je vais donc vous donner la fonction.
Code : JavaScript1
2
3
4
5 | 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é :
Code : JavaScript1
2 | 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
.
Premier message
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
).
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.
Pour rappel, la principale différence entre ces deux boucles vient du fait que l'action est exécutée avant la condition dans le cas de do... while.
Avec while, la condition est d'abord évaluée, et ensuite seulement on exécute l'action.
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) :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | 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 !");
|
N'oubliez pas de déclarer la fonction nb_aleatoire (que je vous ai donnée plus haut) dans l'en-tête de la page.
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).
Mettons-nous d'accord sur le vocabulaire...
On va dire que le script qu'on a créé nous fait jouer une manche du jeu "Plus ou moins" (que j'abrégerai en "PoM").
Lorsqu'on joue plusieurs manches (c'est l'objet de cette amélioration), on va appeler ça une partie de PoM.
Ce que vous devez faire
La première modification (d'une
difficulté facilité sans précédent
) 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.
Fin d'une manche
Fin de partieRé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).
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | 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.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | 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.");
|
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.
L'utilisation de return au milieu d'une fonction, tout comme break dans une boucle, est à éviter.
Toutefois, nous avons estimé qu'elle était justifiée dans ce cas : le but du bouton "Annuler" est d'arrêter immédiatement ce qui se passe, d'où une telle utilisation.
Une manière de l'éviter est d'utiliser une variable booléenne, comme la variable "continuer" dans l'amélioration 1.
Le code est alors un peu plus "lourd", mais mieux organisé (l'arrêt de la boucle se fait par la condition, et non pas par du code contenu quelque part dans la boucle).
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 :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 | 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 :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 | 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;
}
|
Pour ceux qui le désirent, voici le code final de la page.
Il y a donc 3 liens, correspondant à 3 niveaux de difficulté.
C'est bien le code XHTML d'une page complète.
Il est indiqué "Code : JavaScript" uniquement pour la coloration syntaxique.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83 | <!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é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.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
68 Zéros connectés |
9 requêtes |
0.067s (0.0557s)
