Pendu

01h00
Débutant
Moteur
Javascript
Manipulation du texte
Bases du langage Javascript

Présentation

Le pendu est un jeu consistant à trouver un mot ou une phrase en devinant quelles sont les lettres qui le composent. Le jeu se joue traditionnellement à deux, avec un papier et un crayon, selon un déroulement bien particulier.

Les deux joueurs dans cet exemple s’appellent A et B.

A pense à un mot et dessine une rangée de tirets, chacun correspondant à une lettre de ce mot.
B annonce une lettre.

La lettre fait-elle partie du mot ?
Oui : A l’inscrit à sa place autant de fois qu’elle se trouve dans le mot.
Non : A dessine le premier trait du pendu.

Le jeu se poursuit jusqu’à ce que :

B gagne la partie en trouvant toutes les lettres du mot ou en le devinant correctement.
A gagne la partie en complétant le dessin du pendu.

Un jeu vraiment très simple à la fois dans sa version classique et dans sa version informatique. Cependant il va nous permettre d’aborder une notion parfois bien utile, la gestion du texte.

Le code Javascript

// variables
var canvas, ctx, texte, phrase, erreur, infos, images, touche, lettre, longueur;	
var W = 480;
var H = 480;
 
// préparation du jeu
window.onload = function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
	canvas.width = W;
	canvas.height = H;
	loadImages(5);
}
 
// chargement des images
function loadImages(nbImg){
	images = [];
	for(var i=1; i<nbImg+1; i++){
		var b = new Image();
		b.src = "assets/phase"+i+".jpg";
		b.onload = function() {
			images.push(this);
			if(--nbImg==0) init();
		};
	}
}
 
// initialisation du jeu
function init() {
	erreur = 		0;
	phrase = 		"Vous jouez au pendu sur le Wiki de Mediabox"
	infos = 		phrase.replace(/[A-Za-z]/g,"_");
	longueur = 		phrase.length;
	texte = 		infos;
	render();
	canvas.setAttribute('tabindex','1');
	canvas.focus();
	canvas.addEventListener("keydown", appuie, false);
}
 
// gestion phrase
function appuie(e){	
	touche = (String.fromCharCode(e.keyCode)).toLowerCase();
	lettre = false;	
	for (var i=0; i<longueur; i++)	{
		if (phrase.charAt(i).toLowerCase() == touche){
			infos = infos.substr(0,i)+phrase.substr(i,1)+infos.substr(i+1);
			lettre = true;
		}
	}
	texte = infos;
	if (!lettre) ++erreur;
	render();
	if (erreur>4) finPartie("Perdu, cliquez pour rejouer.");
	for (var j=0; j<longueur; j++)	{
		if (infos.charAt(j) == "_")	return;
	}
	finPartie("Bravo, cliquez pour rejouer.");
}
 
// fin de la partie
function finPartie(message){
	alert(message);
	init();
}
 
// Dessine le jeu
function render() {	
	ctx.fillStyle = "rgb(256,256,256)";
	ctx.fillRect(0, 0, W, H);
	if(erreur>0) ctx.drawImage(images[erreur-1],0,0);
	ctx.fillStyle = "black";
	ctx.font = "16px Arial";
	ctx.textAlign = "center";
	ctx.fillText(infos, W/2, H-30);
}

A retenir

C’est court et il n’y a pas grand chose à manger là dedans, mais ça devrait vous permettre de commencer à manipuler le texte au sein de vos jeux.

Laisser un commentaire

Facebook Google Linked Skype Twitter
© 2024 Cmarzin - Tous droits réservés | Mentions légales