Discussion :

[aertys]

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]

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]

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]

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

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

[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�!

[NoSmoking]

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]

@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]

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
}

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]

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]

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]

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]

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]

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]

Un grand merci, mon jeu fonctionne super bien maintenant!