Une syntax error

Version imprimable

Une syntax error

bonjour à tous,

je vous donne d'abord out mon code ensuite j'ai mis l'erreur:

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
<!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' />
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></scrip
	<body>  
	 </body> 
</html>

mario_mouvant_html.js

Code:

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
var fig = document.createElement ('figure');
	fig.id = 'mario',
	fig.style.position = 'relative';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
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);
body.appendChild(fig):

en lançant cette page HTML,il ne m'afiche rien. j'ai donc ouvert une console web qui m'affiche l'erreur suivante:

Citation:

SyntaxError: illegal character mario_mouvant_html.js;

31/12/2014, 15h50
ryan

Yop,

A première vue: je placerais les \n entre guillemets.

En complément de ce qu'à déjà répondu Ryan :)

Il y a en un peu partout ... celle que j'ai vu (uniquement les erreurs de syntaxe) sont corrigées dans ton code ci-dessous
HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
	<!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' charset='utf-8' />
		<title>Mario mouvant</title>
		<link rel='icon' href='favicon.ico' />
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></script>
	<body>  
	 </body> 
</html>

mario_mouvant_html.js

Code:

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
var fig = document.createElement ('figure');
	fig.id = 'mario',; // pas une erreur de syntaxe
	fig.style.position = 'relative';
	
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
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);
body.appendChild(fig):;

edit: l'attribut charset dans la balise meta a été introduit en html5, il n'existe pas en xhtml1.0.

31/12/2014, 18h39
aertys

pouvez-vous m'expliquer ceci;

Citation:

body.appendChild(fig):;
31/12/2014, 19h41
ryan

Yop!

On ajoute une balise figure, nommée "fig", dans le body de la page.
01/01/2015, 12h16
aertys

en fait c'est surtout ce symbole dont je voudrais une explication

Citation:

:
01/01/2015, 12h36
ryan

Yop,

M'attendais tellement peu a le voir là que je ne l'ai pas aperçu...
A ma connaissance, ces deux points ne servent à rien et ne devraient pas être là.

bonjour,

mon script a fonctionné la première fois mais depuis, le prompt s'affiche bien, et j'ai une page blanche après

la console web m'affiche ces erreurs:

Citation:

TypeError: mybody is undefined mario_mouvant_html.js:35
ReferenceError: mario is not defined mario_mouvant.js:3

voici mes codes:
mario_mouvant.js:

