Tetris thing

2018-10-13 17:21:43 +01:00
parent 0e700cc56f
commit 7a72931f6e
4 changed files with 160 additions and 99 deletions
--- a/JavaScript/Snetris/index.js
+++ 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);