Le jeu du pendu -- javascript!

**The_Anonymous** · 03/06/2016, 08h26

Bonjour à tous!

Je suis des cours d'informatique basiques depuis un an, et j'ai pour projet de coder le jeu du javascript avec html, css et js. Je débute donc veuillez excuser mon ignorance.

Je me suis inspiré pour la base d'une version que j'ai trouvé, puis j'ai essayé de refaire moi-même. J'ai codé la partie javascript selon ma logique, j'ai essayé de corriger autant que je pouvais, mais la console firefox ne trouve qu'une erreur que je ne comprends pas. Voici ci-dessous les codes pour les différentes parties de mon projet.

HTML
html.jpg

(CSS)(J'ai corrigé le "asbolute" en "absolute"..)
Pièce jointe 315700

JS
js.jpg

Et voici un aperçu de ma page quand je l'ouvre avec l'erreur de la console
page.jpg
avec l'erreur ici
bug.jpg

Je ne comprends pas pourquoi j'arrive à une telle erreur, pourquoi à la ligne "} else (test ==2) {", mais je pense ne pas être si loin du but que ça.

Je peux joindre une version zip de mon dossier si ça peut aider, mais merci d'avance pour l'aide!

Cordialement

**cherbe** · 03/06/2016, 09h05

Envoyé par The_Anonymous

Je ne comprends pas pourquoi j'arrive à une telle erreur, pourquoi à la ligne "} else (test ==2) {", mais je pense ne pas être si loin du but que ça.

Bonjour
Je ne suis pas un spécialiste de JS mais je n'ai jamais vu cette syntaxe consistant à mettre une test derrière un ELSE.
Qu'est-ce qui t'empêche de mettre ELSE IF ?

**The_Anonymous** · 03/06/2016, 09h50

Rien! Je me suis basé sur ce site
http://www.w3schools.com/js/js_if_else.asp
Pour apprendre la structure du if et else. C'est vrai que je devrais mettre soit
} else {
Ou
} else if (test == 2){
Je vais essayer avec ceci dès que je peux, merci pour la réponse!

Cordialement

**JPL** · 03/06/2016, 23h48

D'autre part les codes ne doivent pas être postés sous forme d'images mais sous forme texte entouré par les balises [Code].....[/Code]

A voir en vidéo sur Futura · Aujourd'hui

**The_Anonymous** · 04/06/2016, 15h19

Désolé! Venant du forum de maths, je n'utilise que les balises TEX et j'avoue ne pas avoir lu les règles du forum...

J'ai progressé dans mon code et j'arrive presque au résultat voulu. Cependant, deux problèmes interviennent dans l'utilisation de mon jeu.

Le premier réside dans l'inconsistence d'une fonction pour rejouer assignée à une image ainsi que le fait de recharger la page. Ce qui est bien étrange, c'est que, quand je recharge la page (avec F5), mon jeu répond comme voulu. Mais quand j'appuie sur le bouton qui est sensé faire la même chose, le programme ne marche plus correctement.
Plus précisément, durant la partie, on peut clicker sur les lettres (en image sur la page) et elles disparaissent (avec visibility: "hidden"). Pour recommencer la partie, j'ai fait en sorte que les lettres soient à nouveau visibles. Or, les lettres sont 'clickables' quand j'actualise la page, tandis qu'elles ne réagissent plus à rien quand j'appuie sur le bouton 'rejouer'. Pourquoi y a-t-il une différence de réaction alors que les deux événements sont rattachés à la même fonction?

Le deuxième problème intervient dans l'espace prévu pour les caractères ratés ainsi que l'image représentant la progression du pendu. Quand je commence une partie, tant qu'aucun caractère correct n'est sorti, le jeu marche normalement (ce qui veut dire qu'en faisant uniquement des caractères faux, on peut perdre!). Mais dès qu'un caractère correct est tiré, alors les caractères ratés n'apparaissent plus dans l'espace 'caractères ratés', l'image du pendu ne change plus, mais (!) le caractère raté est quand même rajouté dans l'espace 'caractère proposés'. Comment est-ce possible?

Voici ci-dessous les différentes parties de mon code. Je ne pense pas que les parties HTML ou CSS posent problème, mais plutôt la partie Javascript...

HTML

Code HTML:

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Le Jeu du Pendu</title>
		<meta charset="utf-8" />
		<meta name="author" content="MP" />
		<meta name="description" content="Le Jeu du Pendu" />
		<link rel="stylesheet" href="./css/pendu.css" />
	</head>

<body>
	<div id="title">
		<h1>LE JEU DU PENDU</h1>
	</div>
	<div id="container">
		<div id="first"> <!-- Cette div contient les caractères proposés, les corrects et les ratés -->
			<p id="output"> Caractères Proposés </p>
			<span id="CarProp">
			</span>
		</div>
		<div id="second"> <!-- Cette div contient les caractères ratés -->
			<p id="output"> Caractères Ratés </p>
			<span id="CarRat">
			</span>
		</div>
		<div id="third">
			<p id="output"> Mot Mystère </p> <!-- Cette div contient les caractères corrects. Les tirets qui indiquent la longueur du mot sont petit à petit remplacés par les lettres trouvées -->
			<span id="MotMyst">
			</span>
		</div>
		<div id="fourth"> <!-- Cette div contient "Bonne chance!", puis les images indiquant au joueur sa progression avant la défaite quand le dessin du pendu est fini -->
		</div>
		<div id="fifth"> <!-- Cette div contient les lettres avec lesquelles le joueur peut jouer en cliquant dessus -->
			
		</div>
		<div id="sixth"> <!-- Cette div contient l'image qui permet de rejouer -->
			<img id="rejouer" src="./images/replay.png" alt="replay"  />
		</div>
	</div>
	<script src="./js/pendu2.js"></script>
</body>
</html>

CSS (pas vraiment en cause)

Code:

*{
	font-family: "Verdana";
	margin: 0;
	padding: 0;
	background-color: #CC6600;
}
h1{
	position: absolute;
	height: 80%;
	width: 80%;
	top: 10%;
	left: 10%;
	text-align: center;
	font-size: 400%;
}
#title{
	position: absolute;
	width: 100%;
	height: 10%;
}
div div{
	position: absolute;
	border: 1px solid transparent;
	border-collapse: collapse;
	text-align: center;
}
#first{
	width: 60%;
	height: 30%;
	top: 10%;
}
#second{
	width: 30%;
	height: 30%;
	top: 40%;
}
#third{
	width: 30%;
	height: 30%;
	top: 40%;
	left: 30%;
	text-align: center;
}
#output {
	position: absolute;
	top: 10%;
	left: 10%;
	height: 30%;
	width: 80%;
	font-size: 300%;
}
span {
	position: absolute;
	height: 40%;
	width: 80%;
	top: 50%;
	left: 10%;
}
table {
	margin-left: auto;
	margin-right: auto;
	font-size: 400%;
}
#CarProp {
	font-size: 300%;
}
#CarRat {
	font-size: 150%;
}
#fourth{
	width: 40%;
	height: 60%;
	top: 10%;
	left: 60%;
}
#beginning{
	position: absolute;
	top: 30%;
	left: 30%;
	height: 40%;
	width: 40%;
	font-size: 400%;
}
#pendu{
	position: absolute;
	height: 10%;
	top: 10%;
	left: 0%;
	height: 80%;
	width: 80%;
}
#fifth{
	width: 80%;
	height: 30%;
	top: 70%;
}
#sixth{
	width: 20%;
	height: 30%;
	top: 70%;
	left: 80%;
}
#rejouer{
    display: block;
    margin-left: auto;
    margin-right: auto;
	height: 100%;
	width: auto;
}
#alphabet{
	height: 80px;
	width: 80px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.bug{
	height: 80px;
	width: 80px;
}
#Q{
	top: 10%;
	left: 3.4375%;
}
#W{
	top: 10%;
	left: 12.8125%;
}
#E{
	top: 10%;
	left: 22.1875%;
}
#R{
	top: 10%;
	left: 31.5625%;
}
#T{
	top: 10%;
	left: 40.9375%;
}
#Z{
	top: 10%;
	left: 50.3125%;
}
#U{
	top: 10%;
	left: 59.6875%;
}
#I{
	top: 10%;
	left: 69.0625%;
}
#O{
	top: 10%;
	left: 78.4375%;
}
#P{
	top: 10%;
	left: 87.8125%;
}
#A{
	top: 37.5%;
	left: 8.125%;
}
#S{
	top: 37.5%;
	left: 17.5%;
}
#D{
	top: 37.5%;
	left: 26.875%;
}
#F{
	top: 37.5%;
	left: 36.25%;
}
#G{
	top: 37.5%;
	left: 45.625%;
}
#H{
	top: 37.5%;
	left: 55%;
}
#J{
	top: 37.5%;
	left: 64.375%;
}
#K{
	top: 37.5%;
	left: 73.75%;
}
#L{
	top: 37.5%;
	left: 83.125%;
}
#Y{
	top: 65%;
	left: 17.5%;
}
#X{
	top: 65%;
	left: 26.875%;
}
#C{
	top: 65%;
	left: 36.25%;
}
#V{
	top: 65%;
	left: 45.625%;
}
#B{
	top: 65%;
	left: 55%;
}
#N{
	top: 65%;
	left: 64.375%;
}
#M{
	top: 65%;
	left: 73.75%;
}

