index.html

<!DOCTYPE html>
<html>
<head>
    <title>Ambiguous Minesweeper</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; background: #222; color: white; font-family: sans-serif; }
        canvas { border: 4px solid #555; cursor: pointer; background: #eee;}
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        const TILE_SIZE = 40;
        const SIZEX = Math.floor(canvas.width / TILE_SIZE);
        const SIZEY = Math.floor(canvas.height / TILE_SIZE); // 10x10 grid
        const FIELD = SIZEX*SIZEY; //100

        const POS_MINES = Math.floor((8/100)*(FIELD)); // 8x100 -> 4x50 -> 2x25s
        const NEG_MINES = Math.floor((8/100)*(FIELD));

        canvas.width = SIZEX * TILE_SIZE;
        canvas.height = SIZEY * TILE_SIZE;

        let grid = [];
        let gameOver = false;

        function initGame() {
            grid = [];
            // Create empty grid
            for (let y = 0; y < SIZEY; y++) {
                grid[y] = [];
                for (let x = 0; x < SIZEX; x++) {
                    grid[y][x] = { x, y, mine: 0, revealed: false, flagged: false, count: 0 };
                }
            }

            // Place Positive Mines (+1)
            placeMines(POS_MINES, 1);
            // Place Negative Mines (-1)
            placeMines(NEG_MINES, -1);

            // Calculate Sums
            for (let y = 0; y < SIZEY; y++) {
                for (let x = 0; x < SIZEX; x++) {
                    if (grid[y][x].mine === 0) {
                        grid[y][x].count = getSum(x, y);
                    }
                }
            }
            draw();
        }

        function placeMines(count, type) {
            let placed = 0;
            while (placed < count) {
                let x = Math.floor(Math.random() * SIZEX);
                let y = Math.floor(Math.random() * SIZEY);
                if (grid[y][x].mine === 0) {
                    grid[y][x].mine = type;
                    placed++;
                }
            }
        }

        function getSum(x, y) {
            let sum = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    if (grid[y + i] && grid[y + i][x + j]) {
                        sum += grid[y + i][x + j].mine;
                    }
                }
            }
            return sum;
        }

        function floodFill(x, y) {
            if (x < 0 || x >= SIZEX || y < 0 || y >= SIZEY) return;
            const tile = grid[y][x];
            if (tile.revealed || tile.mine !== 0) return;

            tile.revealed = true;
            // Only continue filling if the sum is exactly 0
            if (tile.count === 0) {
                for (let i = -1; i <= 1; i++) {
                    for (let j = -1; j <= 1; j++) {
                        floodFill(x + j, y + i);
                    }
                }
            }
        }

        function valueToColor(v) {
            // Clamp to the allowed range – just in case.
            v = Math.max(-9, Math.min(9, Math.round(v)));

            // ----- colour anchors (in 0‑255 RGB) -----
            const gray   = [128, 128, 128]; // #808080
            const cyan   = [0x00, 0x00, 0xff]; // #08f  → (0,136,255)
            const orange = [0xff, 0x00, 0x00]; // #f80 → (255,136,0)

            // Choose the correct end‑point for the sign of v.
            const end = v < 0 ? cyan : orange;

            // Normalise the distance from the centre: 0 → 0, ±8 → 1.
            const t = Math.abs(v) / 8;

            // Linear interpolation for each channel.
            const r = Math.round(gray[0] + (end[0] - gray[0]) * t);
            const g = Math.round(gray[1] + (end[1] - gray[1]) * t);
            const b = Math.round(gray[2] + (end[2] - gray[2]) * t);

            // Convert back to a hex string.
            const toHex = n => n.toString(16).padStart(2, '0');
            return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let y = 0; y < SIZEY; y++) {
                for (let x = 0; x < SIZEX; x++) {
                    const tile = grid[y][x];
                    ctx.strokeStyle = "#999";
                    ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);

                    if (tile.revealed) {
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(x * TILE_SIZE + 1, y * TILE_SIZE + 1, TILE_SIZE - 2, TILE_SIZE - 2);
                        if (tile.mine !== 0) {
                            ctx.fillStyle = tile.mine > 0 ? "red" : "blue";
                            ctx.fillRect(x * TILE_SIZE + 1, y * TILE_SIZE + 1, TILE_SIZE - 2, TILE_SIZE - 2);
                        } else {
                            ctx.fillStyle = valueToColor(tile.count);
                            ctx.fillRect(x * TILE_SIZE + 1, y * TILE_SIZE + 1, TILE_SIZE - 2, TILE_SIZE - 2);
                        }
                    } else {
                        ctx.fillStyle = "#bbb";
                        ctx.fillRect(x * TILE_SIZE + 1, y * TILE_SIZE + 1, TILE_SIZE - 2, TILE_SIZE - 2);
                        if (tile.flagged) {
                            ctx.fillStyle = "orange";
                            ctx.fillRect(x * TILE_SIZE + 10, y * TILE_SIZE + 10, 20, 20);
                        }
                    }
                }
            }
        }

        canvas.addEventListener('mousedown', (e) => {
            if (gameOver) return initGame() || (gameOver = false);

            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((e.clientX - rect.left) / TILE_SIZE);
            const y = Math.floor((e.clientY - rect.top) / TILE_SIZE);
            const tile = grid[y][x];

            if (e.button === 2) { // Right click
                tile.flagged = !tile.flagged;
            } else { // Left click
                if (tile.flagged) return;
                if (tile.mine !== 0) {
                    revealAll();
                    alert("BOOM! Game Over.");
                    gameOver = true;
                } else {
                    floodFill(x, y);
                }
            }
            draw();
        });

        function revealAll() {
            grid.forEach(row => row.forEach(t => t.revealed = true));
        }

        // Prevent context menu on right click
        canvas.oncontextmenu = (e) => e.preventDefault();

        initGame();
    </script>
</body>
</html>