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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
| // Au chargement, je crée un cadre de 900 de largeur et de 600 de hauteur
// avec une épaisseur de 1px de bordure visible
// C'est notre canvas
window.onload = function () { // début du window.onload
// Déclaration de variagles globales
var canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30; // taille d'un bloc de 30 pixels par 30 pixels
var ctx;
var delay = 100; // exprimé en ms, c'est la vitesse du serpent ex:1 trop vite 1000 trop lent
var xCoord = 0;
var yCoord = 0;
var snakee;
var applee;
var widthInBlocks = canvasWidth/blockSize;
var heightInBlocks = canvasHeight/blockSize;
var score;
var timeout;
// -- fin des déclarations de variables
// Initialisation
init();
// --- fin de l'initialisation
function init()
{ // début de la fonction d'initialisation
var canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.border = "30px solid gray";
canvas.style.margin="50px auto";
canvas.style.display="block";
canvas.style.backgroundColor="#ddd";
document.body.appendChild(canvas); // On lie le canvas au corps de notre document html entier
// pour dessiner dans ce canvas, on a besoin de se que l'on appelle le contexte
// pour cela on crée une variable pour cela
ctx = canvas.getContext('2d');
snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
applee = new Apple([10,10]);
score =0;
refreshCanvas();
} // ---Fin de la fonction d'initialisation
function refreshCanvas()
{ // Début de refreshcanvas
console.log("Refresh Canvas");
snakee.advance(); // Pour diriger le serpent
snakee.draw(); // pour le dessiner à l'écran
if(snakee.checkCollision())
{
gameOver();
}
else
{
if (snakee.isEatingApple(applee))
{
score++;
snakee.ateApple = true;
do
{
applee.setNewPosition();
}
while(applee.isOnSnake(snakee));
}
ctx.clearRect(0,0,canvasWidth,canvasHeight); // On efface le contenu de notre canvas
drawScore();
snakee.draw();
applee.draw();
timeout=setTimeout(refreshCanvas,delay); // Exécute refreshCanvas dès que le délais est atteint
}
} // --- Fin de refrehcanvas
function gameOver()
{ // Début de gameOver
ctx.save();
ctx.font = "bold 70px sans-sherif";
ctx.fillStyle = "#000";
ctx.textAlign ="center";
ctx.textBaseline = "middle";
ctx.strokeStyle = "white";
ctx.lineWidth = 5;
var centreX = canvasWidth / 2;
var centreY = canvasHeight /2;
ctx.strokeText("Game Over", centreX, centreY-180);
ctx.fillText("Game Over", centreX, centreY-180);
ctx.font = "bold 30px sans-sherif";
ctx.strokeText("Appuyez sur la touche expace pour rejouer", centreX, centreY-120);
ctx.fillText("Appuyez sur la touche expace pour rejouer", centreX, centreY-120);
ctx.restore();
} // --- Fin de gameOver
function restart()
{ // Début de restart
snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
applee = new Apple([10,10]);
score =0;
clearTimeout(timeout); // réinitialise le timeout = même vitesse pour chaque partie
refreshCanvas();
} // --- Fin de restart
function drawScore()
{ // début de drawscore
ctx.save();
ctx.font = "bold 200px sans-sherif";
ctx.fillStyle ="gray";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
var centreX = canvasWidth / 2;
var centreY = canvasHeight / 2;
ctx.fillText(score.toString(),centreX,centreY);
ctx.restore();
} // --- Fin de drawscore
function drawBlock(ctx, position)
{ // Début de drawblock
var x = position[0]*blockSize;
var y = position[1]*blockSize;
ctx.fillRect(x,y,blockSize,blockSize);
} // --- Fin de drawblock
function Snake(body, direction)
{ // Début de snake
this.body = body;
this.direction = direction;
this.ateApple = false;
this.draw = function () // On va dessiner le corps du serpent
{
ctx.save(); // On sauvegarde le contexte qui existe
ctx.fillStyle="#ff0000"; // Le corps du serpent sera du couleur rouge
for (var i=0; i < this.body.length; i++) drawBlock(ctx,this.body[i]);
};
ctx.restore();
} // --- Fin de snake
this.advance = function () // déplacement du serpent
{ // Début de advance
// le bloc 6,4 est le premier élément de notre serpent
// la fonction slice effectue une copie de ce boc
var nextPosition = this.body[0].slice();
switch(this.direction)
{
case "left":
nextPosition[0] -= 1;
break;
case "right": // on ajout 1 pour se déplacer à droite
nextPosition[0] += 1;
break;
case "down":
nextPosition[1] += 1;
break;
case "up":
nextPosition[1] -= 1;
break;
default:
throw("Invalid Direction");
}
this.body.unshift(nextPosition);
if (!this.ateApple)
this.body.pop();
else
this.ateApplle = false;
}; // --- Fin de advance
this.setDirection = function(newDirection)
{
var allowedDirections;
switch(this.direction)
{
case "left":
case "right": // on ajout 1 pour se déplacer à droite
allowedDirections=["up","down"];
break;
case "down":
case "up":
allowedDirections=["left","right"];
break;
default:
throw ("Invalid Direction");
}
if (allowedDirections.indexOf(newDirection)>-1)
{
this.direction=newDirection; // alloue la direction permise
}
};
this.checkCollision=function()
{ // Début checkcollision
var wallCollision = false;
var snakeCollision = false;
var head = this.body[0];
var rest = this.body.slice(1);
var snakeX = head[0];
var snakeY = head[1];
var minX = minY = 0;
var maxX=widthInBlocks-1;
var maxY=heightInBlocks-1;
var isNotBetweenHorizontalWalls=snakeX<minX||snakeX>maxX;
var isNotBetweenVerticalWalls=snakeY<minY||snakeY>maxY;
if(isNotBetweenHorizontalWalls||isNotBetweenVerticalWalls)
wallCollision=true;
for(var i=0;i<rest.lenght;i++)
{
if(snakeX === rest[i][0] && snakeY === rest[i][1])
snakeCollision=true;
}
return wallCollision || snakeCollision;
}; // --- Fin de collision
this.isEatingApple = function(appleToEat)
{ // Début de isEatingApple
var head =this.bidy[0];
if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])
return true;
else
return false;
} // Fin de isEatingApple
function Apple(position)
{ // Début de Apple
this.position = position;
this.setNewPosition= function()
{//Début de SetNewposition
var newX = Math.round(Math.random()*(widthInBlocks-1));
var newY = Math.round(Math.random()*(heightInBlocks-1));
this.position = [newX,newY];
}; // Fin de setNewPosition
this.isOnSnake = function(snakeToCheck)
{ // Début de isOnSnake
var isOnSnake = false;
for (var i=0;i<snakeToCheck.body.lenght;i++)
{//Début de for
if (this.position[0] === snakeToCheck.body[i][0] && this.position[1] === snakeToCheck.body[i][1])
isOnSnake = true;
} // Fin du for
return isOnSnake;
}; // FIN de isOnSnake
this.draw = function()
{//Début de apple draw
ctx.save(); // sauvegarde du contexte du canvas
ctx.fillStyle = "33cc33"; // définir la couleur verte
ctx.beginPath(); // Un rond se constriot dofférement d'un rectangle
var radius = blockSize/2; // radius est le rayon du cercle
var x = this.position[0]*blocksize+radius;
var y = this.position[1]*blockSize+radius;
ctx.arc(x,y,radius,0,Math.PI*2,true);
ctx.fill();
ctx.restore(); // On restaure le contexte du canvas
}; //Début de apple draw
} // Fin de Apple
document.onkeydown = function handleKeyDown(e) // Détecte une touche du clavier enfoncée
{ // crochet de document.onkeydown
var key = e.keyCode; // nous renvoie le code de la touche employé
var newDirection;
switch (key)
{ // cochet du switch 03
case 37:
newDirection = "left"; // touche de flèche de gauche du clavier
break;
case 38:
newDirection = "up"; // touche flèche de haut du clavier
break;
case 39:
newDirection = "right"; // touche flèche de droite du clavier
break;
case 40:
newDirection = "down"; // touche flèche de bas du clavier
break;
case 32:
restart();
return;
default:
return; // On sort de la fonction en gardant la direction précédente
} // fin du crochet du switch 03
snakee.setDirection(newDirection); // serpent reçoit l
}; // cochet du document.onkeydown
} // fin du window.unload |
