157 lines
4.1 KiB
JavaScript
157 lines
4.1 KiB
JavaScript
const c = document.getElementById('canv');
|
|
const ctx = c.getContext('2d');
|
|
|
|
/*<==== GAME CONSTANTS ====>*/
|
|
const CANVAS_SIZE = {x: 400, y: 600};
|
|
const GAME_SIZE = {x: 8, y: 12};
|
|
const BLOCK_SIZE = {x: CANVAS_SIZE.x / GAME_SIZE.x, y: CANVAS_SIZE.y / GAME_SIZE.y};
|
|
|
|
const GAME_STATE = 0; // 0 = playing, 1 = lost
|
|
const UPDATE_RATE = 5; // updates per second
|
|
|
|
const BACKGROUND_COLOUR = '#8D7F76';
|
|
const SNAKE_COLOUR = '#B62946';
|
|
const APPLE_COLOUR = '#2CC427';
|
|
|
|
/*<==== CLASS STRUCTURES ====>*/
|
|
class Apple {
|
|
constructor() {
|
|
|
|
}
|
|
|
|
spawn() {
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
}
|
|
}
|
|
|
|
class Snake {
|
|
constructor() {
|
|
this.tail = [{x: 0, y: 0}, {x: -1, y: 0}, {x: -2, y: 0}, {x: -3, y: 0}, {x: -4, y: 0}];
|
|
this.lastRemoved = {x: 1, y: 1};
|
|
this.direction = 1; // 0 = up, 1 = right, 2 = down, 3 = left
|
|
}
|
|
|
|
update() {
|
|
let newPos = {}
|
|
newPos.x = this.tail[0].x;
|
|
newPos.y = this.tail[0].y;
|
|
|
|
if (this.direction == 0) {
|
|
newPos.y = this.tail[0].y - 1;
|
|
} else if (this.direction == 1) {
|
|
newPos.x = this.tail[0].x + 1;
|
|
} else if (this.direction == 2) {
|
|
newPos.y = this.tail[0].y + 1;
|
|
} else {
|
|
newPos.x = this.tail[0].x - 1;
|
|
}
|
|
|
|
this.lastRemoved = this.tail.pop();
|
|
let newTail = [ ];
|
|
newTail.push(newPos);
|
|
|
|
for (let i = 0; i < this.tail.length; i++) {
|
|
newTail.push(this.tail[i]);
|
|
}
|
|
|
|
this.tail = newTail;
|
|
}
|
|
|
|
draw() {
|
|
for (let i = 0; i < this.tail.length; i++) {
|
|
if (this.tail[i].x < 0 || this.tail[i].y < 0 || this.tail[i].x > GAME_SIZE.x || this.tail[i].y > GAME_SIZE.y) {} else {
|
|
GameGrid[this.tail[i].x][this.tail[i].y] = 1;
|
|
}
|
|
}
|
|
if (this.lastRemoved.x < 0 || this.lastRemoved.y < 0 || this.lastRemoved.x > GAME_SIZE.x || this.lastRemoved.y > GAME_SIZE.y) {} else {
|
|
GameGrid[this.lastRemoved.x][this.lastRemoved.y] = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
class Block {
|
|
constructor(x, y) {
|
|
this.pos = {x: x, y: y}
|
|
}
|
|
}
|
|
|
|
/*<==== GAME INITIALIZATION ====>*/
|
|
let GameGrid = [ ]; // 0 = empty, 1 = snake, 2 = apple
|
|
for (let i = 0; i < GAME_SIZE.x; i++) {
|
|
GameGrid[i] = [ ];
|
|
for (let j = 0; j < GAME_SIZE.y; j++) {
|
|
GameGrid[i][j] = 0;
|
|
}
|
|
}
|
|
|
|
let ActiveSnake = new Snake();
|
|
let ActiveApple = new Apple();
|
|
|
|
/*<==== GAME LOGIC AND EVENT HANDLING ====>*/
|
|
let stop = false;
|
|
function Stop() {
|
|
stop = true;
|
|
}
|
|
function gameLoop() {
|
|
if (!stop) {
|
|
ActiveSnake.update();
|
|
ActiveSnake.draw();
|
|
draw();
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
for (let i = 0; i < GAME_SIZE.x; i++) {
|
|
for (let j = 0; j < GAME_SIZE.y; j++) {
|
|
switch (GameGrid[i][j]) {
|
|
case 0:
|
|
ctx.fillStyle = BACKGROUND_COLOUR;
|
|
break;
|
|
case 1:
|
|
ctx.fillStyle = SNAKE_COLOUR;
|
|
break;
|
|
case 2:
|
|
ctx.fillStyle = APPLE_COLOUR;
|
|
break;
|
|
}
|
|
if (GameGrid[i][j] != 2) {
|
|
ctx.fillRect(i * BLOCK_SIZE.x, j * BLOCK_SIZE.y, BLOCK_SIZE.x, BLOCK_SIZE.y);
|
|
} else {
|
|
ctx.fillRect(i * BLOCK_SIZE.x + BLOCK_SIZE.x / 3, j * BLOCK_SIZE.y + BLOCK_SIZE.y / 3, BLOCK_SIZE.x / 3, BLOCK_SIZE.y / 3);
|
|
}
|
|
// Debug for drawing squares
|
|
// ctx.fillStyle = '#FFFFFF';
|
|
// ctx.rect(i * BLOCK_SIZE.x, j * BLOCK_SIZE.y, BLOCK_SIZE.x, BLOCK_SIZE.y);
|
|
// ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleKeyDown(event) {
|
|
switch (event.key) {
|
|
case 'w':
|
|
case 'W':
|
|
ActiveSnake.direction = 0;
|
|
break;
|
|
case 'd':
|
|
case 'D':
|
|
ActiveSnake.direction = 1;
|
|
break;
|
|
case 's':
|
|
case 'S':
|
|
ActiveSnake.direction = 2;
|
|
break;
|
|
case 'a':
|
|
case 'A':
|
|
ActiveSnake.direction = 3;
|
|
break;
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
setInterval(gameLoop, 1000 / UPDATE_RATE);
|