Une syntax error

**aertys** · 27/01/2015, 16h56

Merci pour cette réponse!

Bien qu'il me semble finalement que le problème ne vienne pas de là!

donc je vous explique ce qu'il se passe:
Le chargement le prompt s'affiche bien, et mon image s'affiche
Mais quand j'appuie sur une flèche, il semble suivre un ordre aléatoire d'exécution, je veux dire qu'il exécute soit alert(), soit rien, soit il déplace mario (rarement)!

revoici mario_mouvant.js, les autres codes restent inchangés:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
(function() { 
 
 
 
var mario = document.getElementById("mario");
var gauche = parseInt(mario.style.left) || 0,
//	droite = mario.style.right,
//	bas = mario.style.bottom,
	haut = parseInt(mario.style.top) || 0,
	largeur = parseInt(mario.width) || 20,
	hauteur = parseInt(mario.height) || 20;
var bord = {
     haut   : 0,
     gauche : 0,
     bas    : (parseInt(aire_de_jeu.clientHeight) || 400) - (parseInt(aire_de_jeu.clientTop ) || 0),
     droit  : (parseInt(aire_de_jeu.clientWidth ) || 400) - (parseInt(aire_de_jeu.clientLeft) || 0)
};
 
var bord_atteint = false,
     mettre_à_jour_position = true;
 
var message = "Je ne peux pas aller plus loin, patate !";
var deplacement = 100,
	event = event || window.event;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
addEvent (window, 'keydown', function (event) {
 
     var KEYCODE_LEFT_ARROW  = 37,
          KEYCODE_RIGHT_ARROW = 39,
          KEYCODE_UP_ARROW    = 38,
          KEYCODE_DOWN_ARROW  = 40;
 
                    switch ( event.keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-deplacement) >= bord.gauche ) {    
                                gauche -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+deplacement) < bord.droit ) {
                                gauche += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-deplacement) >= bord.haut ) {
                                haut -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+deplacement) < bord.bas ) {
                                haut += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        default:
                            mettre_à_jour_position = false;
                            break;
                    }
 
                    if ( bord_atteint ) {
                        mettre_à_jour_position = false;
                        alert(message);
                    }
 
                    if ( mettre_à_jour_position ) {
                        mario.style.top  = haut+"px";
                        mario.style.left = gauche+"px";
                    }
 
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

**lysandro** · 27/01/2015, 19h00

Bonjour,

Si tu compares ton code avec celui que je t'avais mis en exemple, tu t'apercevras que les déclarations et initialisations de certaines variables ne sont plus dans la même fonction. Notamment, bord_atteint et mettre_à_jour_position. Essayes de comprendre pourquoi.

Tu as aussi déplacé event = event || window.event;. A quoi sert ce code ? A gérer Internet Explorer (IE) principalement qui ne passe pas l'événement à la fonction qui gère cet évènement : la fonction que tu définis dans addEvent (window, 'keydown', function (event) { .... Le bout de code permet justement de dire :
Si je suis dans une version de IE qui ne passe l'évènement, l'argument event de la fonction est donc non défini (undefined), j'initialise alors ma variable avec la valeur de la propriété event de l'objet window (propre à IE). Ce code doit donc se trouver dans la fonction qui gère l'évènement [voilà pourquoi je n'aime pas les fonctions anonymes - pas de nom!]. Mais ce n'est pas obligatoire (enfin sauf si tu veux que ça marche avec IE), en fait c'est parce que toi, tu as géré le cas d'IE au travers de ta fonction addEvent. :)

**aertys** · 08/02/2015, 15h35

