Code source du projet de jeu du plus ou moins

Voir le résultat Retour vers la page du projet

<!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>