Code:

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
(function() { 
 
var mgauche = mario.style.left,
	droite = mario.style.right,
	bas = mario.style.bottom,
	haut = mario.style.up;
 
    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 (e) {
 
	switch (e.keyCode) {
		case 37:
		if (parseInt(gauche) != 0) {	
			gauche = (parseInt(gauche) - 10) + "px";
		}
		else {
			alert ("Je ne peux pasaller  plus loin, patate!");
		}
		break;
 
		case 39:
		if (parseInt(droite) != 0) {
			gauche = (parseInt(gauche) + 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		case 38:
		if (parseInt(haut) != 0) {
			haut = (parseInt(haut) - 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		case 40:
		if (parseInt(bas) != 0) {
			haut = (parseInt(haut) + 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		}
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

mario_mouvant_html.js:

Code:

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
(function() { 
 
var mybody = document.getElementsByTagName("body") [0];
 
var fig = document.createElement ('figure');
	fig.id = 'mario';
	fig.style.position = 'relative';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
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);
 
})();

05/01/2015, 23h43
lysandro
Tout est dans les erreurs :

Citation:

TypeError: mybody is undefined mario_mouvant_html.js:35

'mybody' est 'undefined', pourquoi ? Tes scripts sont évalués lors du traitement de ta page, dans le '<head>'. Le '<body>' n'est pas encore traité et n'est donc pas encore connu. L'affectation 'mybody = document.getElementsByTagName("body")[0]' renvoie 'undefined'. Quand plus tard tu essayes d'appeler une méthode dessus 'mybody.appendChild(...)' l'erreur se déclenche.

Tu peux mettre tes scripts juste avant la fermeture du body '</body>' ou utiliser les événements et n'évaluer tes scripts que lorsque la page est complétement chargée.

Citation:

ReferenceError: mario is not defined mario_mouvant.js:3

Dans mario_mouvant_html.js, tu définis ta variable 'mario' dans une fonction (le '(function(){ ... })()'), 'mario' n'est pas connu en dehors. Lorsque tu essayes d'y accéder dans mario_mouvant.js, le moteur te dit qu'il ne connait pas de symbol 'mario'.

Tu peux définir 'mario' comme variable globale ou mettre tes scripts dans la même fonction ou trouver un moyen de communiquer entre tes deux fonctions. Ou plus simple sans doute, rajouter :
Code:

1 2 3 4 (function() { var mario = document.getElementById("mario").firstChild; var mgauche = mario.style.left, ...
06/01/2015, 14h03
aertys

bon alors maintenant l'image s'affiche bien. j’ai vérifié la touche enfoncée via des alert() et c'est la bonne mais il ne me déplace soit pas l'image soit dans le sens inverse de l’effet escompté
06/01/2015, 15h41
lysandro

Que quelque chose puisse bouger avec le code fourni me laisse songeur... Trop de choses à deviner.

edit: dans ma réponse précédente, j'avais supposé que 'mario' était l'image (<img>) comme utilisée dans ton code, bien que tu ais mis 'mario' comme 'id' sur la figure (<figure>). D'où le 'document.getElementById("mario").firstChild' qui récupère l'image, mais c'était peut-être la figure que tu voulais déplacer ?
06/01/2015, 20h04
aertys

j'ai essayé de modifier les marges de mon <img> en fonction de la touche par utilisateur, d'où le switch, donc le faire "bouger".
06/01/2015, 20h09
lysandro

Dans le code fourni, tu calcules des valeurs (gauche, haut) mais elle ne sont jamais affectées.
07/01/2015, 10h31
aertys

comment puis-je les affecter si ce n'est en faisant ça :

Code:

gauche = (parseInt(gauche) - 10) + "px";

En faisant plutot ça document.getElementById("mario").style.left = gauche+"px"; par exemple. Sinon je ne vois pas comment quoi que ce soit puisse bouger.

edit: Dans ton code html généré tu utilises une balise 'figure', cette balise est plutot réservée aux illustrations (au sens large: texte, image, dessin, etc) dans un texte. Comme tu cherches à établir un aire de jeu pour déplacer mario, je te propose de passer plutot par une balise plus générique comme un 'div'.

Ci-dessous, tu trouveras un exemple fonctionnel du code. Juste un exemple, pour le comparer à ton code.

Code:

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
113
114
115
116
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <title>Mario mouvant</title>
    <body>
        <div id="airedejeu"  style="position:relative; width:100%; height:100%;">
            <img id="mario" style="position:absolute;" src="../img/Mario.png">
        </div>
        <script type='text/javascript'>
            (function() { 
                var aire_de_jeu = document.getElementById("airedejeu");
                // calcul des limites de l'aire de jeu
                // à remettre à jour en cas de redimensionnement
                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 mario = document.getElementById("mario");
                // récupération de la position et des dimensions de l'image
                // à remettre à jour en cas de changement d'image
                var gauche  = parseInt(mario.style.left) ||  0,
                    haut    = parseInt(mario.style.top ) ||  0,
                    largeur = parseInt(mario.width     ) || 20,
                    hauteur = parseInt(mario.height    ) || 20;
 
                var keydown_listener = function onkeydown ( event ) {
                    // constantes par convention
                    var KEYCODE_LEFT_ARROW  = 37,
                        KEYCODE_RIGHT_ARROW = 39,
                        KEYCODE_UP_ARROW    = 38,
                        KEYCODE_DOWN_ARROW  = 40;
                    var KEYMODIFIER_CTRL    = 0x1000,
                        KEYMODIFIER_SHIFT   = 0x2000,
                        KEYMODIFIER_ALT     = 0x4000;
 
                    var message = "Je ne peux pas aller plus loin, patate !";
                    var déplacement = 10;
 
                    event = event || window.event;
                    var keyCode = event.keyCode;
                    if ( event.ctrlKey )
                        keyCode |= KEYMODIFIER_CTRL;
                    if ( event.shiftKey )
                        keyCode |= KEYMODIFIER_SHIFT;
                    if ( event.altKey )
                        keyCode |= KEYMODIFIER_ALT;
 
                    var bord_atteint = false,
                        mettre_à_jour_position = true;
 
                    switch ( keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-déplacement) >= bord.gauche ) {    
                                gauche -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+déplacement) < bord.droit ) {
                                gauche += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-déplacement) >= bord.haut ) {
                                haut -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+déplacement) < bord.bas ) {
                                haut += déplacement;
                            }
                            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";
                    }
                };
 
                if ( document.addEventListener )
                    document.addEventListener('keydown',keydown_listener,true);
                else if ( document.attachEvent )
                    document.attachEvent('onkeydown',keydown_listener);
                else
                    document.onkeydown = keydown_listener;
            })();
        </script>
     </body> 
</html>

avertissement: Comme le script est juste après le html, il est possible que l'image ne soit pas encore disponible lors de l'initialisation des variables 'largeur' et 'hauteur' (chaque ressource génère une connexion à part pour son chargement, suivant la taille ce chargement peut-être plus ou moins long). Une actualisation de la page fera l'affaire, c'est juste un exemple. Pour ton jeu, il faudra sans doute t'assurer que l'image choisie est arrivée avant d'accéder à ses dimensions ('mario.width'). Je ne l'ai pas fait volontairement. Pas plus que je n'ai reporté ton code de sélection de l'image.

Bonjour,

Merci pour votre aide.

Voici mes nouveaux codes : mario_mouvant_html.js

Code:

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
(function() { 
 
var mybody = document.getElementsByTagName("body") [0];
 
var fig = document.createElement ('figure');
	fig.id = 'aire_de_jeu';
	fig.style.position = 'absolute';
 
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);
 
})();

mario_mouvant.js :

Code:

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
(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 = 10;
	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-déplacement) >= bord.gauche ) {    
                                gauche -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+déplacement) < bord.droit ) {
                                gauche += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-déplacement) >= bord.haut ) {
                                haut -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+déplacement) < bord.bas ) {
                                haut += déplacement;
                            }
                            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";
                    }
                });
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

