Untitled

\/ HTML \/


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            font-family: arial;
            text-align: center;
            margin: 10px;
        }
        #mainCanvas {
            border: 1px solid black;
            margin-top: 5px;
        }
        h1 {
            margin-bottom: 25px;
        }
        h2 {
            color: lightgreen;
            -webkit-text-stroke: 0.25px black;
            display: none;
        }
        h3 {
            color: red;
            -webkit-text-stroke: 0.25px black;
            display: none;
        }
    </style>
</head>
<body>
    <img src="defaultCube.jpg" id="defaultCube" style="display:none">
    <img src="flag.jpg" id="flagImg" style="display:none">
    <img src="blank.jpg" id="blank" style="display:none">
    <img src="mine.jpg" id="mine" style="display:none">
    <img src="hitMine.jpg" id="hitMine" style="display:none">
    <img src="6.jpg" id="6" style="display:none">
    <img src="1.jpg" id="1" style="display:none">
    <img src="2.jpg" id="2" style="display:none">
    <img src="3.jpg" id="3" style="display:none">
    <img src="4.jpg" id="4" style="display:none">
    <img src="5.jpg" id="5" style="display:none">
    <img src="6.jpg" id="6" style="display:none">
    <h1>Minesweeper!</h1>
    <canvas id="mainCanvas" height="250" width="250"></canvas>
    <p>Timer: <span id="timer">0</span></p>
    <button onClick="startGame();" id="startGame">Start</button>
    <button onClick="resetGame();">Reset</button>
    <button onClick="toggleFlag();" id="flagBtn" disabled>Turn on flag</button>
    <form>
        <span>Ammount of mines: </span><input type="number" id="inputNumMines" value="10" min="1" max="99999"><br>
        <span>Grid Size X: </span><input type="number" id="gridSizeX" value="10" min="4" max="100"><br>
        <span>Grid Size Y: </span><input type="number" id="gridSizeY" value="10" min="4" max="100">
    </form>
    <h2 id="youWin">You win!</h2>
    <h3 id="youLose">You lose!</h3>
    <script src="main.js"></script>
</body>
</html>


\/ JAVASCRIPT \/


// Variables
var squares = [];
var unchecked = [];
var mines = [];
var safe = [];
var numImg = [];
var flagged = [];
numImg[1] = document.getElementById("1");
numImg[2] = document.getElementById("2");
numImg[3] = document.getElementById("3");
numImg[4] = document.getElementById("4");
numImg[5] = document.getElementById("5");
numImg[6] = document.getElementById("6");
var mineImg = document.getElementById("mine");
var hitMineImg = document.getElementById("hitMine");
var blankImg = document.getElementById("blank");
var c = document.getElementById("mainCanvas");
var ctx = c.getContext("2d");
var defaultCube = document.getElementById("defaultCube");
var flagImg = document.getElementById("flagImg");
var mouseX;
var mouseY;
var numOfMines;
var youWin = document.getElementById("youWin");
var youLose = document.getElementById("youLose");
var startBtn = document.getElementById("startGame");
var flagBtn = document.getElementById("flagBtn");
var timerTxt = document.getElementById("timer");
var difficaltyInputBox = document.getElementById("inputNumMines");
var inGridSizeX = document.getElementById("gridSizeX");
var inGridSizeY = document.getElementById("gridSizeY");
var game = false;
var flag = false;
var subject;
var timerVar;

// Draw the default grid.
function drawGame() {
    c.width = inGridSizeX.value*25;
    c.height = inGridSizeY.value*25;
    flagged = [];
    unchecked = [];
    mines = [];
    safe = [];
    squares = [];
    var numOfSquares = 0;
    for (var i = 0; i < inGridSizeY.value; i++) {
        for (var ii = 0; ii < inGridSizeX.value; ii++) {
            ctx.drawImage(defaultCube, ii*25, i*25);
            squares[numOfSquares] = ii*25 + "," + i*25;
            numOfSquares++;
        }
    }
}

// Generate random locations of the mines.
function spawnMines() {
    mines = [];
    var dupe;
    for (var i = 0; i < numOfMines; i++) {
        var tmpMine = Math.floor(Math.random() * squares.length);
        if (mines.length == 0) {
            mines[0] = squares[tmpMine];
        } else {
            dupe = false;
            for (var ii = 0; ii < mines.length; ii++) {
                if (mines[ii] == squares[tmpMine]) {
                    i--;
                    dupe = true;
                    break;
                }
            }
            if (!dupe) {
                mines[i] = squares[tmpMine];
            }
        }
    }
}

