From a7a45e5874b3b0d847523543fc0cc83e0625019c Mon Sep 17 00:00:00 2001
From: Mathieu <math.poke@gmail.com>
Date: Wed, 25 Mar 2020 23:56:48 +0100
Subject: [PATCH] Snake texture added TODO : the orientation of the head

---
 script.js | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

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;