Et finalement le Javascript

Code:

var round = 0;
var counter = 0;
var MotCache;
var Clavier = "";
var CarProp = "";
var CarRat = "";
var Mot2Bdisc = "";

Letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
Words = ["AVION", "MOTO", "MAISON", "ASPIRATEUR", "AMBULANCE", "NOIX", "ALIMENT", "RIZ", "HARICOT", "EMBOUTEILLAGE", "CARREFOUR", "PHARMACIEN", "FAMILLE", "FAUTEUIL",
		"ARGENT", "SHAMPOING", "THERMOMETRE", "PARAPLUIE", "SEMAINE", "TRACTEUR", "VACHE", "CYGNE", "OEUF", "YAOURT", "TOBOGGAN", "WAGON", "ZIGZAG", "HELICOPTERE",
		"ANORAK", "MOULIN", "CRAYON", "TABOURET", "PORTEMANTEAU"];
Images = ['/images/pendu1.png', '/images/pendu2.png', '/images/pendu3.png', '/images/pendu4.png', '/images/pendu5.png', '/images/pendu6.png', '/images/pendu7.png'];



window.onLoad = NewGame();
document.getElementById("rejouer").addEventListener('click', NewGame, false);
function NewGame(){
	for (i=0;i<26;i++){
	Clavier += "<div class='bug' id="+ Letters[i] +"> <img src='./images/"+ Letters[i] +".png' id='alphabet' alt="+ Letters[i] +" /></div>";
	}
	document.getElementById("fifth").innerHTML = Clavier;
	CarProp = "";
	CarRat = "";
	Mot2Bdisc = "";
	MotCache = Words[Math.floor(Math.random()*Words.length)+1]; /* MotCache est un mot de la liste de mots tiré aléatoirement */
	round = 0; /* On (re)commence au round 0 */
	counter = 0; /* On (re)met le compteur à 0 */
	Mot2Bdisc += "<table><tr>"
	for (j=0;j< MotCache.length;j++) {
		Mot2Bdisc += "<td id="+ j +"> - </td>"; /* On prépare j tirets à insérer dans le span du mot mystère */
	}
	Mot2Bdisc += "</tr></table>";
	document.getElementById("CarProp").innerHTML = "";
	document.getElementById("CarRat").innerHTML = "";
	document.getElementById("fourth").innerHTML = "<p id='beginning'> Bonne <br/> Chance! </p>";
	document.getElementById("MotMyst").innerHTML = Mot2Bdisc;
}

