Après nos deux premiers articles décrivant des scripts relativement simples, nous allons terminer par un jeu dans lequel il faut deviner un nombre compris entre 1 et 1000, choisi au hasard par l’ordinateur. Pour vous aider, chaque fois qu’il vous propose un nombre, le programme vous indique s’il est plus petit ou plus grand que le nombre à trouver. Le but du jeu est de trouver la bonne réponse en un minimum de tentatives.Comme nous avons déjà détaillé dans les articles précédents la plupart des instructions utilisées, les explications que vous trouverez ici concernent soit les nouvelles commandes, soit celles qui sont employées dans un contexte différent.
-> La suite d’instructions située entre et
va créer un formulaire appel jeu sur la page Web.Celui-ci comprendra une zone de saisie (appelée valeur_a_tester), un bouton nommé Essayer qui déclenche la fonction TesteReponse lorsqu’on clique dessus et, enfin, une seconde zone de saisie appelée reponse.C’est dans la zone de saisie appelé valeur_a_tester que les joueurs taperont un nombre, et le programme affichera son verdict dans celle appelée reponse. Pour plus de détails sur les instructions INPUT et FORM, reportez-vous notre précédente partie.A noter : la commande définissant la zone de saisie reponse contient la commande SIZE=100. Le navigateur y reconnaît la taille (size, en anglais) de la zone de saisie (ici, la largeur suffit pour afficher 100 caractères).
nombre=
Math. round(Math.random()*1000+1);
-> Cette ligne de code fonctionne en deux temps. D’abord, le logiciel de navigation va choisir un nombre au hasard compris entre 0 et 0,99999… (fonction Math.random()), le multiplier par 1000 et lui ajouter 1. Le résultat sera un nombre compris entre 1 et 1000,9999999…Ensuite, la fonction Math.round ne garde que la partie entière du nombre résultant. Au final, nombre est un nombre entier compris entre 1 et 1000.
function TesteReponse()
{
var valeur;
valeur=document.jeu.valeur_a_tester.value;
-> La fonction TesteReponse est appelée chaque fois que le joueur clique sur le bouton Essayer. Après avoir rencontré ces instructions, le logiciel de navigation a créé une variable appelée valeur : il y a mis, dans la zone de texte appele valeur_a_tester, ce que le joueur a tapé.Comme nous ne sommes pas sûrs que le joueur ait entré un nombre dans la zone de saisie (il peut avoir tapé autre chose), nous allons commencer par tester le contenu de la variable valeur.
if(isNaN(valeur))
alert( valeur + “n’est pas un nombre !”);
-> isNaN est l’abréviation de is not a number : “n’est pas un nombre”, en anglais. Si le joueur a tapé, par exemple, un caractère alphabétique au lieu d’un nombre, la fonction isNaN renverra la valeur true (vrai, en anglais), ce qui déclenchera l’affichage d’un message composé du texte saisi par l’utilisateur, suivi de “n’est pas un nombre”.
else
{
-> Nous avons vu dans la première partie de notre initiation la fonction des instructions if et else. Il existe, en fait, deux façons de les utiliser. Si elles ne doivent déclencher qu’une seule instruction, il n’est pas nécessaire d’utiliser les accolades. Par exemple :
If (heure<=17)
document.write(“Bonjour”);
else
document.write(“Bonsoir”);
-> Si, au contraire, elles doivent déclencher plusieurs instructions, il faut les placer entre accolades comme suit :
If (condition_a_tester)
{
instruction_if_1;
instruction_if_2;
. . .
}
else
{
instruction_else_1;
instruction_else_2;
. . .
}
-> Ici, la premire instruction qui sera excutée est :
essai = essai + 1;
-> Cette commande ajoute 1 la variable essai, laquelle mémorise le nombre de tentatives effectuées par le joueur.
if(valeur!=nombre)
-> Lorsqu’il rencontre cette instruction, le navigateur va comparer le contenu des variables valeur (la proposition du joueur) et nombre (le nombre choisi par le programme). S’ils sont différents (en JavaScript, ! signifie “non”, != se lit donc “non égal”), on va exécuter les instructions suivantes, placées entre accolades :
if(valeur
else document.jeu.reponse.value = valeur + “est plus grand que le nombre deviner”;
-> Ces commandes vont afficher, dans la zone de saisie appelée reponse du formulaire, le nombre saisi par l’utilisateur (valeur) suivi de la mention “est plus petit que le nombre à deviner” ou “est plus grand que le nombre à deviner”.
document.title = “Déjà” + essai + “essai(s)”;
-> Ensuite, le titre de la fenêtre du navigateur va être modifié : il affichera le nombre de tentatives déjà effectuées par le joueur.Le caractère “.” sert indiquer que l’on s’intéresse au contenu de quelque chose. Ainsi, document. title désigne le titre (title, en anglais) du document en cours, qui est affiché dans la barre de titre du logiciel de navigation.
else
{
document.write(“Bravo, vous avez trouvé, le bon nombre était” + nombre+” !
“);
document.write(“Il vous a fallu” + essai + “essai(s).”);
}
-> Enfin, si le nombre proposé par l’utilisateur est celui choisi par le navigateur (le else de cette suite d’instruction se rapporte if(valeur!=nombre), le programme va afficher un message de victoire et indiquer le nombre de tentatives effectuées par le joueur.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
