COMMIT ACADEMY

if(D=='ArrowUp'){move();Y[0]--;} if(D=='ArrowDown'){move();Y[0]++;} if(D=='ArrowRight'){move();X[0]++;} if(D=='ArrowLeft'){move();X[0]--;} Ce code permet au serpent de se deplacer.

if (X[0]==x && Y[0]==y){ L++; while(p==0){ x=rand(),y=rand();p=1; for (i=0; i<=L; i++){ if(x==X[i] && y==Y[i]) p=0; } } } p=0; } ce code attribut a la case d'or une nouvelle position libre à chaque fois que le serpent la touche, devenant ainsi plus long

Les carrés qui sont tacés ne séfacent pas tous seuls quand le serpent se deplace. Pour les effacer il faut utiliser :

context.clearRect(

PosX, PosY, tailleX, tailleY

);

Si on ne le fais pas, le serpent va paraître toujours plus long en se déplaçant (sans avoir a toucher la case d'orée)

Pour tracer un carré, il faut utiliser : context.fillRect(position_x, position_y, taille_x, taille_y); Dans ce code les cases étaient de 50x50 (taille) et bien sûr les positions changeaient avec le temps.

Pour tracer un carré, il faut utiliser : context.fillRect(position_x, position_y, taille_x, taille_y); Dans ce code les cases étaient de 50x50 (taille) et bien sûr les positions changeaient avec le temps.

en canvas pour choisir la couleur des elements on utilise la fonction context.fillStyle = "..."; il faut remplacer les points par un nom de couleur en anglais (dans ce code j'ai utilisé gold, green et black)

Cette fonction est la seule qui fait appel au canvas, nous allons donc voir en detail comment elle fonctionne

La fonction la plus complexe est celle celle ou se déroulera réellement le jeu : function play(){ context.clearRect(X[L]*S, Y[L]*S, 50, 50); if(D=='ArrowUp'){move();Y[0]--;} if(D=='ArrowDown'){move();Y[0]++;} if(D=='ArrowRight'){move();X[0]++;} if(D=='ArrowLeft'){move();X[0]--;} if (X[0]==x && Y[0]==y){ L++; while(p==0){ x=rand(),y=rand();p=1; for (i=0; i<=L; i++){ if(x==X[i] && y==Y[i]){ p=0; } } } p=0; } context.fillStyle = "gold"; context.fillRect(x*S, y*S, 50, 50); context.fillStyle = "green"; context.fillRect(X[0]*S, Y[0]*S, 50, 50); context.fillRect(X[1]*S, Y[1]*S, 50, 50); context.fillRect(X[2]*S, Y[2]*S, 50, 50); context.strokeStyle = "black"; context.beginPath(); for (i = 0; i<=10; i++) { context.moveTo(i*S, 0); context.lineTo(i*S, 500); } for (i = 0; i<=10; i++) { context.moveTo(0,i*S); context.lineTo(500,i*S); } context.closePath(); context.stroke(); for (i=1; i<=L; i++){ if(X[i]==X[0] && Y[i]==Y[0]){ loose(L); } } if (X[0]>9 || X[0]<0 || Y[0]>9 || Y[0]<0) {loose(L)} var time = setTimeout(play, T); }

La fonction qui mettra fin au jeu sera : function loose(Score){ alert('Score : '+Score);T=99999999; }

La fonction back() permet au serpent d'inverser son sens de déplacement. Par exemple, si le serpent suivait la direction rouge et le joueur appuis sur la fleche à gauche le serpent suivra la direction bleu, sa tête sera à la place de sa queue et inversement.

Pour diriger le serpent la fonction sera : window.addEventListener("keydown", function(event){ if(event.code=='ArrowUp'){ if(D=='ArrowDown'){ if(X[L]-X[L-1]<0){D='ArrowLeft'} if(X[L]-X[L-1]>0){D='ArrowRight'} if(Y[L]-Y[L-1]<0){D='ArrowUp'} if(Y[L]-Y[L-1]>0){D='ArrowDown'} back(); }else{D=event.code;} } if(event.code=='ArrowDown'){ if(D=='ArrowUp'){ if(X[L]-X[L-1]<0){D='ArrowLeft'} if(X[L]-X[L-1]>0){D='ArrowRight'} if(Y[L]-Y[L-1]<0){D='ArrowUp'} if(Y[L]-Y[L-1]>0){D='ArrowDown'} back(); }else{D=event.code;} } if(event.code=='ArrowLeft'){ if(D=='ArrowRight'){ if(X[L]-X[L-1]<0){D='ArrowLeft'} if(X[L]-X[L-1]>0){D='ArrowRight'} if(Y[L]-Y[L-1]<0){D='ArrowUp'} if(Y[L]-Y[L-1]>0){D='ArrowDown'} back(); }else{D=event.code;} } if(event.code=='ArrowRight'){ if(D=='ArrowLeft'){ if(X[L]-X[L-1]<0){D='ArrowLeft'} if(X[L]-X[L-1]>0){D='ArrowRight'} if(Y[L]-Y[L-1]<0){D='ArrowUp'} if(Y[L]-Y[L-1]>0){D='ArrowDown'} back(); }else{D=event.code;} } }, true); Vous avez surement remarque la fonction back(). Elle intervient lorsque le serpent dois aller en sens inverse.

La case dorée devra prendre une position aléatoire à chaque fois que le serpent la touche. il nous faut donc une fonction pour générer un nombre aléatoire. function rand(){ return Math.floor(Math.random()*10); } cette fonction va générer un nombre entier aléatoire entre 0 et 9

Ensuite il faut initialiser les variables que nous allons utiliser. (Vous pouvez utiliser d'autres noms pour vos variables) var S=50, T=400, D='ArrowLeft', L=2,p=0; var X=[5,6,7], Y=[5,5,5]; var x=rand(),y=rand();

Pour lier la balise canvas au JavaScript il faut ajouter les lignes suivantes : var canvas = document.querySelector('#canvas'); var context = canvas.getContext('2d');

Le code JavaScript sera place dans les balises

Code HTML : <!DOCTYPE html> <html> <head> <title>Jeu du Serpent</title> </head> <body> <canvas id="canvas" width="500" height="500"> <p>Désolé, votre navigateur ne supporte pas Canvas. Mettez-vous jour</p> </canvas></body> </html>

Il est important que vous soyez attentif pour pouvoir comprendre la suite. le jeu sera créé en HTML et le script sera en JavaScript. Les codes sources suffira de cliquer pour copier. Je vous fournirai le code complet à la fin. L'essentiel est de comprendre le processus.

On va créer notre premier jeu avec le HTML et le JavaScript.