Pendu

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.

Wikipedia Mediabox

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