Snake texture added

TODO : the orientation of the head
This commit is contained in:
Mathieu 2020-03-25 23:56:48 +01:00
parent d6e6752eb5
commit a7a45e5874

View File

@ -79,6 +79,10 @@ const imgWall = new Image();
imgWall.src = './assets/wall.jpg'; imgWall.src = './assets/wall.jpg';
const imgApple = new Image(); const imgApple = new Image();
imgApple.src = './assets/apple.png'; imgApple.src = './assets/apple.png';
const imgSnakeHead = new Image();
imgSnakeHead.src = './assets/snake_head.png';
const imgSnakeBody = new Image();
imgSnakeBody.src = './assets/snake_body.png';
/** /**
@ -269,36 +273,26 @@ async function startGame(gameID) {
switch(map[y][x]) { switch(map[y][x]) {
case WALL: case WALL:
ctx.fillStyle = "darkRed";
ctx.drawImage(imgWall, x*cell_width, y*cell_height, cell_width, cell_height); ctx.drawImage(imgWall, x*cell_width, y*cell_height, cell_width, cell_height);
break; break;
case FOOD: case FOOD:
ctx.fillStyle = "darkGreen";
ctx.drawImage(imgApple, x*cell_width, y*cell_height, cell_width, cell_height); ctx.drawImage(imgApple, x*cell_width, y*cell_height, cell_width, cell_height);
break; break;
case SNAKE: case SNAKE:
ctx.fillStyle = "orange" ctx.drawImage(imgSnakeBody, x*cell_width, y*cell_height, cell_width, cell_height);
ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height)
// Check if it is the head of the snake // Check if it is the head of the snake
// If it is the case, we draw an eye to the snake // If it is the case, we clear the rectangle and put its head instead
const headPos = snake[snake.length-1]; const headPos = snake[snake.length-1];
if(headPos[0] == y && headPos[1] == x) { if(headPos[0] == y && headPos[1] == x) {
ctx.fillStyle = "darkRed"; ctx.clearRect(x*cell_width, y*cell_height, cell_width, cell_height);
ctx.beginPath(); ctx.drawImage(imgGrass, x*cell_width, y*cell_height, cell_width, cell_height);
ctx.arc( ctx.drawImage(imgSnakeHead, x*cell_width, y*cell_height, cell_width, cell_height);
(x+0.5)*cell_width, // x
(y+0.5)*cell_height, // y
3, // width
0, // startAngle
2*Math.PI) // End angle
ctx.fill();
} }
break; break;