mais voici une nouvelle erreur que je ne sais pas résoudre :

Citation:

SyntaxError: missing ) after argument list mario_mouvant.js:92

Avez-vous une idée ?

18/01/2015, 18h07
lysandro

Les accolades et les parenthéses vont par paire. Recherche si il ne t'en manque pas ou si tu n'en a pas en trop.
"Erreur de syntaxe: il manque une parenthèse fermante ) après une liste d'arguments dans : mario_mouvant.js, ligne : 92"
18/01/2015, 18h51
Watilin

D'après le message d'erreur c'est un problème avec les parenthèses ou les accolades. Tu peux t'aider d'un outil d'indentation automatique pour trouver le problème. Par exemple avec Firefox, fais Maj+F4 pour ouvrir l'ardoise, puis colle ton code et fais Ctrl+P pour le réindenter. Les endroits où l'indentation devient incohérente t'indiquent généralement à quel endroit les choses ont commencé à déconner :)
18/01/2015, 20h20
aertys

j'ai corrigé mon code mais il y a encore quelques problemes

pour les résoudre, j'aimerais d'abord une explication des lignes suivantes:

Code:

if ( (gauche-deplacement) >= bord.gauche ) {

Code:

if ( (gauche+largeur+deplacement) < bord.droit ) {

pourquoi y a-t-il une différence?

Code:

1
2
3
4
5
6
7
8
9
10
bord.gauche                                            bord.droit
    |                gauche                                 |
    |                 [+]--------+                          |
    |                  |  mario  |                          |
    |                  |<------->|                          |
    |                  | largeur |                          |
    |             <----|         |---->                     |
    |          déplacement     déplacement                  |
    |                                                       |
    [gauche-deplacement]         [gauche+largeur+deplacement]

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:

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

27/01/2015, 19h00
lysandro

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. :)

bonjour,

voici mon code:

Code:

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().

08/02/2015, 16h34
NoSmoking

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

Citation:

<div id="airedejeu" style="position:relative; width:100%; height:100%;">

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.
08/02/2015, 17h36
aertys

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é!

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:

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:

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.

08/02/2015, 19h52
lysandro

@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 :P

@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.
08/02/2015, 20h41
NoSmoking
Tiens c'est vrai j'en avais oublié IE :aie:
Mets l'écoute sur document et non sur window
Code:

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

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:

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

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:

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:

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

17/02/2015, 20h24
lysandro

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.
17/02/2015, 22h55
Watilin
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:

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:

mybody.style.width = 100%;

par

Code:

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.

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

Code:

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:

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

18/02/2015, 19h31
lysandro
1- applique toutes les remarques de Watilin
2- dans mario_mouvant_html.js ajoute
Code:

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:

var aire_de_jeu = document.getElementById("aire_de_jeu");
20/02/2015, 13h57
aertys

Un grand merci, mon jeu fonctionne super bien maintenant!