140 lines
3.2 KiB
JavaScript
140 lines
3.2 KiB
JavaScript
const info = document.getElementById("info");
|
|
const highscore = document.getElementById("highscore");
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const game = {
|
|
size: 15,
|
|
speed: 1000 / 15, // 15 frames per second
|
|
highscore: 0,
|
|
snake: {
|
|
body: [
|
|
[3, 7],
|
|
[4, 7],
|
|
[5, 7],
|
|
[6, 7],
|
|
[7, 7],
|
|
],
|
|
dir: null,
|
|
newdir: null,
|
|
},
|
|
apple: [12, 7],
|
|
};
|
|
|
|
// reset the game board (but not the highscore)
|
|
function reset() {
|
|
game.apple = [12, 7];
|
|
game.snake.body = [
|
|
[3, 7],
|
|
[4, 7],
|
|
[5, 7],
|
|
[6, 7],
|
|
[7, 7],
|
|
];
|
|
game.snake.dir = null;
|
|
game.snake.newdir = null;
|
|
}
|
|
|
|
// check if the x and y coordinate is part of the snek
|
|
function inSnake(x, y) {
|
|
for (let part of game.snake.body) {
|
|
if (part[0] === x && part[1] === y) return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// draw the game board
|
|
function draw() {
|
|
const size = 25;
|
|
ctx.clearRect(0, 0, 500, 500);
|
|
for (let i = 0; i < game.size; i++) {
|
|
for (let j = 0; j < game.size; j++) {
|
|
ctx.fillStyle = inSnake(i, j)
|
|
? "#38e070"
|
|
: i === game.apple[0] && j === game.apple[1]
|
|
? "#eb4034"
|
|
: "#333333";
|
|
ctx.fillRect(i * size, j * size, size, size);
|
|
}
|
|
}
|
|
}
|
|
|
|
// update the game board
|
|
function update() {
|
|
game.snake.dir = game.snake.newdir;
|
|
|
|
const b = game.snake.body;
|
|
const l = b[b.length - 1];
|
|
const next = move();
|
|
|
|
// check if the snek ate the apple
|
|
if (game.apple[0] === next[0] && game.apple[1] === next[1]) {
|
|
for (let i = 0; i < 30; i++) {
|
|
const x = Math.floor(Math.random() * game.size);
|
|
const y = Math.floor(Math.random() * game.size);
|
|
game.apple = [x, y];
|
|
if (inSnake(game.apple[0], game.apple[1])) break;
|
|
}
|
|
} else {
|
|
b.shift();
|
|
}
|
|
|
|
// check if the snek crashed into itself
|
|
if (inSnake(next[0], next[1])) {
|
|
reset();
|
|
}
|
|
|
|
// check if the snek fell out of the world
|
|
if (l[0] < 0 || l[0] >= game.size || l[1] < 0 || l[1] >= game.size) {
|
|
reset();
|
|
}
|
|
|
|
b.push(next); // move the snek
|
|
|
|
// update score display
|
|
if (game.dir !== null) {
|
|
const score = b.length - 5;
|
|
const highest = score > game.highscore ? score : game.highscore;
|
|
info.innerText = `${score < 15 ? "length" : "longth"}: ${score}`;
|
|
highscore.innerText = `${score > highscore ? "former highscore" : "highscore"}: ${highscore}`;
|
|
game.highscore = highest;
|
|
}
|
|
|
|
// calculate where the snek will move to
|
|
function move() {
|
|
const [x, y] = l;
|
|
switch (game.snake.dir) {
|
|
case "left":
|
|
return [x - 1, y];
|
|
case "right":
|
|
return [x + 1, y];
|
|
case "up":
|
|
return [x, y - 1];
|
|
case "down":
|
|
return [x, y + 1];
|
|
default:
|
|
return [x, y];
|
|
}
|
|
}
|
|
}
|
|
|
|
// change direction on keypress
|
|
document.addEventListener("keydown", (e) => {
|
|
const s = game.snake;
|
|
if (s.dir !== s.newdir) update();
|
|
switch (e.key) {
|
|
case "ArrowLeft":
|
|
return s.dir !== "right" ? (s.newdir = "left") : 0;
|
|
case "ArrowRight":
|
|
return s.dir !== "left" ? (s.newdir = "right") : 0;
|
|
case "ArrowUp":
|
|
return s.dir !== "down" ? (s.newdir = "up") : 0;
|
|
case "ArrowDown":
|
|
return s.dir !== "up" ? (s.newdir = "down") : 0;
|
|
}
|
|
});
|
|
|
|
// the main game loop
|
|
setInterval(() => {
|
|
update();
|
|
draw();
|
|
}, game.speed);
|