bonjour,

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
(function() { 
 
var mario = document.getElementById("mario");
var gauche = parseInt(mario.style.left) || 0,
//	droite = mario.style.right,
//	bas = mario.style.bottom,
	haut = parseInt(mario.style.top) || 0,
	largeur = parseInt(mario.width) || 20,
	hauteur = parseInt(mario.height) || 20;
var bord = {
     haut   : 0,
     gauche : 0,
     bas    : (parseInt(aire_de_jeu.clientHeight) || 400) - (parseInt(aire_de_jeu.clientTop ) || 0),
     droit  : (parseInt(aire_de_jeu.clientWidth ) || 400) - (parseInt(aire_de_jeu.clientLeft) || 0)
};
 
 
var message = "Je ne peux pas aller plus loin, patate !";
var deplacement = 100;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
          event = event || window.event;
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
addEvent (window, 'keydown', function (event) {
 
var bord_atteint = false,
     mettre_à_jour_position = true;
 
          var KEYCODE_LEFT_ARROW  = 37,
          KEYCODE_RIGHT_ARROW = 39,
          KEYCODE_UP_ARROW    = 38,
          KEYCODE_DOWN_ARROW  = 40;
 
                    switch ( event.keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-deplacement) >= bord.gauche ) {    
                                gauche -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+deplacement) < bord.droit ) {
                                gauche += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-deplacement) >= bord.haut ) {
                                haut -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+deplacement) < bord.bas ) {
                                haut += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        default:
                            mettre_à_jour_position = false;
                            break;
                    }
 
                    if ( bord_atteint ) {
                        mettre_à_jour_position = false;
                        alert(message);
                    }
 
                    if ( mettre_à_jour_position ) {
                        mario.style.top  = haut+"px";
                        mario.style.left = gauche+"px";
                    }
 
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

e
Il semblerait que je n'ai pas-compris toutes vos suggestions, car quand j'appuie sur^ ^^une première, mario bouge bien, avant de se bloquer répétant sans cesse le alert().

**NoSmoking** · 08/02/2015, 16h34

Bonjour,
regardé rapidement mais une chose au moins m'intrigue

que represente les 100% de ton aire de jeu, mets un background-color pour être sûr de la position.

Une deuxième observation, quand tu testes si l'élément va toucher le bord position_actuelle + increment_de_deplacement si c'est le cas tu ne déplaces pas l'élément au bord.

**aertys** · 08/02/2015, 17h36

excusez-moi je n'ai rien compris.
d'abord la ligne que vous citez ne figure pas dans mon code.
ensuite que Mario ne se déplace pas,c'est le problème que j'ai énoncé!

**NoSmoking** · 08/02/2015, 19h31

J'ai présumé que tu utilisais la trame HTML de lysandro visiblement à tord !

Concernant le déplacement
avant le déplacement tu testes si l'objet va dépasser les bornes de l'affichage
- si NON tu déplaces
- si OUI tu affiches un message d'erreur mais tu ne réajustes pas la position de l'objet aux bornes.

en gros tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
new_position = position_actuelle + increment
SI new_position SUP Borne ALORS
  affiche_Erreur( 'limite atteinte!')
SINON
  deplace_Objet( new_position)
FINSI

alors que tu devrais faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
new_position = position_actuelle + increment
SI new_position SUP Borne ALORS
  new_position = Borne      // a ajuster suivant dimensions objet
  deplace_Objet( new_position)
  affiche_Erreur( 'limite atteinte!')
SINON
  deplace_Objet( new_position)
FINSI

Ceci dit si ton espace de jeu n'est pas suffisamment grand il ne se passera rien, c'est pourquoi je t'ai proposé de mettre une couleur à ton terrain de jeu pour en voir les limites.

**lysandro** · 08/02/2015, 19h52

@NoSmoking: je me permet de répondre, vu que j'ai donné le code en exemple. Le div 'airedejeu' dans le body, avec les 'width' et 'height' à '100%', est là pour que l'aire de jeu prenne le maximum de la page. J'ai pas bon ?
Hum ... et pour le déplacement au bord, je ne l'avais pas mis non plus :/ mais volontairement cette fois pour qu'aertys le corrige. Un peu de calcul ne fait de mal à personne

