diff --git a/script.js b/script.js index 908a44f..76e0b43 100644 --- a/script.js +++ b/script.js @@ -79,6 +79,10 @@ const imgWall = new Image(); imgWall.src = './assets/wall.jpg'; const imgApple = new Image(); 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,35 +273,25 @@ async function startGame(gameID) { switch(map[y][x]) { case WALL: - ctx.fillStyle = "darkRed"; ctx.drawImage(imgWall, x*cell_width, y*cell_height, cell_width, cell_height); break; case FOOD: - ctx.fillStyle = "darkGreen"; ctx.drawImage(imgApple, x*cell_width, y*cell_height, cell_width, cell_height); break; case SNAKE: - ctx.fillStyle = "orange" - ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height) + ctx.drawImage(imgSnakeBody, x*cell_width, y*cell_height, cell_width, cell_height); // 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]; if(headPos[0] == y && headPos[1] == x) { - ctx.fillStyle = "darkRed"; - ctx.beginPath(); - ctx.arc( - (x+0.5)*cell_width, // x - (y+0.5)*cell_height, // y - 3, // width - 0, // startAngle - 2*Math.PI) // End angle - ctx.fill(); + ctx.clearRect(x*cell_width, y*cell_height, cell_width, cell_height); + ctx.drawImage(imgGrass, x*cell_width, y*cell_height, cell_width, cell_height); + ctx.drawImage(imgSnakeHead, x*cell_width, y*cell_height, cell_width, cell_height); } - break;