// If the mine input-box has a value it will generate that ammount
// of mines but if there is no value it will ask the user via a prompt.
function askDifficalty() {
    var maxMines = (inGridSizeX.value*inGridSizeY.value)-1;
    if (difficaltyInputBox.value) {
        numOfMines = difficaltyInputBox.value;
    } else {
        numOfMines = prompt("How many mines do you want to spawn?");
    }
    if (!numOfMines) {
        numOfMines = 20;
    } else if (numOfMines > maxMines) {
        numOfMines = maxMines;
        difficaltyInputBox.value = maxMines;
    } else if (numOfMines < 1) {
        numOfMines = 1;
    }
}

// Toggle the flag button.
function toggleFlag() {
    if(flag) {
        flag = false;
        flagBtn.innerText = "Turn on flag";
    } else {
        flag = true;
        flagBtn.innerText = "Turn off flag";
    }
}

// Toggle wether or not a square is flagged.
function flagSquare(squareToFlag) {
    var alreadyFlagged = false;
    for (var i = 0; i < flagged.length; i++) {
        if (squareToFlag == flagged[i]) {
            alreadyFlagged = true;
            break;
        }
    }
    if (alreadyFlagged) {
        flagged = flagged.filter(function(item) {
            return item !== squareToFlag;
        });
        var flagCoords = squareToFlag.split(",");
        ctx.drawImage(defaultCube, flagCoords[0], flagCoords[1]);
    } else {
        flagged.push(squareToFlag);
        var flagCoords = squareToFlag.split(",");
        ctx.drawImage(flagImg, flagCoords[0], flagCoords[1]);
    }
}

// Get where the user clicked on the grid and translate
//that into a square from the grid and check if it's a mine or not.
function checkSquare(event) {
    if (game) {
        mouseX = event.clientX;
        mouseY = event.clientY;
        var canvasDim = c.getBoundingClientRect();
        if (mouseX > canvasDim.left && mouseX < canvasDim.right && mouseY > canvasDim.top && mouseY < canvasDim.bottom) {
            var mouseCanvasX = mouseX - canvasDim.left;
            var mouseCanvasY = mouseY - canvasDim.top;
            var subjectX = Math.ceil(mouseCanvasX/25)*25 - 25;
            var subjectY = Math.ceil(mouseCanvasY/25)*25 - 25;
            subject = subjectX + "," + subjectY;
            console.log("User clicked: " + subject);
            if (!discovered(subject)) {
                if (flag) {
                    flagSquare(subject);
                } else {
                    var isFlagged = false;
                    for (var i = 0; i < flagged.length; i++) {
                        if (flagged[i] == subject) {
                            isFlagged = true;
                            break;
                        }
                    }
                    if (!isFlagged) {
                        if (isMine(subject)) {
                            loseGame(subjectX, subjectY);
                        } else {
                            drawSafe(subject);
                        }
                    } else {
                        console.log("Square is flagged!");
                    }
                }
            }
        }
    }
}

// Determine wether there is a mine next to the safe square
// then set the apropriate image (Blank if 0 mines next to square).
function drawSafe(safeSquare) {
    var safeSquareCoords = safeSquare.split(",");
    var minesNext = borderingBombs(safeSquareCoords);
    if (minesNext == 0) {
        checkBlanks(safeSquare);
        //ctx.drawImage(blankImg, safeSquareCoords[0], safeSquareCoords[1]);
        //safe.push(safeSquare);
    } else if (minesNext > 0) {
        if (!discovered(safeSquare)) {
            ctx.drawImage(numImg[minesNext], safeSquareCoords[0], safeSquareCoords[1]);
            safe.push(safeSquare);
        }
    }
    if (safe.length == squares.length - mines.length) {
        winGame();
    }
}

function borderingBombs(safeSquareCoords) {
    var minesNext = 0;
    for (var i = 0; i < mines.length; i++) {
        var mineCoords = mines[i].split(",");
        if (mineCoords[0] - 25 == safeSquareCoords[0]) {
            if (mineCoords[1] == safeSquareCoords[1]) {
                // Left
                minesNext++;
            } else if (mineCoords[1] - 25 == safeSquareCoords[1]) {
                // Top Left
                minesNext++;
            } else if (mineCoords[1] == safeSquareCoords[1] - 25) {
                // Bottom Left
                minesNext++;
            }
        } else if (safeSquareCoords[0] - 25 == mineCoords[0]) {
            if (mineCoords[1] == safeSquareCoords[1]) {
                // Right
                minesNext++;
            } else if (mineCoords[1] - 25 == safeSquareCoords[1]) {
                // Right Top
                minesNext++;
            } else if (mineCoords[1] == safeSquareCoords[1] - 25) {
                // Bottom Right
                minesNext++;
            }
        } else if (mineCoords[1] - 25 == safeSquareCoords[1] && mineCoords[0] == safeSquareCoords[0]) {
            // Bottom
            minesNext++;
        } else if (safeSquareCoords[1] - 25 == mineCoords[1] && mineCoords[0] == safeSquareCoords[0]) {
            // Top
            minesNext++;
        }
    }
    return minesNext;
}