function NewRound(m,k){
	round = round+1;
	if (m == 0){
		document.getElementById("fourth").innerHTML = "<img id='pendu' src='./images/pendu7.png' alt=pendu7 />";
		CarProp += " " + Letters[k] + "";
		document.getElementById("CarProp").innerHTML = CarProp;
		CarRat += " " + Letters[k] + "";
		document.getElementById("CarRat").innerHTML = CarRat;
		window.alert('Vous avez perdu!');
	} else if (m == 1){
		document.getElementById("fourth").innerHTML = "<img id='pendu' src='./images/pendu"+ round +".png' alt=pendu"+ round +" />";
		CarProp += " " + Letters[k] + "";
		document.getElementById("CarProp").innerHTML = CarProp;
		CarRat += " " + Letters[k] + "";
		document.getElementById("CarRat").innerHTML = CarRat;
	} else if (m == 2){
		/* on a le span " - - - - - " et il faudrait que si A est réponse pour le 2 et 5ème caractère le span devienne " - A - - A " */
		for (n=0;n<MotCache.length;n++){
			if (MotCache.charAt(n) == (Letters[k])){
				document.getElementById(n).innerHTML = Letters[k];
			}
		}
		CarProp += " "  + Letters[k] + "";
		document.getElementById("CarProp").innerHTML = CarProp;
	}
}

