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 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