From 06a5672ef9d4eb2124247c2cfe20959e9555c4f2 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 10 May 2018 15:04:52 +0200 Subject: [PATCH] Now displaying the remaining amount of bombs In the top left corner, the remaining number of bombs is displayed based on the already place count of flags --- index.html | 19 +++++++++++++++---- minesweeper.js | 36 +++++++++++++++++++++++++++++------- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index d76558d..1a8f704 100644 --- a/index.html +++ b/index.html @@ -30,16 +30,21 @@ transform: translateX(-50%); } - #time-container { - float: right; + .stat-container { + float: left; background-color: black; border-radius: 10px; color: red; font-size: 4vh; font-family: "SF Digital Readout", Roboto, Arial, sans-serif; + margin: 0 10px; } - #time { + .stat-container.right { + float: right; + } + + #time, #bombs { margin: 0 15px; } @@ -47,7 +52,13 @@
-
+
+ + 000 + +
+ +
00:00 diff --git a/minesweeper.js b/minesweeper.js index dba2a19..dd0d42f 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -1,7 +1,8 @@ const canvas = document.getElementById('minesweeper-game'); const ctx = canvas.getContext('2d'); -const container = document.getElementById('game-container'); +const statsContainer = document.getElementById('game-stats'); const timeEl = document.getElementById('time'); +const bombsEl = document.getElementById('bombs'); const fieldSize = {x: 16, y: 12}; let tileSize; @@ -170,6 +171,17 @@ function countFlaggedBombs(x, y) { return tiles.countFlagged(true); } +function countTotalFlags() { + let count = 0; + for(let x = 0; x < fieldSize.x; x++) { + for(let y = 0; y < fieldSize.y; y++) { + if(field[x][y].flagged) + count++; + } + } + return count; +} + function drawGrid(animations = true) { ctx.clearRect(0, 0, canvas.width, canvas.height); @@ -200,7 +212,7 @@ function drawTile(x, y, animations = true) { if(virtualX >= fieldSize.x || virtualY >= fieldSize.y) return; - + const content = field[virtualX][virtualY]; const width = .8 * renderingConfig.sizeX; @@ -312,6 +324,7 @@ function initGame() { } scaleCanvas(); + updateBombs(); } function initBombs(startX, startY) { @@ -342,7 +355,7 @@ function initTime() { const duration = (new Date().getTime() - startTime) / 1000; const minutes = Math.floor(duration / 60); const seconds = Math.floor(duration % 60); - + timeEl.innerText = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds; }, 1000); } @@ -366,6 +379,8 @@ function scaleCanvas() { overlay2Canvas.width = W; overlay2Canvas.height = H; + statsContainer.style.width = W + "px"; + initBalls(); applyScaling(); @@ -405,7 +420,7 @@ function tileFlag(x, y) { x -= renderingConfig.offsetX; y -= renderingConfig.offsetY; - + const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX; const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY; @@ -438,6 +453,11 @@ function uncoverTile(x, y) { } } +function updateBombs() { + const remainingBombs = bombCount - countTotalFlags(); + bombsEl.innerText = (remainingBombs < 100 ? "0" : 0) + (remainingBombs < 10 ? "0" : "") + remainingBombs; +} + function victoryCheck() { if (!victory && countClickedTiles() === fieldSize.x * fieldSize.y - bombCount) { victory = true; @@ -482,7 +502,7 @@ Object.prototype.countFlagged = function (val) { overlay2Canvas.addEventListener("click", (e) => { if(isDragging) return; - + const pos = getPosition(e); if (isFirstClick) { @@ -501,7 +521,7 @@ overlay2Canvas.addEventListener("click", (e) => { overlay2Canvas.addEventListener("dblclick", (e) => { if(isDragging) return; - + const pos = getPosition(e); tileDoubleClick(pos.x, pos.y); @@ -512,12 +532,14 @@ overlay2Canvas.addEventListener("dblclick", (e) => { overlay2Canvas.addEventListener("contextmenu", (e) => { if(isDragging) return; - + e.preventDefault(); const pos = getPosition(e); tileFlag(pos.x, pos.y); + + updateBombs(); }); window.addEventListener("keyup", (e) => {