COMMIT ACADEMY
Open in Telegram
Formations en OR relatives au numerique : Programmation Informatique, Infographie, Sécurité informatique , Marketing Digital et Bureautique. By @C0MM1T
Show more405
Subscribers
-124 hours
-47 days
-730 days
Posts Archive
Le jeu pend fin lorsque le serpent se mord ou sort des limites. Cela correspond a :
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);Pour tracer une ligne du point (X1,Y1) au point (X2,Y2), on utilise
context.beginPath();
context.moveTo(X1,Y1);
context.lineTo(X2,Y2);
context.stroke();
Ainsi, Pour tracer la grille, il faut :
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.stroke();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(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 longLes 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;
}function back(){
var t=[0];
for (i=0; i<=L; i++){
t[i]=X[i];
}
for (i=0; i<=L; i++){
X[i]=t[L-i];
}
for (i=0; i<=L; i++){
t[i]=Y[i];
}
for (i=0; i<=L; i++){
Y[i]=t[L-i];
}
}
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 9Ensuite 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();