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%);
}
#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;
}
</style>
@@ -47,7 +52,13 @@
<body style="margin: 0">
<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">
00:00
</span>

36
minesweeper.js
View File

@@ -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) => {