@aertys: le code event = event || window.event; doit être dans la fonction qui gère l'événement (celle où on teste pour faire bouger mario) pas dans addEvent. Mais ce n'est un problème que si tu testes avec Internet Explorer (et encore peut-être pas les dernières versions ?). Sinon, la suggestion de NoSmoking sur la couleur du fond me semble excellente pour visualiser s'il y a un problème.

**NoSmoking** · 08/02/2015, 20h41

Tiens c'est vrai j'en avais oublié IE

Mets l'écoute sur document et non sur window

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
addEvent (document, 'keydown', function (event){
   // le reste du code
}

Envoyé par lysandro

Le div 'airedejeu' dans le body, avec les 'width' et 'height' à '100%', est là pour que l'aire de jeu prenne le maximum de la page. J'ai pas bon ?

si et seulement si les html et body sont déclarés à 100%

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html, body {
  height:100%;
  margin:0;
  padding:0;
}

**aertys** · 17/02/2015, 14h45

bonjour,

j'ai suivi vos conseils mais n'obtiens rien de différent, même pas de couleur!

revoici mes codes:
mario_mouvant.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
(function() { 
 
var mario = document.getElementById("mario");
var gauche = parseInt(mario.style.left) || 0,
//	droite = mario.style.right,
//	bas = mario.style.bottom,
	haut = parseInt(mario.style.top) || 0,
	largeur = parseInt(mario.width) || 20,
	hauteur = parseInt(mario.height) || 20;
var bord = {
     haut   : 0,
     gauche : 0,
     bas    : (parseInt(aire_de_jeu.clientHeight) || 400) - (parseInt(aire_de_jeu.clientTop ) || 0),
     droit  : (parseInt(aire_de_jeu.clientWidth ) || 400) - (parseInt(aire_de_jeu.clientLeft) || 0)
};
 
 
var message = "Je ne peux pas aller plus loin, patate !";
var deplacement = 100;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
 
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
addEvent (document, 'keydown', function (event) {
 
event = event || window.event;
 
var bord_atteint = false,
     mettre_à_jour_position = true;
 
          var KEYCODE_LEFT_ARROW  = 37,
          KEYCODE_RIGHT_ARROW = 39,
          KEYCODE_UP_ARROW    = 38,
          KEYCODE_DOWN_ARROW  = 40;
 
                    switch ( event.keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-deplacement) >= bord.gauche ) {    
                                gauche -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+deplacement) < bord.droit ) {
                                gauche += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-deplacement) >= bord.haut ) {
                                haut -= deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+deplacement) < bord.bas ) {
                                haut += deplacement;
                                bord_atteint = false;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        default:
                            mettre_à_jour_position = false;
                            break;
                    }
 
                    if ( bord_atteint ) {
                        mettre_à_jour_position = false;
                        alert(message);
                    }
 
                    if ( mettre_à_jour_position ) {
                        mario.style.top  = haut+"px";
                        mario.style.left = gauche+"px";
                    }
 
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

mario_mouvant_html.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function() { 
 
var mybody = document.getElementsByTagName("body") [0];
     mybody.style.width = 100%;
     mybody.style.height = 100%;
 
var fig = document.createElement ('figure');
	fig.id = 'aire_de_jeu';
	fig.style.position = 'absolute';
	fig.style.backgroundColor = 'red';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
	mario.id = 'mario';
	mario.style.position = 'absolute';
 
var choix = prompt ("Veuillez choisir votre personnage." + "\n" +
							"m pour Mario" + "\n" +
							"l pour Luigi" + "\n" +
							"w pour Wario.");
 
	choix = choix.toLowerCase();
 
	switch (choix) {
		case 'm':
			mario.src = "img/Mario.png";
			break;
		case 'l':
			mario.src = "img/Luigi.png";
			break;
		case 'w':
			mario.src = "img/Wario.png";
			break;
		default:			
			mario.src = "img/Mario.png";
			break;
	}
 
fig.appendChild(mario);
 
mybody.appendChild(fig);
 
})();

