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

Render snake

Browse Source
This commit is contained in:
Pierre HUBERT 2020-03-23 15:17:50 +01:00
parent f9510900be
commit ddaad26374
3 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
levels/1.json
View File

@ -9,9 +9,7 @@
[20, 20]
],
"snake": [
[6,10],
[6,11],
[6,12]
[4,2], [4,1], [3,1], [2,1]
]
}

6
levels/2.json
View File

@ -10,9 +10,9 @@
[10,12]
],
"snake": [
[60,60],
[60,59],
[60,58]
[6,6],
[6,5],
[6,4]
]
}

35
script.js
View File

@ -122,7 +122,10 @@ async function startGame(gameID) {
*/
let interval = setInterval(() => step(), level.delay);
function step() {
console.log("render")
if(!canvas.isConnected)
clearInterval(interval)
// Redraw screen
ctx.clearRect(0, 0, canvas.width, canvas.height)
@ -137,10 +140,11 @@ async function startGame(gameID) {
// Now draw the map
for(let y = 0; y < map.length; y++) {
for(let x = 0; x < map[y].length; x++) {
for(let y = 1; y <= map.length; y++) {
for(let x = 1; x <= map[y-1].length; x++) {
switch(map[y][x]) {
// Adapt rendering to the element to display
switch(map[y-1][x-1]) {
case WALL:
ctx.fillStyle = "darkRed";
@ -153,7 +157,28 @@ async function startGame(gameID) {
break;
case SNAKE:
ctx.fillStyle = "orange"
ctx.fillRect(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
const headPos = snake[snake.length-1];
if(headPos[0] == y-1 && headPos[1] == x-1) {
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();
console.log(x, y)
}
break;
}
@ -168,6 +193,10 @@ async function startGame(gameID) {
*/
function changeWindow() {
// Make sure there are not canvas left in the background (to make sure
// no interval is running for an old game)
canvasTarget.innerHTML = ""
// Try to get game ID
const gameID = Number(window.location.hash.substr(1));