KingOfDog/minesweeper.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Now displaying the remaining amount of bombs

Browse Source 
In the top left corner, the remaining number of bombs is displayed based on the already place count of flags
This commit is contained in:
Marcel
2018-05-10 15:04:52 +02:00
parent 9b9abad0ab
commit 06a5672ef9
2 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@@ -30,16 +30,21 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
#time-container { .stat-container {
float: right; float: left;
background-color: black; background-color: black;
border-radius: 10px; border-radius: 10px;
color: red; color: red;
font-size: 4vh; font-size: 4vh;
font-family: "SF Digital Readout", Roboto, Arial, sans-serif; font-family: "SF Digital Readout", Roboto, Arial, sans-serif;
margin: 0 10px;
} }
#time { .stat-container.right {
float: right;
}
#time, #bombs {
margin: 0 15px; margin: 0 15px;
} }
</style> </style>
@@ -47,7 +52,13 @@
<body style="margin: 0"> <body style="margin: 0">
<div id="game-stats"> <div id="game-stats">
<div id="time-container"> <div class="stat-container">
<span id="bombs">
000
</span>
</div>
<div class="stat-container right">
<span id="time"> <span id="time">
00:00 00:00
</span> </span>

36
minesweeper.js
View File

@@ -1,7 +1,8 @@
const canvas = document.getElementById('minesweeper-game'); const canvas = document.getElementById('minesweeper-game');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const container = document.getElementById('game-container'); const statsContainer = document.getElementById('game-stats');
const timeEl = document.getElementById('time'); const timeEl = document.getElementById('time');
const bombsEl = document.getElementById('bombs');
const fieldSize = {x: 16, y: 12}; const fieldSize = {x: 16, y: 12};
let tileSize; let tileSize;
@@ -170,6 +171,17 @@ function countFlaggedBombs(x, y) {
return tiles.countFlagged(true); 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) { function drawGrid(animations = true) {
ctx.clearRect(0, 0, canvas.width, canvas.height); 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) if(virtualX >= fieldSize.x || virtualY >= fieldSize.y)
return; return;
const content = field[virtualX][virtualY]; const content = field[virtualX][virtualY];
const width = .8 * renderingConfig.sizeX; const width = .8 * renderingConfig.sizeX;
@@ -312,6 +324,7 @@ function initGame() {
} }
scaleCanvas(); scaleCanvas();
updateBombs();
} }
function initBombs(startX, startY) { function initBombs(startX, startY) {
@@ -342,7 +355,7 @@ function initTime() {
const duration = (new Date().getTime() - startTime) / 1000; const duration = (new Date().getTime() - startTime) / 1000;
const minutes = Math.floor(duration / 60); const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60); const seconds = Math.floor(duration % 60);
timeEl.innerText = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds; timeEl.innerText = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}, 1000); }, 1000);
} }
@@ -366,6 +379,8 @@ function scaleCanvas() {
overlay2Canvas.width = W; overlay2Canvas.width = W;
overlay2Canvas.height = H; overlay2Canvas.height = H;
statsContainer.style.width = W + "px";
initBalls(); initBalls();
applyScaling(); applyScaling();
@@ -405,7 +420,7 @@ function tileFlag(x, y) {
x -= renderingConfig.offsetX; x -= renderingConfig.offsetX;
y -= renderingConfig.offsetY; y -= renderingConfig.offsetY;
const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX; const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX;
const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY; 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() { function victoryCheck() {
if (!victory && countClickedTiles() === fieldSize.x * fieldSize.y - bombCount) { if (!victory && countClickedTiles() === fieldSize.x * fieldSize.y - bombCount) {
victory = true; victory = true;
@@ -482,7 +502,7 @@ Object.prototype.countFlagged = function (val) {
overlay2Canvas.addEventListener("click", (e) => { overlay2Canvas.addEventListener("click", (e) => {
if(isDragging) if(isDragging)
return; return;
const pos = getPosition(e); const pos = getPosition(e);
if (isFirstClick) { if (isFirstClick) {
@@ -501,7 +521,7 @@ overlay2Canvas.addEventListener("click", (e) => {
overlay2Canvas.addEventListener("dblclick", (e) => { overlay2Canvas.addEventListener("dblclick", (e) => {
if(isDragging) if(isDragging)
return; return;
const pos = getPosition(e); const pos = getPosition(e);
tileDoubleClick(pos.x, pos.y); tileDoubleClick(pos.x, pos.y);
@@ -512,12 +532,14 @@ overlay2Canvas.addEventListener("dblclick", (e) => {
overlay2Canvas.addEventListener("contextmenu", (e) => { overlay2Canvas.addEventListener("contextmenu", (e) => {
if(isDragging) if(isDragging)
return; return;
e.preventDefault(); e.preventDefault();
const pos = getPosition(e); const pos = getPosition(e);
tileFlag(pos.x, pos.y); tileFlag(pos.x, pos.y);
updateBombs();
}); });
window.addEventListener("keyup", (e) => { window.addEventListener("keyup", (e) => {