function Check(o){ /* Ce test permet de savoir si le joueur a tiré un bon caractère ou non, et si dans le cas échéant, il a encore une chance ou non */
	document.getElementById(Letters[o]).style.visibility = "hidden";
	for (l=0;l<MotCache.length;l++){
		if (MotCache.charAt(l) == (Letters[o])){
			counter += 1;
		}
	}
	if (counter == 0){
		if (round < 6){
			NewRound(1,o);
		} else if (round == 6){
			NewRound(0,o);
		}
	}
	else if (counter>0){
		NewRound(2,o);
	}
}
document.getElementById("A").addEventListener('click', function(){
	Check(0);
});
document.getElementById("B").addEventListener('click', function(){
	Check(1);
});
document.getElementById("C").addEventListener('click', function(){
	Check(2);
});
document.getElementById("D").addEventListener('click', function(){
	Check(3);
});
document.getElementById("E").addEventListener('click', function(){
	Check(4);
});
document.getElementById("F").addEventListener('click', function(){
	Check(5);
});
document.getElementById("G").addEventListener('click', function(){
	Check(6);
});
document.getElementById("H").addEventListener('click', function(){
	Check(7);
});
document.getElementById("I").addEventListener('click', function(){
	Check(8);
});
document.getElementById("J").addEventListener('click', function(){
	Check(9);
});
document.getElementById("K").addEventListener('click', function(){
	Check(10);
});
document.getElementById("L").addEventListener('click', function(){
	Check(11);
});
document.getElementById("M").addEventListener('click', function(){
	Check(12);
});
document.getElementById("N").addEventListener('click', function(){
	Check(13);
});
document.getElementById("O").addEventListener('click', function(){
	Check(14);
});
document.getElementById("P").addEventListener('click', function(){
	Check(15);
});
document.getElementById("Q").addEventListener('click', function(){
	Check(16);
});
document.getElementById("R").addEventListener('click', function(){
	Check(17);
});
document.getElementById("S").addEventListener('click', function(){
	Check(18);
});
document.getElementById("T").addEventListener('click', function(){
	Check(19);
});
document.getElementById("U").addEventListener('click', function(){
	Check(20);
});
document.getElementById("V").addEventListener('click', function(){
	Check(21);
});
document.getElementById("W").addEventListener('click', function(){
	Check(22);
});
document.getElementById("X").addEventListener('click', function(){
	Check(23);
});
document.getElementById("Y").addEventListener('click', function(){
	Check(24);
});
document.getElementById("Z").addEventListener('click', function(){
	Check(25);
});

Si jamais cela peut aider, un zip de mon travail est en pièce jointe.

Merci beaucoup pour l'aide et bon week-end!

Cordialement

**satinas** · 04/06/2016, 16h13

Salut, Clavier est une variable globale. Lorsque tu recharges la page elle est initialisée, pas lorsque tu exécutes la fonction. Il faut le faire en début de fonction NewGame();

**satinas** · 04/06/2016, 16h51

d'autre part, il vaut mieux créer le clavier une seule fois en début de script comme dans la première version, car en le récréant à chaque appel de NewGame(), on crée de nouvelles balises et l'interception des clics est perdue à mon avis.

**satinas** · 04/06/2016, 17h18

La variable counter est aussi globale, elle doit être remise à zéro en début de fonction Check(), sinon elle garde sa valeur tout le long de la partie, ce qui explique le second problème.

**The_Anonymous** · 04/06/2016, 17h23

Merci énormément pour la réponse!

J'ai pu sortir la définition de Clavier en dehors de NewGame();, et en remettant simplement visibility: "visible", ce problème là est résolu! Merci pour l'explication quant à la différence entre l'actualisation de la page et l'exécution de la fonction!

Malgré ceci, il est presque impossible de perdre à cause de mon autre problème. Je ne comprends vraiment pas pourquoi, alors que le code est exactement similaire pour l'espace des caractères proposés et celui des caractères ratés, le caractère n'apparait que dans un. Qu'est-il arrivé à 'CarRat' pour qu'il n'affiche pas la lettre tirée?

Merci encore pour la réponse!

**satinas** · 04/06/2016, 17h29

Ce type d'erreur se produit quand on abuse des variables globales. la variable counter doit être locale à la fonction Check, en la déclarant par var counter = 0; en début de fonction.

**The_Anonymous** · 04/06/2016, 17h38

Je n'ai pas essayé, mais je crois comprendre que je me base sur des mauvais principes... Je croyais que le mieux était de déclarer toutes les variables en début de programme (js)... Si une variable est interne à une fonction, il faut uniquement la déclarer au début de la fonction? Cela fait sens, je vais essayer de résoudre mon problème de suite!

EDIT : J'ai changé selon votre message et le programme marche à merveille! Merci infiniment pour l'aide!

Le jeu du pendu -- javascript!

Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Re : Le jeu du pendu -- javascript!

Discussions similaires

Javascript : Intégrer une variable javascript dans un champ de formulaire html

TP jeu du pendu

Pendu