Initial Version from 2022-12-07 Stream

benrick · benrick · commit dcb830250e85 · 2022-12-09T10:22:36.000-05:00
diff --git a/app.js b/app.js
@@ -0,0 +1,4 @@
+import { Game } from "./game.js";
+
+const game = new Game(10, 10, 10, '#grid');
+
diff --git a/game.js b/game.js
@@ -0,0 +1,100 @@
+export class Game {
+
+    #rows
+    #columns
+    #numOfMines
+    #gridMeta
+    #isGameWon
+    #isGameOver
+
+    constructor(height, width, numOfMines, gridId) {
+        this.#rows = height;
+        this.#columns = width;
+        this.#numOfMines = numOfMines;
+        this.#gridMeta = [];
+        this.buildBoard(gridId);
+        this.#isGameWon = false;
+        this.#isGameOver = false;
+    }
+
+    buildBoard(gridId) {
+        const table = document.querySelector(gridId);
+        const cellsToBeMined = [];
+        for (let rowIndex = 0; rowIndex < this.#rows; rowIndex++) {
+            const row = document.createElement('tr');
+            table.appendChild(row);
+            this.#gridMeta.push([])
+            for (let colIndex = 0; colIndex < this.#columns; colIndex++) {
+                const cell = document.createElement('td');
+                cell.innerText = "⬛";
+                cell.dataset.number = 0;
+                cell.dataset.bomb = false;
+                cell.dataset.revealed = false;
+                cell.addEventListener('contextmenu', event => event.preventDefault(), false);
+                cell.addEventListener('mousedown', event => {
+                  if (event.button === 0) {
+                    this.reveal(cell);
+                  } else if (event.button === 2) {
+                    this.flag(cell);
+                  }
+                });
+
+                cellsToBeMined.push({ rowIndex, colIndex, cell });
+                this.#gridMeta[rowIndex].push(cell);
+
+                row.appendChild(cell);
+            }
+        }
+
+        cellsToBeMined
+            .sort(() => 0.5 - Math.random())
+            .slice(0, this.#numOfMines)
+            .forEach(cellData => {
+                cellData.cell.dataset.bomb = true;
+                this.safeIncrement(cellData.rowIndex+1, cellData.colIndex);
+                this.safeIncrement(cellData.rowIndex+1, cellData.colIndex+1);
+                this.safeIncrement(cellData.rowIndex+1, cellData.colIndex-1);
+                this.safeIncrement(cellData.rowIndex-1, cellData.colIndex);
+                this.safeIncrement(cellData.rowIndex-1, cellData.colIndex+1);
+                this.safeIncrement(cellData.rowIndex-1, cellData.colIndex-1);
+                this.safeIncrement(cellData.rowIndex, cellData.colIndex+1);
+                this.safeIncrement(cellData.rowIndex, cellData.colIndex-1);
+            });
+        
+        //this.revealAll();
+    }
+
+    safeIncrement(row, col) {
+      if (row >= this.#rows || col >= this.#columns || row < 0 || col < 0) {
+          return;
+      }
+      this.#gridMeta[row][col].dataset.number++;
+    }
+
+    revealAll() {
+        this.#gridMeta.forEach(row =>
+          row.forEach(cell =>
+            this.reveal(cell)))
+    }
+
+    reveal(cell) {
+        const nums = [ "🟦", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣" ];
+        if (cell.dataset.bomb === "true" && this.#isGameWon) {
+            cell.innerText = "💣";
+        } else if (cell.dataset.bomb === "true") {
+            cell.innerText = "💥";
+            this.#isGameOver = true;
+        } else {
+            cell.innerText = nums[cell.dataset.number];
+        }
+
+        cell.dataset.revealed = "true";
+    }
+
+    flag(cell) {
+        if (cell.dataset.revealed === "true") {
+            return;
+        }
+        cell.innerText = "🚩";
+    }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Minesweeper in JavaScript</title>
+    <script type="module" src="app.js" defer></script>
+</head>
+<body>
+    <table id="grid" style="font-size: 20pt;">
+    </table>
+</body>
+</html>
