diff --git a/assets/map/ice.jpg b/assets/map/ice.jpg new file mode 100644 index 0000000..08d0968 Binary files /dev/null and b/assets/map/ice.jpg differ diff --git a/script.js b/script.js index f793aaf..955c58a 100644 --- a/script.js +++ b/script.js @@ -84,6 +84,8 @@ const scoreTarget = byId("scoreTarget") // Get map texture const imgGrass = new Image(); imgGrass.src = './assets/map/grass.png'; +const imgIce = new Image(); +imgIce.src = './assets/map/ice.jpg'; // Get wall texture const imgWall = new Image(); @@ -301,19 +303,9 @@ async function startGame(gameID) { let pattern = ctx.createPattern(imgGrass, 'repeat'); ctx.fillStyle = pattern; ctx.fillRect(0, 0, canvas.width, canvas.height); + - // First, draw the grid - ctx.lineWidth = 0.3; - - for(let i = 0; i <= level.dimensions[1]; i++) { - drawLine(ctx, i*cell_width, 0, i*cell_width, canvas.height) - } - for(let i = 0; i <= level.dimensions[0]; i++) { - drawLine(ctx, 0, i*cell_height, canvas.width, i*cell_height, canvas.height) - } - - - // Now draw the map + // First draw the map for(let y = 0; y < map.length; y++) { for(let x = 0; x < map[y].length; x++) { @@ -330,8 +322,7 @@ async function startGame(gameID) { case ICE: case ICE_SNAKE: - ctx.fillStyle = "white"; - ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height) + ctx.drawImage(imgIce, x*cell_width, y*cell_height, cell_width, cell_height); // If the snake is on the cell, we must render it too. // That's why I put a condition to this break @@ -348,7 +339,10 @@ async function startGame(gameID) { if(headPos[0] == y && headPos[1] == x) { ctx.clearRect(x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2); // Restore the background - ctx.drawImage(imgGrass, x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2); + if(map[y][x] == ICE_SNAKE) + ctx.drawImage(imgIce, x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2); + else + ctx.drawImage(imgGrass, x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2); // Head Orientation if(key == "ArrowDown") @@ -368,6 +362,16 @@ async function startGame(gameID) { } } + + // Now, draw the grid + ctx.lineWidth = 0.3; + + for(let i = 0; i <= level.dimensions[1]; i++) { + drawLine(ctx, i*cell_width, 0, i*cell_width, canvas.height) + } + for(let i = 0; i <= level.dimensions[0]; i++) { + drawLine(ctx, 0, i*cell_height, canvas.width, i*cell_height, canvas.height) + } // Manage automated acceleration of snake