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);
}
