Discussion :

[coachcharly]

Bonjour à tous,

Je viens de terminer le développement de mon Snake en html5, tout fonctionne à un détail prés, je vais tenter de vous expliquer rapidement la situation. Lorsque vous lancez le jeu pour la première fois (cache du navigateur vierge) tout s'affiche à l'écran (serpent + arène) sauf la nourriture, en revanche lors de la deuxième partie tout apparait à l'écran (serpent + arène + nourriture) c'est bien la que je ne comprend plus trop o_O Pourquoi ma fonction serait appelée au deuxième chargement est pas au premier ?!

Si vous avez des idées quand à ce problème n'hésitez pas, je vous en serai infiniment reconnaissant

Merci d'avance !

Ps: Vous trouverez mon code en pj

[headmax]

Salut j'ai donc regardé ta source.
J'ai noté deux erreur.
La première c'est que tu ne met pas de "nourriture" rand_frog(); au chargement donc s'est normal qu'il y a pas de bouffe des le départ
La deuxième il y a une erreur sur un élément que tu cherche avec getElementById("affichage_texte") qui n'existe pas ce qui risque de provoquer un arrêt de l’exécution de la suite de ton programme.
J'ai changer avec ce qu'il me parait logique :
modification page snake.html partie 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
			function play_game()
			{
				var level = 160; // Game level, by decreasing will speed up
				var rect_w = 45; // Width
				var rect_h = 30; // Height
				var inc_score = 50; // Score
				var snake_color = "#006699"; // Snake Color
				var ctx; // Canvas attributes
				var tn = []; // temp directions storage
				var x_dir = [-1, 0, 1, 0]; // position adjusments
				var y_dir = [0, -1, 0, 1]; // position adjusments
				var queue = [];
				var frog = 1; // defalut food
				var map = [];
				var MR = Math.random;
				var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions
				var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
				var direction = MR() * 3 | 0;
				var interval = 0;
				var score = 0;
				var sum = 0, easy = 0;
				var i, dir;
				var cylindre = new Image();
				cylindre.src = 'cylindre.png';                                            // destination de l'image serpent
				var clover = new Image();                                           // nouvelle image clover
				clover.src = 'clover.gif';                                           // destination de l'image clover
				// getting play area
				var c = document.getElementById('playArea');
				ctx = c.getContext('2d');
				// Map positions
					for (i = 0; i < rect_w; i++)
					{
						map[i] = [];
					}
					rand_frog();
				// random placement of snake food
					function rand_frog()
					{
						var x, y;
							do
							{
								x = MR() * rect_w|0;
								y = MR() * rect_h|0;
							}
							while (map[x][y]);
								map[x][y] = 1;
								ctx.fillStyle = snake_color;
								ctx.drawImage(clover, x * 10+1, y * 10+1, 13 , 13);  // snake food ou les param�tres repr�sente, l'image d�clar�e plus haut dans la variable, le postionnement al�atoire, ainsi que la taille de cette derni�re
								document.getElementById("msg").innerHTML = "<p>Your Score : "+score+" </p>"; // affichage des scores en direct
								change_background();
					}
				// Default somewhere placement
					function set_game_speed()
					{
						if (easy)
						{
							X = (X+rect_w)%rect_w;
							Y = (Y+rect_h)%rect_h;
						}
						--inc_score;
							if (tn.length)
								{
									dir = tn.pop();
									if ((dir % 2) !== (direction % 2))
										{
											direction = dir;
										}
								}	
									if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])
									{
										if (1 === map[X][Y])
										{
											score+= Math.max(5, inc_score);
											inc_score = 50;
											rand_frog();   //placement al�atoire de la nourriture
											frog++;    //ajout de nourriture
											sound('crunch.mp3'); // son quand la nourriture est mang�e
											//interval = window.setInterval(set_game_speed, level +=10);
											//document.getElementById('debug').innerHTML='variable vitesse:'+level+'test';
										}
											//ctx.fillStyle("#ffffff");
											ctx.drawImage(cylindre, X * 10, Y * 10, 13 , 13); // dessin serpent image ok
											map[X][Y] = 2;
											queue.unshift([X, Y]);
											X+= x_dir[direction];
											Y+= y_dir[direction];
												if (frog < queue.length)
												{
													dir = queue.pop()
													map[dir[0]][dir[1]] = 0;
													ctx.clearRect(dir[0] * 10, dir[1] * 10, 14, 14);  // efface les rectangles du serpent ok 												
												}
									}
									else if (!tn.length)
									{
									    sound('loser.mp3'); // chemin de la chanson
										document.getElementById('start').style.zIndex='1';
										document.getElementById('msg').innerHTML='Game Over<br/>Your score is:'+score+'<br/>Try again?';
										window.clearInterval(interval);
										/*$.post("sendscore.php",{game:'snake',score:score});*/
										document.getElementById('replay').innerHTML='<input type="button" value="Replay" onclick="window.location.reload();" />';
										return;
									}
					}
						interval = window.setInterval(set_game_speed, level);
						// fonction qui g�re la direction du serprent
						document.onkeydown = function(e) {
						e.preventDefault(); //bloque l'�coute clavier du navigateur
						var code = e.keyCode - 37;
						if (0 <= code && code < 4 && code !== tn[0])
						{
							tn.unshift(code);
						}
						else if (-5 == code)  //Tout le else if est la fonction qui fait en sorte que l'espace acc�l�re le jeu
						{
							if (interval)
							{
								window.clearInterval(interval);
								interval = 0;
							}
								else
								{
									interval = window.setInterval(set_game_speed, 60);
								}
						}
						else
						{
							dir = sum + code;
								if (dir == 44||dir==94||dir==126||dir==171) {
								sum+= code
						} 
										else if (dir === 218) easy = 1;
						}
						}
 
			function change_background()
			{
			var background = new Array();
			background[0] = "background.jpg";
			background[200] = "background1.jpg";
			background[400] = "background2.jpg";
			background[800] = "background3.jpg";
			background[1000] = "background4.jpg";
			background[1200] = "background5.jpg";
			background[1400] = "background6.jpg";
			background[1600] = "background7.jpg";
			background[1800] = "background8.jpg";
			background[2000] = "background9.jpg";
			background[2200] = "background10.jpg";
			background[2400] = "background11.jpg";
 
			document.getElementById('playArea').style.background = 'url('+background[score-(score%200)]+')';
 
			}
 
			}
			function sound(arg)
			{
				var sId = 'sound';
				var e = document.createElement('embed');
				e.setAttribute('src',arg);
				e.setAttribute('id',sId);
				e.setAttribute('hidden','true');
				e.setAttribute('autostart','true');
				e.setAttribute('loop','true');
				document.body.appendChild(e);
			}
			function reload() 
			{  
				window.location.reload();  
			}  
 
			function prechargement()
			{
                background = new Image;
				background.src = "background.jpg";	
				background1 = new Image;
				background1.src = "background1.jpg";
				background2 = new Image;
				background2.src = "background2.jpg";
				background3 = new Image;
				background3.src = "background3.jpg";
				background4 = new Image;
				background4.src = "background4.jpg";
				background5 = new Image;
				background5.src = "background5.jpg";
				background6 = new Image;
				background6.src = "background6.jpg";
				background7 = new Image;
				background7.src = "background7.jpg";
				background8 = new Image;
				background8.src = "background8.jpg";
				background9 = new Image;
				background9.src = "background9.jpg";
				background10 = new Image;
				background10.src = "background10.jpg";
				background11 = new Image;
				background11.src = "background11.jpg";
				crunch = new Audio
				crunch.src = "crunch.mp3"
				loser = new Audio;
				loser = "loser.mp3"
					rand_frog()
 
			}