// Discover all blanks touching blanks
function checkBlanks(blnkSquare) {
    if (!discovered(blnkSquare)) {
        var blnkSquareCoords = blnkSquare.split(",");
        safe.push(blnkSquare);
        ctx.drawImage(blankImg, blnkSquareCoords[0], blnkSquareCoords[1]);
        if (borderingBombs(blnkSquare) == 0) {
            runOffset(blnkSquareCoords, 0, -25); // Top
            runOffset(blnkSquareCoords, 0, 25); // Bottom
            runOffset(blnkSquareCoords, 25, 0); // Right
            runOffset(blnkSquareCoords, -25, 0); // Left
            runOffset(blnkSquareCoords, -25, 25);
            runOffset(blnkSquareCoords, 25, -25);
        }
    }
}

function runOffset(origin, xOffset, yOffset) {
    var newBlnkSquare = origin;
    newBlnkSquare[0] = parseInt(newBlnkSquare[0])+xOffset;
    newBlnkSquare[1] = parseInt(newBlnkSquare[1])+yOffset;
    outBlnkSquare = newBlnkSquare[0] + "," + newBlnkSquare[1];
    if (newBlnkSquare[0] >= 0 && newBlnkSquare[1] >= 0 && newBlnkSquare[0] < 250 && newBlnkSquare[1] < 250) {
        if (!isMine(outBlnkSquare)) {
            drawSafe(outBlnkSquare);
        }
    }
}

function isMine(isMine) {
    for (var i = 0; i < mines.length; i++) {
        if (isMine == mines[i]) {
            return true;
        }
    }
    return false;
}

function discovered(diCoords) {
    for (var i = 0; i < safe.length; i++) {
        if(diCoords == safe[i]) {
            return true;
        }
    }
    return false;
}

// Timer, goes up in secconds when the game is in play.
function timer() {
    var seconds = new Date().getTime(), last = seconds, intrvl = setInterval(function() {
        if (!game) {
            clearInterval(intrvl);
            return;
        } else {
            var now = new Date().getTime();
            last = now;
            var timerOutput = now - seconds;
            timerOutput = Math.round(timerOutput / 1000);
            timerTxt.innerHTML = timerOutput;
            timerVar = timerOutput;
        }
    }, 1000);
}

// Called when you press an unflagged mine, will stop the game
// and display all the mines on the grid.
function loseGame(mineHitX, mineHitY) {
    for (var i = 0; i < mines.length; i++) {
        var tmpMineCoords = mines[i].split(",");
        ctx.drawImage(mineImg, tmpMineCoords[0], tmpMineCoords[1]);
    }
    ctx.drawImage(hitMineImg, mineHitX, mineHitY);
    startBtn.disabled = true;
    flagBtn.disabled = true;
    game = false;
    youLose.style.display = "block";
}

// Called when all the safe squares have been discovered.
function winGame() {
    startBtn.disabled = true;
    flagBtn.disabled = true;
    youWin.style.display = "block";
    showMines();
    game = false;
}

// Called when the start button is pressed, it will disable that button,
// set all the variables and call all the functions necessary to start the game.
function startGame() {
    flagBtn.disabled = false;
    startBtn.disabled = true;
    difficaltyInputBox.disabled= true;
    inGridSizeX.disabled= true;
    inGridSizeY.disabled= true;
    game = true;
    drawGame();
    askDifficalty();
    spawnMines();
    timer();
}

// Stop the game.
function resetGame() {
    drawGame();
    game = false;
    flagBtn.disabled = true;
    startBtn.disabled = false;
    difficaltyInputBox.disabled= false;
    inGridSizeX.disabled= false;
    inGridSizeY.disabled= false;
    timerTxt.innerHTML = 0;
    youWin.style.display = "none";
    youLose.style.display = "none";
    console.log("\n\n ----  Game Reset! ---- \n\n");
}

// Show all the mines on grid.
function showMines() {
    for (var i = 0; i < mines.length; i++) {
        var tmpMineCoords = mines[i].split(",");
        ctx.drawImage(mineImg, tmpMineCoords[0], tmpMineCoords[1]);
    }
}

// Listen for clicks.
document.addEventListener("click", checkSquare);

// Initialize grid.
drawGame();