Voir le résultat Retour vers la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Jeu du Plus ou Moins</title>
Nous définissons une règle CSS pour l'élément div
qui sert de conteneur
à l'interface utilisateur du jeu : fond bleu pâle, bordure rouge de 1 pixel et espacement
au bord de 10 pixels.
<style>
#fond{
background-color:lightblue;
border:1px solid red;
padding:10px;
}
</style>
</head>
<body>
Quelques explications ...
<h1>Jeu du Plus ou Moins</h1>
<p>Trouvez le nombre mystère compris entre 1 et 1000 !</p>
<p>Faites vos propositions dans le champ de saisie et appuyez sur la touche entrée
ou cliquez sur le bouton "Valider" pour savoir si c'est plus ou si c'est moins.</p>
<p>Quand la partie est terminée vous pouvez rejouer en rechargeant la page.</p>
L'interface utilisateur du jeu est incluse dans un élément div
, elle est constituée
d'une zone de saisie, d'un bouton et d'un élément span
qui sert à afficher les messages.
<div id="fond">
<p>Proposition : <input id="entree" type="text" />
<br/><br/>
<input id="boutonValider" type="button" value="Valider" /></p>
<p>Message : <span id="message"></span></p>
</div>
<script>
Les variables entree
, boutonValider
et message
représentent les éléments de l'interface
utilisateur. Pour les obtenir nous utilisons l'instruction document.getElementById
dont la
valeur passée en paramètre doit correspondre à l'attribut id
de l'élément.
var entree=document.getElementById("entree");
var boutonValider=document.getElementById("boutonValider");
var resultat=document.getElementById("message");
Nous tirons un nombre au hasard entre 1 et 1000.
Pour en savoir plus : [Tirer un nombre au hasard](/programmation-en-javascript/tirer-un-nombre-au-hasard/5)
var hasard=Math.floor(Math.random()*1000)+1;
Cette fonction permet de comparer la valeur passée en paramètre au nombre caché hasard
en
distinguant trois cas :
si hasard
est inférieur à valeur
la fonction retourne -1,
si hasard
est égal à valeur
la fonction retourne 0,
si hasard
est supérieur à valeur
la fonction retourne 1.
function compare(valeur){
var retour=0;
if(valeur>hasard){retour=-1;}
if(valeur<hasard){retour=1;}
return retour;
}
Nous avons ici deux gestionnaires d'événements, c'est à dire que les instructions qui figurent dans les fonctions sont exécutées dès que l'événement précisé se produit.
clic sur le bouton de validation : la fonction afficheMessage
est appelée et on redonne le
curseur d'entrée à la zone de saisie (lorsque l'utilisateur clique sur le bouton, la zone
de saisie perd le curseur).
appui sur une touche depuis la zone d'entrée : tout d'abord la zone d'affiche du message est
vidée pour que l'utilisateur ne soit pas distrait par l'ancien message alors qu'il saisit une nouvelle proposition. Dans le cas où l'utilisateur appuie sur la touche "entrée" la fonction
afficheMessage
est également appelée (comme si il avait appuyé sur le bouton).
boutonValider.onclick=function(){
afficheMessage();
entree.focus();
}
entree.onkeypress=function(event){
resultat.innerHTML="";
if(event.keyCode==13){
afficheMessage();
}
}
Cette fonction contient la logique d'affichage du message suite à la proposition du joueur.
function afficheMessage(){
Nous récupérons le texte entré par l'utilisateur et nous le convertissons en nombre entier.
Dans le cas où le joueur n'a pas entré un nombre, la fonction parseInt
retourne NaN
: Not
a Number, dans ce cas cette "erreur" de saisie est signalée au joueur.
var proposition=parseInt(entree.value);
var nouveauMessage="";
if(isNaN(proposition)){
nouveauMessage="Erreur de saisie";
}else{
Lorsque le joueur a bien entré un nombre entier il reste à le comparer au nombre caché,
pour cela nous appelons la fonction compare
et la variable nouveauMessage
reçoit le
message adéquat.
Nous utilisons ici une structure switch
qui permet de traiter plusieurs alternatives.
switch(compare(proposition)){
case -1:
nouveauMessage="C'est moins";
break;
case 0:
nouveauMessage="Bravo !";
break;
case 1:
nouveauMessage="C'est plus";
break;
}
}
Effet sur l'interface utilisateur : la zone d'entrée est vidée et le message est affiché.
entree.value="";
resultat.innerHTML=nouveauMessage;
}
Nous faisons en sorte que la zone de saisie ait le curseur dès que la page HTML est chargée, ce qui permet au joueur de saisir directement sa première proposition.
entree.focus();
</script>
</body>
</html>