Exercice noté réalisé lors de la semaine sur Javascript pendant nos cours à Campus Academy.
Nous devions réaliser le jeu du pendu grâce à Javascript. Les consignes étaient de choisir un mot aléatoirement contenue dans un dictionnaire, d'utiliser la méthode addEventListener() afin d'utiliser le clavier pour la saisie des lettres pour le fonctionnement du jeu et de séparer les fichiers CSS et JS du HTML.
Excercice réalisé : (Cliquez dans la fenêtre ci-dessous et appuyer sur les touches du clavier pour jouer)
Consignes reçues :
Script JS :
var motSecret;
var tableauMot = new Array(); // Le tableau qui contient les lettres du mot à trouver
var mots = new Array(); // Le tableau qui contient tous les mots possibles
var lettreClavier = new Array(); // Le tableau qui va contenir les lettres entrer au clavier
var tailleMot; // Le nombre de lettres du mot à trouver
var erreur = 0; // Le nombre de lettres fausses essayées
var lettresTrouvees = 0; // Le nombre de lettres trouvées
var fini = false; // true si le jeu est terminé
var nbLettreClavier = 0; // Nombre de lettre entrer avec le clavier
var lettreNonTrouvee = false; // Booleen qui sera sur 1 quand si une lettre a déjà été rentrer
var lettreFausse =""; // La variable contient les lettres fausse
var msg = ""; // Message d'alerte
mots = ["chenille","lucarne","horloge","loup","paysan","squelette","voleur","jacques","angers","poste","triste","frissons","pirate","corps","olympique","orange","erreur","parfumerie","dossier","soulever","dessin","crayon","robinet","ananas","scientifique","abeille","planeur","collectionneur","farine","pie","hormones","annoncer","echarpe","bouton","cerveau","porte","poisson","naviguer","arbre","table","froid","antibiotiques","poitiers","paris","nantes","chantez","tribunal","gramme","singulier"];
// On prend un mot au hasard
motSecret = mots[Math.floor(Math.random() * mots.length)]
// On compte le nombre de lettre dans le mot
tailleMot = motSecret.length;
// fonction principal qui gère le jeu du pendu
function proposer(element){
// On récupère la lettre
var lettre = element;
// On récupère l'ID msg de la page HTML
var msgID = document.getElementById("msg");
// On fait une boucle en fonction du nombre de lettre déjà entrer au clavier
for(var j = 0; j <= nbLettreClavier; j++) {
// On vérifie si la lettre est déjà contenu dans le tableau des lettre déjà entrer au clavier
if(lettreClavier[j] == lettre) {
msg = "Lettre déjà entrée";
document.getElementById("msg").innerHTML = msg;
msgID.style.opacity = 1;
setTimeout(blocMsg, 3000);
lettreNonTrouvee = true;
return
// Sinon tous est ok en passe la variable lettreNonTrouvee sur false
} else {
lettreNonTrouvee = false;
}
}
// Si la lettre n'a pas déjà été entrer et que le jeu n'est pas terminé en rentre dans le IF
if (lettreNonTrouvee == false && fini == false) {
lettreClavier.push(lettre);
nbLettreClavier++;
// On met la variable trouve à false
var trouve = false;
// On parcours chaque lettre du mot
for(var i = 0; i < tailleMot; i++) {
// On cherche si la lettre entrer sur le clavier correspond
if(tableauMot[i].innerHTML == lettre) {
tableauMot[i].style.visibility = 'visible';
trouve = true;
lettresTrouvees++;
}
}
// Si la lettre n'est pas présente, trouvé vaut toujours false
if(trouve == false){
erreur++;
document.images['pendu'].src="images/pendu"+erreur+".png";
lettreFausse = lettreFausse+" "+lettre;
document.getElementById("lettreFausse").innerHTML = lettreFausse;
// Si il y a 7 erreurs on elève le mot, et le jeu est terminé
if(erreur == 7){
msg = "Vous avez perdu !";
document.getElementById("msg").innerHTML = msg;
msgID.style.opacity = 1;
for(var i = 0; i < tailleMot; i++) tableauMot[i].style.visibility = 'hidden';
fini = true;
}
}
// Si le nombre de lettre correspond a la taille du mot c'est gagner !
if(lettresTrouvees == tailleMot){
msg = "Bravo ! Vous avez gagné !";
document.getElementById("msg").innerHTML = msg;
msgID.style.opacity = 1;
fini = true;
}
}
}
// Fonction pour mettre le message "Lettre déjà entrer" en opaciter 0 (invisible donc)
function blocMsg() {
var msgID = document.getElementById("msg");
msgID.style.opacity = 0;
}
