Refactored file structure and removed unnecessary code

js/game.js

@@ -0,0 +1,178 @@
+class Game {
+    constructor() {
+        this.g = new GameInfo(this);
+        this.p = this.g.player;
+
+        this.registerListeners();
+    }
+
+    draw() {
+        this.g.context.clearRect(0, 0, this.g.canvas.width, this.g.canvas.height);
+        this.drawMatrix(this.p.matrix, this.p.pos);
+    }
+
+    drawArena() {
+        this.g.contextBg.fillStyle = '#000';
+        this.g.contextBg.fillRect(0, 0, this.g.canvas.width, this.g.canvas.height);
+        this.drawMatrix(this.g.arena.field, {x: 0, y: 0}, this.g.contextBg);
+    }
+
+    drawHolding() {
+        this.g.contextHold.clearRect(0, 0, this.g.canvasHold.width, this.g.canvasHold.height);
+        const offset = centerOffset(this.p.holdingTile);
+        const x = 3 - (this.p.holdingTile[0].length / 2) + offset.x;
+        const y = 3 - (this.p.holdingTile.length / 2) + offset.y;
+        this.drawMatrix(this.p.holdingTile, {x: x, y: y}, this.g.contextHold);
+    }
+
+    drawMatrix(matrix, offset, useContext = this.g.context) {
+        matrix.forEach((row, y) => {
+            row.forEach((value, x) => {
+                if (value !== 0) {
+                    this.drawTile(x, y, offset, colors[value], matrix, useContext);
+                }
+            });
+        });
+    }
+
+    drawTile(x, y, offset, color, matrix, useContext = this.g.context) {
+        const ctx = useContext;
+        switch (this.g.theme) {
+            case "default":
+                ctx.fillStyle = color;
+                ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
+                break;
+            case "modern":
+                ctx.fillStyle = color;
+                drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
+                break;
+            case "snakes":
+                ctx.fillStyle = color;
+                let r1 = .15, // top right
+                    r2 = .15, // bottom right
+                    r3 = .15, // bottom left
+                    r4 = .15; // top left
+                // Is there a tile to the left?
+                if (matrix[y][x - 1] > 0) {
+                    r3 = 0;
+                    r4 = 0;
+                }
+                // Is there a tile to the right?
+                if (matrix[y][x + 1] > 0) {
+                    r1 = 0;
+                    r2 = 0;
+                }
+                // Is there a tile to the top?
+                if (matrix[y - 1] !== undefined && matrix[y - 1][x] > 0) {
+                    r1 = 0;
+                    r4 = 0;
+                }
+                // Is there a tile to the bottom?
+                if (matrix[y + 1] !== undefined && matrix[y + 1][x] > 0) {
+                    r2 = 0;
+                    r3 = 0;
+                }
+                drawRoundRect(ctx, x + offset.x, y + offset.y, 1, 1, [r1, r2, r3, r4]);
+                break;
+            default:
+                this.g.theme = "default";
+                this.drawTile(x, y, offset, color, matrix, ctx);
+                break;
+        }
+    }
+
+    drawUpcoming() {
+        this.g.contextUpcoming.clearRect(0, 0, this.g.canvasUpcoming.width, this.g.canvasUpcoming.height);
+        let offsetY = 0;
+        let offset;
+        this.g.upcomingTiles.forEach((tile) => {
+            offset = centerOffset(tile);
+            const x = 3 - (tile[0].length / 2) + offset.x;
+            const y = offsetY + 3 - (tile.length / 2) + offset.y;
+            this.drawMatrix(tile, {x: x, y: y}, this.g.contextUpcoming);
+            offsetY += 6;
+        });
+    }
+
+    gameOver() {
+        this.g.arena.field.forEach(row => row.fill(0));
+        timePassed = 0;
+        this.g.lastTimeUpdate = Date.now();
+        this.updateTime();
+        this.p.score = 0;
+        this.g.dropInterval = 1000;
+        this.updateScore();
+    }
+
+    merge(arena, player) {
+        player.matrix.forEach((row, y) => {
+            row.forEach((value, x) => {
+                if (value !== 0) {
+                    arena.field[y + player.pos.y][x + player.pos.x] = value;
+                }
+            });
+        });
+        this.drawArena();
+    }
+
+    registerListeners() {
+        // Keyboard controls
+        document.addEventListener('keydown', event => {
+            Object.keys(this.g.keys).map((objKey) => {
+                const keyBind = this.g.keys[objKey];
+                if (keyBind.keys.includes(event.keyCode)) {
+                    keyBind.action();
+                }
+            });
+        });
+    }
+
+    saveHighscore() {
+        if (getCookie("highscore").value < this.p.score) {
+            document.cookie = "highscore=" + this.p.score + "; max-age=" + 60 * 60 * 24 * 365 * 1000 + "; path=/;";
+        }
+    }
+
+    start() {
+        this.drawArena();
+        this.p.addTile();
+        this.p.addTile();
+        this.p.addTile();
+        this.p.reset();
+        this.g.startTime = Date.now();
+        this.update();
+        this.updateScore();
+    }
+
+    update(time = 0) {
+        if (!this.g.isPaused) {
+            const deltaTime = time - this.g.lastTime;
+            this.g.lastTime = time;
+
+            this.g.dropCounter += deltaTime;
+            if (this.g.dropCounter > this.g.dropInterval) {
+                this.p.drop();
+            }
+
+            this.updateTime();
+
+            this.draw();
+            requestAnimationFrame(this.update.bind(this));
+        }
+    }
+
+    updateScore() {
+        if (this.g.lastScore !== this.p.score) {
+            scoreUpdateAni();
+            this.g.lastScore = this.p.score;
+            this.saveHighscore();
+        }
+        document.getElementById('score').innerText = this.p.score.toString();
+    }
+
+    updateTime() {
+        timePassed += Date.now() - this.g.lastTimeUpdate;
+        timeElement.innerHTML = formatMillis(timePassed);
+        this.g.lastTimeUpdate = Date.now();
+    }
+}