diff --git a/assets/snake_body.png b/assets/snake/snake_body.png similarity index 100% rename from assets/snake_body.png rename to assets/snake/snake_body.png diff --git a/assets/snake_head.png b/assets/snake/snake_head_down.png similarity index 100% rename from assets/snake_head.png rename to assets/snake/snake_head_down.png diff --git a/assets/snake/snake_head_left.png b/assets/snake/snake_head_left.png new file mode 100644 index 0000000..b9470cb Binary files /dev/null and b/assets/snake/snake_head_left.png differ diff --git a/assets/snake/snake_head_right.png b/assets/snake/snake_head_right.png new file mode 100644 index 0000000..b58be15 Binary files /dev/null and b/assets/snake/snake_head_right.png differ diff --git a/assets/snake/snake_head_up.png b/assets/snake/snake_head_up.png new file mode 100644 index 0000000..78568d5 Binary files /dev/null and b/assets/snake/snake_head_up.png differ diff --git a/script.js b/script.js index 76e0b43..7598de2 100644 --- a/script.js +++ b/script.js @@ -79,10 +79,17 @@ 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'; + +let imgSnakeHeadUp = new Image(); +imgSnakeHeadUp.src = './assets/snake/snake_head_up.png'; +let imgSnakeHeadLeft = new Image(); +imgSnakeHeadLeft.src = './assets/snake/snake_head_left.png'; +let imgSnakeHeadRight = new Image(); +imgSnakeHeadRight.src = './assets/snake/snake_head_right.png'; +let imgSnakeHeadDown = new Image(); +imgSnakeHeadDown.src = './assets/snake/snake_head_down.png'; const imgSnakeBody = new Image(); -imgSnakeBody.src = './assets/snake_body.png'; +imgSnakeBody.src = './assets/snake/snake_body.png'; /** @@ -290,7 +297,15 @@ async function startGame(gameID) { if(headPos[0] == y && headPos[1] == x) { 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); + + if(key == "ArrowDown") + ctx.drawImage(imgSnakeHeadDown, x*cell_width, y*cell_height, cell_width, cell_height); + if(key == "ArrowUp" || !key) + ctx.drawImage(imgSnakeHeadUp, x*cell_width, y*cell_height, cell_width, cell_height); + if(key == "ArrowLeft") + ctx.drawImage(imgSnakeHeadLeft, x*cell_width, y*cell_height, cell_width, cell_height); + if(key == "ArrowRight") + ctx.drawImage(imgSnakeHeadRight, x*cell_width, y*cell_height, cell_width, cell_height); } break;