**lysandro** · 17/02/2015, 20h24

Avoir aussi le code html serait mieux. Et avec quel navigateur testes tu ?
Sinon tu ne donnes pas de taille à ton élément figure dans mario_mouvant_html.js et sauf erreur de ma part sa position devrait plutot être relative qu'absolute.

**Watilin** · 17/02/2015, 22h55

Dans un navigateur en mode standard ce n'est pas le <body> qui se réfère aux dimensions du viewport, c'est le <html>. Le <body>, lui, se réfère aux dimensions du <html>. Il faut donc mettre 100% sur ces deux éléments et penser à virer les marges, comme l'a écrit NoSmoking. Je rajouterais éventuellement un overflow: hidden pour éviter les barres de défilement (quoique s'il y a des barres de défilement, c'est qu'il y a un problème ailleurs). On met tout ça dans un CSS externe, ou au besoin dans une balise <style> injectée par le script.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Sinon attention à la syntaxe dans mario_mouvant_html.js : les styles dans le JS c'est toujours des chaînes donc remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mybody.style.width = 100%;

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mybody.style.width = "100%";

Normalement ça aurait lancé une syntax error donc tu aurais dû voir ça facilement avec la console. Ou alors est-ce juste une erreur de recopie ?

Je n'ai pas trouvé d'autres erreurs dans le script, donc si problème demeure, c'est sans doute dans le HTML.

**aertys** · 18/02/2015, 18h34

voici déjà mon html, meme si j'ai essayé de le faire en js:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
	<head>
		<meta http-equiv='content-type' content='text/html' charset='utf-8' />
		<title>Mario mouvant</title>
		<link rel='icon' href='favicon.ico' />
	</head>
	<body> 
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></script>
	 </body> 
</html>

et mario_mouvant_html.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
(function() { 
 
var myhtml = document.getElementsByTagName("html") [0];
     myhtml.style.width = "100%";
     myhtml.style.margin = "0";
     myhtml.style.height = "100%";
     myhtml.style.padding = "0";
     myhtml.style.overflow = "hidden";
 
var mybody = document.getElementsByTagName("body") [0];
     mybody.style.width = "100%";
     mybody.style.margin = "0";
     mybody.style.height = "100%";
     mybody.style.padding = "0";
     mybody.style.overflow = "hidden";
 
var fig = document.createElement ('figure');
	fig.id = 'aire_de_jeu';
	fig.style.position = 'relative';
	fig.style.backgroundColor = 'red';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
	mario.id = 'mario';
	mario.style.position = 'absolute';
 
var choix = prompt ("Veuillez choisir votre personnage." + "\n" +
							"m pour Mario" + "\n" +
							"l pour Luigi" + "\n" +
							"w pour Wario.");
 
	choix = choix.toLowerCase();
 
	switch (choix) {
		case 'm':
			mario.src = "img/Mario.png";
			break;
		case 'l':
			mario.src = "img/Luigi.png";
			break;
		case 'w':
			mario.src = "img/Wario.png";
			break;
		default:			
			mario.src = "img/Mario.png";
			break;
	}
 
fig.appendChild(mario);
 
mybody.appendChild(fig);
 
})();

**lysandro** · 18/02/2015, 19h31

1- applique toutes les remarques de Watilin
2- dans mario_mouvant_html.js ajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
fig.style.width = "100%";
fig.style.height = "100%";

pour que ton aire de jeu occupe toute la place (tu peux aussi le faire en CSS).
3- dans mario_mouvant.js avant de calculer la taille de l'aire de jeu, il faut que tu récupères l'élément dans une variable. Sinon il y a une erreur dans la console : 'aire_de_jeu n'est pas définie'.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var aire_de_jeu = document.getElementById("aire_de_jeu");

**aertys** · 20/02/2015, 13h57

Un grand merci, mon jeu fonctionne super bien maintenant!

Une syntax error

JavaScript

Discussions similaires

Partager

Partager