//Made by JtheDroid var canvas; var ctx; var gridProperties; var gridSizeX; var gridSizeY; var grid; var mouseOverTile; var lost; var won; var firstClick; var shareOfBombs; var clickInverted; var totalBombs; var totalBombsDisplay; var time; var timeDisplay; var showSettings; window.onload = function() { alert("Minesweeper by JtheDroid\n\nGoal:\nUncover all tiles without finding a bomb\n\n\nClick on tiles to uncover them. If you know where a bomb is, change the mode (orange button) and flag the tile so you don't forget the position\n\n\n When you have flagged all bombs or uncovered all other tiles, you win!\n\nHave fun!"); gridSizeX = gridSizeY = 9; shareOfBombs = 0.12; clickInverted = false; time = 0; showSettings = true; canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); var size = (innerHeight < innerWidth) ? innerHeight : innerWidth; canvas.width = canvas.height = size*0.99; canvas.addEventListener('mousemove', function(evt) { var mousePos = calcMousePos(evt); mouseOverTile = getTileAtPos(mousePos.x,mousePos.y); }); canvas.addEventListener('click',function() { if(lost || won) reset(); else if(mouseOverTile) click(mouseOverTile); //if mouseOverTile is defined, perform the action }); canvas.addEventListener('contextmenu',function() { if(lost || won) reset(); else if(mouseOverTile) flag(mouseOverTile); //if mouseOverTile is defined, perform the action return false; }); var settings = document.getElementById("settings"); var settingsButton = document.getElementById("settingsButton"); function setSettingsDisplay() { if(showSettings){ settings.style.display = "block"; settingsButton.value = "Hide settings"; } else { settings.style.display = "none"; settingsButton.value = "Show settings"; } } settingsButton.addEventListener('click',function() { showSettings = !showSettings; setSettingsDisplay(); }); setSettingsDisplay(); totalBombsDisplay = document.getElementById("bombs"); timeDisplay = document.getElementById("time"); setTime(); var inputDifficulty = document.getElementById("inputDifficulty"); document.getElementById("buttonDifficulty").addEventListener('click',function() { shareOfBombs = parseFloat(inputDifficulty.value,10)/100; reset(); }); inputDifficulty.value = shareOfBombs*100; var clickActionText = document.getElementById("clickActionText"); function setClickActionDiv(){ if(clickInverted){ clickActionText.innerText = "Click to flag"; document.getElementById("clickAction").style.background = "orange"; } else{ clickActionText.innerText = "Click to uncover"; document.getElementById("clickAction").style.background = "green"; } } setClickActionDiv(); var uncoverButton = document.getElementById("uncoverButton"); uncoverButton.addEventListener('click',function() { clickInverted = false; setClickActionDiv(); }); var flagButton = document.getElementById("flagButton"); flagButton.addEventListener('click',function() { clickInverted = true; setClickActionDiv(); }); var resetButton = document.getElementById("resetButton"); resetButton.addEventListener('click',reset); var buttonAmount = document.getElementById("buttonAmount"); var inputXAmount = document.getElementById("inputXAmount"); var inputYAmount = document.getElementById("inputYAmount"); buttonAmount.addEventListener('click',function() { gridSizeX = parseInt(inputXAmount.value,10); gridSizeY = parseInt(inputYAmount.value,10); setGridProperties(); reset(); setGridProperties(); }); inputXAmount.value = gridSizeX; inputYAmount.value = gridSizeY; createGrid(); reset(); setGridProperties(); setBombDisplay(); setInterval(function() { var uncovered = uncoverMore(); if(uncovered>0) checkStatus(); draw(); }, 1000/60); setInterval(function() { if(!firstClick && !won && !lost) time++; setTime(); }, 1000); }; function setTime(dispTime) { if(!dispTime) dispTime = time; timeDisplay.innerText = dispTime+" s"; } function calcMousePos(evt) { var rect = canvas.getBoundingClientRect(); var root = document.documentElement; var mouseX = evt.clientX - rect.left - root.scrollLeft; var mouseY = evt.clientY - rect.top - root.scrollTop; return{ x:mouseX, y:mouseY }; } function reset() { time = 0; lost = false; won = false; firstClick = true; createGrid(); clearGrid(); addNeighbors(); totalBombs = 0; var numOfBombs = Math.round(grid.length*grid[0].length*shareOfBombs); addBombs(numOfBombs); } function click(tile) { if(clickInverted){ flag(tile); return; } mouseOverTile = undefined; if(tile.flagged) return; tile.uncover(); if(tile.bomb){ if(firstClick){ tile.bomb = false; totalBombs--; addBombs(1); firstClick = false; checkStatus(); return; } lose(); } firstClick = false; checkStatus(); } function flag(tile) { firstClick = false; mouseOverTile = undefined; if(tile.flagged){ tile.flagged = false; totalBombs++; } else if(!tile.uncovered) { tile.flagged = true; totalBombs--; } setBombDisplay(); var unflaggedBombs = 0; var wrongFlaggedTiles = 0; for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { if(grid[i][j].bomb && !grid[i][j].flagged) unflaggedBombs++; else if(grid[i][j].flagged && !grid[i][j].bomb) wrongFlaggedTiles++; } } if(unflaggedBombs === 0 && wrongFlaggedTiles === 0) win(); } function lose(){ if(won || lost) return; lost = true; setTimeout(function() { alert("You lost.\nThis game took "+time+"s\nClick to restart."); //setTimeout(reset,500); },10); } function win() { if(lost || won) return; won = true; // setTimeout(function () { alert("You won!\nThis game took "+time+"s\nClick to restart."); //setTimeout(reset,500); // },100); } function countNeighborBombs(i,j) { var bombs = 0; for (var k = 0; k < grid[i][j].neighbors.length; k++) { if(grid[i][j].neighbors[k].bomb){ bombs++; } } return bombs; } // function addNeighbors() { for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { var tile = grid[i][j]; tile.neighbors = new Array(0); if(i>0) tile.neighbors.push(grid[i-1][j]); if (i0) tile.neighbors.push(grid[i][j-1]) ; if (j0 && j>0) tile.neighbors.push(grid[i-1][j-1]); if (i0) tile.neighbors.push(grid[i+1][j-1]); if (i>0 && j=grid.length || i<0 || j>=grid[0].length || j<0){ return; } return grid[i][j]; } function drawGrid() { for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[i].length; j++) { var tile = grid[i][j]; var color; if (tile.uncovered) { if(tile.bomb){ color = 'black'; } else{ color = '#FFF'; if(won){ color = 'green'; } } }else { if (tile.flagged) { color = 'orange'; } else { color = '#BBB'; } } if (tile === mouseOverTile) { color = 'lightblue'; } var pos = getPosOfTile(i,j); var scl = gridProperties.scale; rect(pos.x,pos.y,scl-1,scl-1,color); if (tile.uncovered && tile.nearBombs !== 0) { switch (tile.nearBombs) { case 1: ctx.fillStyle = 'blue'; break; case 2: ctx.fillStyle = 'green'; break; case 3: ctx.fillStyle = 'red'; break; case 4: ctx.fillStyle = 'darkblue'; break; case 5: ctx.fillStyle = 'purple'; break; default: ctx.fillStyle = 'black'; } if(!tile.bomb){ var fontSize = Math.round(scl/2); ctx.font = fontSize+"px Arial"; ctx.fillText(tile.nearBombs,pos.x+scl/2-5,pos.y+scl/2+2.5); } } } } } function uncoverMore() { var gridSize = gridSizeX*gridSizeY; var tilesToUncover = Math.round(gridSize/100); if(tilesToUncover<1) tilesToUncover = 1; for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { var tile = grid[i][j]; if((tile.uncovered && !tile.bomb && tile.nearBombs === 0)){ for (var k = 0; k < tile.neighbors.length; k++) { if(!tile.neighbors[k].uncovered){ tile.neighbors[k].uncover(); tilesToUncover--; if(tilesToUncover===0) return 1; } } } else if (lost && tile.bomb && !tile.uncovered) { tile.uncover(); tilesToUncover--; if(tilesToUncover===0) return 1; } else if(won && !tile.uncovered && !tile.bomb) { tile.uncover(); tilesToUncover--; if(tilesToUncover===0) return 1; } } } return 0; } function checkStatus() { var untouchedTiles = 0; //excluding bombs for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { if(!grid[i][j].bomb && !grid[i][j].flagged && !grid[i][j].uncovered) untouchedTiles++; } } if(untouchedTiles === 0) win(); } function addBombs(numberOfBombs) { totalBombs += numberOfBombs; setBombDisplay(); while(numberOfBombs>0){ var bombPlaced = false; var tryCount = 0; var freeSpaceAvailable = true; while(bombPlaced === false){ var x = getRandomNumber(0,grid.length-1); var y = getRandomNumber(0,grid[0].length-1); var tile = grid[x][y]; if(!tile.bomb && !tile.uncovered){ tile.bomb = true; numberOfBombs--; bombPlaced = true; }else if (tryCount> grid.length) { freeSpaceAvailable = false; for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { if(grid[i][j].bomb === false){ freeSpaceAvailable = true; j = Infinity; i = Infinity; } } } if(freeSpaceAvailable === false){ console.error("No free tile!"); return; } } tryCount++; } } for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { grid[i][j].nearBombs = countNeighborBombs(i,j); } } } function setBombDisplay(bombs) { if(!bombs) bombs = totalBombs; totalBombsDisplay.innerText = bombs+" Bombs left"; } function tile(i, j){ this.bomb =false; this.uncovered = false; this.flagged = false; this.nearBombs = undefined; this.x = i; this.y = j; this.neighbors = undefined; this.uncover = function() { this.uncovered = true; if(this.flagged){ this.flagged = false; totalBombs++; } }; } function clearGrid() { for (var i = 0; i < grid.length; i++) { for (var j = 0; j < grid[0].length; j++) { grid[i][j] = new tile(i,j); } } } function getRandomNumber(min, max) { //min inclusive, max inclusive return Math.floor(Math.random() * (max - min + 1)) + min; } function rect(x,y,xSize,ySize,color){ ctx.fillStyle = color; ctx.fillRect(x,y,xSize,ySize); } function createGrid(){ grid = new Array(gridSizeX); for (var i = 0; i < grid.length; i++) { grid[i] = new Array(gridSizeY); } clearGrid(); } //Made by JtheDroid

Minesweeper [game]