Mon serpent ne s'affiche plus

[SkyKru]

Bonjour,

Je suis une formation en ligne pour apprendre le JS et en fait tout fonctionnait bien jusqu'à que j'arrive à la partie ou on annexe les touches afin de diriger le serpent et désormais je n'ai plus rien qui s'affiche à l'écran ...

Quelqu'un peut-il m'aider?

Voici mon code:

window.onload = function()

var canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30;
var ctx;
var delay = 1000;
var snakee;

init();

function init()
{
canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.border= "1px solid";
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
snakee = new Snake([[6,4],[5,4],[4,4]],"right");
refreshCanvas();
}

function refreshCanvas()
{
ctx.clearRect(0,0,canvasWidth,canvasHeight);
snakee.advance();
snakee.draw();
setTimeout(refreshCanvas,delay);
}

function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x, y, blockSize, blockSize);
}

function Snake(body, direction)
{
this.body = body;
this.direction = direction;
this.draw = function()
{
ctx.save();
ctx.fillStyle ="#ff0000";
for(var i=0; i < this.body.length; i++)
{
drawBlock(ctx, this.body);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();
switch(this.direction)
{
case "left":
nextPosition[0] -= 1;
break;
case "right":
nextPosition[0] += 1;
break;
case "down":
nextPosition[0] += 1;
break;
case "up":
nextPosition[0] -= 1;
break;
default:
throw("Invalid Direction");
}
this.body.unshift(nextPosition);
this.body.pop();
};
this.setDirection = function(newDirection)
{
var allowDirection;
switch(thisDirection)
{
case "left":
case "right":
allowDirections = ["up","down"];
break;
case "down":
case "up":
allowDirections = ["left","right"];
break;
default:
throw("Invalid Direction");
}
if(allowDirections.indexOf(newDirection) > -1)
{
this.direction = newDirection;
}
};

}


document.onkeydown = function handleKeydown(e)
{
var key = e.keyCode;
var newDirection;
switch(key)
{
case 37:
newDirection ="left";
break;
case 38:
newDirection ="up";
break;
case 39:
newDirection ="right";
break;
case 40:
newDirection ="down";
break;
default:
return;

}
snakee.setDirection(newDirection);

};

[FerminProsacco]

En regardant votre code, j'ai remarqué quelques erreurs qui pourraient empêcher le jeu de fonctionner correctement.

• Vous avez oublié de fermer la fonction window.onload avec une accolade } à la fin du fichier.

• Vous avez utilisé la variable thisDirection au lieu de this.direction dans la fonction this.setDirection.

• Vous avez inversé les cas down et up dans le switch de la fonction this.advance.

• Vous avez utilisé un emoji key au lieu d'une parenthèse ) dans le switch de la fonction handleKeydown.

Voici le code corrigé:

window.onload = function() {

var canvasWidth = 900;
var canvasHeight = 600;
var blockSize = 30;
var ctx;
var delay = 1000;
var snakee;

init();

function init()
{
canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
canvas.style.border= "1px solid";
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
snakee = new Snake([[6,4],[5,4],[4,4]],"right");
refreshCanvas();
}

function refreshCanvas()
{
ctx.clearRect(0,0,canvasWidth,canvasHeight);
snakee.advance();
snakee.draw();
setTimeout(refreshCanvas,delay);
}

function drawBlock(ctx, position)
{
var x = position[0] * blockSize;
var y = position[1] * blockSize;
ctx.fillRect(x, y, blockSize, blockSize);
}

function Snake(body, direction)
{
this.body = body;
this.direction = direction;
this.draw = function()
{
ctx.save();
ctx.fillStyle ="#ff0000";
for(var i=0; i < this.body.length; i++)
{
drawBlock(ctx, this.body);
}
ctx.restore();
};
this.advance = function()
{
var nextPosition = this.body[0].slice();
switch(this.direction)
{
case "left":
nextPosition[0] -= 1;
break;
case "right":
nextPosition[0] += 1;
break;
case "down":
nextPosition[1] += 1;
break;
case "up":
nextPosition[1] -= 1;
break;
default:
throw("Invalid Direction");
}
this.body.unshift(nextPosition);
this.body.pop();
};
this.setDirection = function(newDirection)
{
var allowDirection;
switch(this.direction)
{
case "left":
case "right":
allowDirections = ["up","down"];
break;
case "down":
case "up":
allowDirections = ["left","right"];
break;
default:
throw("Invalid Direction");
}
if(allowDirections.indexOf(newDirection) > -1)
{
this.direction = newDirection;
}
};

}


document.onkeydown = function handleKeydown(e)
{
var key = e.keyCode;
var newDirection;
switchkey
{
case 37:
newDirection ="left";
break;
case 38:
newDirection ="up";
break;
case 39:
newDirection ="right";
break;
case 40:
newDirection ="down";
break;
default:
return;

}
snakee.setDirection(newDirection);

};

} // end of window.onload function