pierre/SnakeGame
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add ice texture + ice under snake head fixed

Browse Source
This commit is contained in:
Mathieu 2020-03-31 15:46:02 +02:00
parent b7f1dbf148
commit bf9f525d58
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/map/ice.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

34
script.js
View File

@ -84,6 +84,8 @@ const scoreTarget = byId("scoreTarget")
// Get map texture // Get map texture
const imgGrass = new Image(); const imgGrass = new Image();
imgGrass.src = './assets/map/grass.png'; imgGrass.src = './assets/map/grass.png';
const imgIce = new Image();
imgIce.src = './assets/map/ice.jpg';
// Get wall texture // Get wall texture
const imgWall = new Image(); const imgWall = new Image();
@ -301,19 +303,9 @@ async function startGame(gameID) {
let pattern = ctx.createPattern(imgGrass, 'repeat'); let pattern = ctx.createPattern(imgGrass, 'repeat');
ctx.fillStyle = pattern; ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
// First, draw the grid // First draw the map
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
for(let y = 0; y < map.length; y++) { for(let y = 0; y < map.length; y++) {
for(let x = 0; x < map[y].length; x++) { for(let x = 0; x < map[y].length; x++) {
@ -330,8 +322,7 @@ async function startGame(gameID) {
case ICE: case ICE:
case ICE_SNAKE: case ICE_SNAKE:
ctx.fillStyle = "white"; ctx.drawImage(imgIce, x*cell_width, y*cell_height, cell_width, cell_height);
ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height)
// If the snake is on the cell, we must render it too. // If the snake is on the cell, we must render it too.
// That's why I put a condition to this break // 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) { if(headPos[0] == y && headPos[1] == x) {
ctx.clearRect(x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2); ctx.clearRect(x*cell_width+1, y*cell_height+1, cell_width-2, cell_height-2);
// Restore the background // 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 // Head Orientation
if(key == "ArrowDown") 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 // Manage automated acceleration of snake