[coachcharly]

Salut headmax,

Premièrement merci de ton aide

Je viens de regarder un peu ton code, et effectivement pour le getElementById c'est une petite négligence de ma part, tout est rentré dans l'ordre j'ai remis les bon Id aux bons endroits
En revanche j'ai toujours un problème avec l’appelle de la nourriture, même quand je met la fonction rand_frog dans la fonction prechargement je n'ai rien qui apparait à l'écran au premier tour. Si je me crash une fois, hop un trèfle apparait pour la deuxième partie. Il suffit de vider le cache du navigateur à chaque fois et on se rend compte que la fonction n'est pas appelée... Bizarre non ? oO

[SpaceFrog]

soit tu dis au serveur de ne pas mettre l'image en cache (cf htaccess et les headers),
soit tu rajoutes un timestamp au src de ton image

[coachcharly]

Merci pour ta réponse SpaceFrog mais je ne suis pas certain que mon problème soit du à une histoire de cache, je pense plus à une erreur dans mon code qui empêche l'affichage de ma nourriture au premier lancement.
Maintenant je cherche à savoir le pourquoi du comment ^^

[SpaceFrog]

heu ta focntion rand_frog() ... elle est incluse dans la fonction playgame ?

[coachcharly]

Hum oui... il faut croire

[SpaceFrog]

Ben commence par la sortir de là ...

[headmax]

salut coachcharly, tout d'abord bravo pour ton jeux, lol j'ai passer 1000 cho lol

Pour ce qui est de l'initialisation de la nourriture, SpaceFrog ta donné la bonne piste.

Bonne chance a toi

[coachcharly]

hahaha !!! Merci headmax de porter un peu d’intérêt à mon travail, bien que le challenge ne soit pas à la hauteur des derniers call of duty je suis plutôt content de mon travail... Disons que je suis un adepte de cette philosophie qui veut que l'on apprenne en s'amusant, enfin comme beaucoup d'entre nous j'imagine

Pour en revenir à cette histoire de nourriture (encore et toujours), j'ai bien suivi vos conseils, c'est à dire sortir la fonction rand_frog de la fonction play_game j'ai par la même profité de cette occasion pour faire un peu de ménage dans mon code et sortir d'autres fonctions de la fonction play_game.
Et au moment ou j'écris ces quelques lignes, je n'ai toujours pas le résultat escompté !

[coachcharly]

Toujours aucune idée concernant mon problème ?