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 qui mettra fin au jeu sera :
function loose(Score){
alert('Score : '+Score);T=99999999;
}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);
}Cette fonction est la seule qui fait appel au canvas, nous allons donc voir en detail comment elle fonctionne
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)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.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)
👍1
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 longif(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=='ArrowDown'){move();Y[0]++;}
if(D=='ArrowRight'){move();X[0]++;}
if(D=='ArrowLeft'){move();X[0]--;}
Ce code permet au serpent de se deplacer.
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();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);👍1
le code complet sera donc :
<!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>
<script>
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
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();
function rand(){
return Math.floor(Math.random()*10);
}
function move() {
for (i=L; i>0; i--){
X[i]=X[i-1];
Y[i]=Y[i-1];
}
}
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];
}
}
function loose(Score){
alert('Score : '+Score);T=99999999;
}
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);
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);
}
play();
</script>👍2
snake.html
3.4 KB
Le fichier html (vous pouvez tester sur votre navigateur)