diff --git a/JavaScript/Tetris-Snake/index.html b/JavaScript/Snetris/index.html similarity index 85% rename from JavaScript/Tetris-Snake/index.html rename to JavaScript/Snetris/index.html index e2d2a25..3e0aeaf 100644 --- a/JavaScript/Tetris-Snake/index.html +++ b/JavaScript/Snetris/index.html @@ -3,12 +3,12 @@ - Snake Tetris + Snetris - + - \ No newline at end of file + diff --git a/JavaScript/Snetris/index.js b/JavaScript/Snetris/index.js new file mode 100644 index 0000000..4c11ae5 --- /dev/null +++ b/JavaScript/Snetris/index.js @@ -0,0 +1,156 @@ +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); diff --git a/JavaScript/Tetris-Snake/style.css b/JavaScript/Snetris/style.css similarity index 85% rename from JavaScript/Tetris-Snake/style.css rename to JavaScript/Snetris/style.css index 00da525..8dc683f 100644 --- a/JavaScript/Tetris-Snake/style.css +++ b/JavaScript/Snetris/style.css @@ -3,7 +3,7 @@ body { } canvas { - background-color: #8D7F76; + background-color: #8D7F76; position: absolute; display: block; margin: auto; diff --git a/JavaScript/Tetris-Snake/index.js b/JavaScript/Tetris-Snake/index.js deleted file mode 100644 index a1def43..0000000 --- a/JavaScript/Tetris-Snake/index.js +++ /dev/null @@ -1,95 +0,0 @@ -const c = document.getElementById('canv'); -const ctx = c.getContext('2d'); - -/*<==== DEFINING 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 = 20; // updates per second - -const BACKGROUND_COLOUR = '#8D7F76'; -const SNAKE_COLOUR = '#B62946'; -const APPLE_COLOUR = '#2CC427'; - -/*<==== DEFINING CLASS STRUCTURES ====>*/ -class Apple { - constructor() { - - } - - spawn() { - - } - - update() { - - } -} - -class Snake { - constructor() { - this.snake = [ ]; - this.direction = 2; // 0 = up, 1 = left, 2 = down, 3 = right - this.pos = {x: 0, y: 0}; - } - - spawn() { - - } - - freeze() { - - } - - update() { - - } -} - -class Block { - constructor(x, y) { - this.pos = {x: x, y: y}; - } -} - -/*<==== GAME INITIALIZATION ====>*/ -let GameGrid = [ [] ]; // 0 = empty, 1 = snake / block, 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 ====>*/ -function gameLoop() { - -} - -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);