<header>
<h1>MINESWEEPER</h1>
</header>
<div id="modal">
<div class="modal-box">
<p class="msg">Hello !</p><br>
<p class="play">PLAY</p>
</div>
</div>
<section>
<div class="mine-head">
<span class="flag"><i class="fa fa-flag" aria-hidden="true"></i> <span class="flagN">10</span></span>
<span class="smile"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></span>
<span class="time"><span class="timeN">0</span> <i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
<table class="mine-body">
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
<tr>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
<td class="box backgrounded"></td>
</tr>
</table>
</section>
<footer>
<p>Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a></p>
</footer>* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
min-height: 100vh;
font-family: arial;
background: #2980b9;
background-image: linear-gradient(to top left, #2980b9, #1abc9c);
position: relative;
text-align: center;
}
header {
letter-spacing: 0.2em;
text-align: center;
padding: 20px 5px;
color: whitesmoke;
}
/* modal box style */
#modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
z-index: 10;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
text-align: center;
}
.modal-box {
padding: 30px;
margin: auto;
width: 240px;
background: whitesmoke;
border-radius: 2px;
text-align: center;
box-shadow: 0 0 2px 3px rgba(0,0,0,0.3);
}
.modal-box p {
color: #2980b9;
font-size: 24px;
letter-spacing: 0.1em;
}
.play {
width: 160px;
margin: auto;
padding: 10px;
border: solid 1px #2980b9;
border-radius: 2px;
cursor: pointer;
}
.play:hover {
color: whitesmoke;
background: #2980b9;
}
/* table style */
section {
width: 316px;
height: 360px;
background: whitesmoke;
margin: auto;
text-align: center;
}
/* mine head style */
.mine-head {
display: flex;
justify-content: space-between;
width: 316px;
height: 50px;
background: whitesmoke;
border-bottom: solid 2px #333;
padding: 5px;
text-align: center;
}
.flag {
line-height: 40px;
width: 100px;
text-align: left;
padding-left: 5px;
font-size: 20px;
color: #333;
}
.smile {
color: #f39c12;
margin-top: 2.5px;
text-align: center;
}
.time {
line-height: 40px;
width: 100px;
text-align: right;
padding-right: 5px;
font-size: 20px;
color: #333;
}
/* mine body style */
.mine-body {
width: 316px;
height: 316px;
background: whitesmoke;
padding: 5px;
}
.box {
width: 10%;
height: 10%;
cursor: pointer;
text-align: center;
border: solid #2980b9 1px;
color: #333;
}
.box.backgrounded {
background: #2980b9;
color: transparent;
border-color: transparent;
}
.box.backgrounded:hover {
background: #3498db;
}
.box.flagged {
background: #e74c3c !important;
color: transparent;
border-color: transparent;
}
/* fix bomb icon to take full width; to uncomment when fix found for click */
.box i {
/* width: 100%;
height: 100%; */
}
.hidden {
display: none !important;
}
footer {
text-align: center;
padding: 20px 10px;
color: whitesmoke;
font-size: 14px;
}
footer a {
color: #333;
text-decoration: none;
}
footer a:hover {
color: whitesmoke;
text-decoration: underline;
}
// find a way to flag on mobile
// add options ? bigger table and/or more bombs
var bomb = '<i class="fa fa-bomb" aria-hidden="true"></i>';
var smile = '<i class="fa fa-smile-o fa-2x" aria-hidden="true"></i>';
var frown = '<i class="fa fa-frown-o fa-2x" aria-hidden="true"></i>';
var rowIndex = 0;
var colIndex = 0;
var count = 0;
var time = 0;
var flagCount = 10;
var bombCount = 0;
var boxElts = document.getElementsByClassName("box");
var backgroundedElts = document.getElementsByClassName("backgrounded");
var modalElt = document.querySelector("#modal");
var playElt = document.querySelector(".play");
var msgElt = document.querySelector(".msg");
var mineBody = document.querySelector(".mine-body");
var flagElt = document.querySelector(".flagN");
var smileElt = document.querySelector(".smile");
var timeElt = document.querySelector(".timeN");
// start of game
playElt.addEventListener("click", startGame);
function startGame() {
// clearInterval(checkPageInterval);
addBombs(10);
// click and right click handler
for (var i=0; i<boxElts.length; i++) {
boxElts[i].addEventListener("click", checkBoxes);
boxElts[i].addEventListener("contextmenu", manageFlag);
if (boxElts[i].innerHTML !== bomb) {
addNumbers(boxElts[i], boxElts[i].parentNode.rowIndex, boxElts[i].cellIndex);
}
}
modalElt.classList.add("hidden");
// run time
timer = setInterval(function() {
document.querySelector(".timeN").innerHTML = time++;
}, 1000);
}
function addBombs(number) {
for (var i=0; i<number; i++) {
var rand = Math.floor(Math.random() * boxElts.length);
while (boxElts[rand].innerHTML === bomb) {
rand = Math.floor(Math.random() * boxElts.length);
}
boxElts[rand].innerHTML = bomb;
}
}
function checkBoxes(e) {
var curr = e.currentTarget;
if (!curr.classList.contains("flagged")) {
curr.classList.remove("backgrounded");
// click on bomb
if (curr.innerHTML === bomb) {
endGame("lose");
}
// win click
else if (curr.innerHTML !== bomb && backgroundedElts.length == 10) {
endGame("win");
}
// click on number -> reveal this box only (prevent next else to shoot checkSides)
else if (curr.innerHTML>0 && curr.innerHTML<9) {}
// click on empty -> reveal this box + reveal linked area until number
else {
checkSides(curr, curr.parentNode.rowIndex, curr.cellIndex);
}
}
}
function manageFlag(e) {
e.preventDefault();
var curr = e.currentTarget;
if (!curr.classList.contains("flagged") && flagCount > 0) {
flagCount--;
curr.classList.add("flagged");
}
else if (curr.classList.contains("flagged") && flagCount >= 0) {
flagCount++;
curr.classList.remove("flagged");
}
flagElt.innerHTML = flagCount;
}
function addNumbers(curr, rowI, colI) {
var bombCount = 0;
// top row
if (mineBody.rows[rowI-1]) {
if (mineBody.rows[rowI-1].cells[colI-1] &&
mineBody.rows[rowI-1].cells[colI-1].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI-1].cells[colI] &&
mineBody.rows[rowI-1].cells[colI].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI-1].cells[colI+1] &&
mineBody.rows[rowI-1].cells[colI+1].innerHTML === bomb) {
bombCount++;
}
}
// same row
if (mineBody.rows[rowI]) {
if (mineBody.rows[rowI].cells[colI-1] &&
mineBody.rows[rowI].cells[colI-1].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI].cells[colI] &&
mineBody.rows[rowI].cells[colI].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI].cells[colI+1] &&
mineBody.rows[rowI].cells[colI+1].innerHTML === bomb) {
bombCount++;
}
}
// bottom row
if (mineBody.rows[rowI+1]) {
if (mineBody.rows[rowI+1].cells[colI-1] &&
mineBody.rows[rowI+1].cells[colI-1].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI+1].cells[colI] &&
mineBody.rows[rowI+1].cells[colI].innerHTML === bomb) {
bombCount++;
}
if (mineBody.rows[rowI+1].cells[colI+1] &&
mineBody.rows[rowI+1].cells[colI+1].innerHTML === bomb) {
bombCount++;
}
}
if (bombCount>0) {curr.innerHTML = bombCount;}
}
function checkSides(curr, rowI, colI) {
if (!curr.classList.contains("backgrounded")) {
// top row
if (mineBody.rows[rowI-1]) {
checkRowCell(curr, rowI-1, colI-1);
checkRowCell(curr, rowI-1, colI);
checkRowCell(curr, rowI-1, colI+1);
}
// same row
if (mineBody.rows[rowI]) {
checkRowCell(curr, rowI, colI-1);
// checkRowCell(curr, rowI, colI);
checkRowCell(curr, rowI, colI+1);
}
// bottom row
if (mineBody.rows[rowI+1]) {
checkRowCell(curr, rowI+1, colI-1);
checkRowCell(curr, rowI+1, colI);
checkRowCell(curr, rowI+1, colI+1);
}
}
}
function checkRowCell(curr, roww, coll) {
if (mineBody.rows[roww].cells[coll] &&
mineBody.rows[roww].cells[coll].classList.contains("backgrounded")) {
mineBody.rows[roww].cells[coll].classList.remove("backgrounded");
// func callback with new row-col if box is empty
if (mineBody.rows[roww].cells[coll].innerHTML === "") {
checkSides(curr, mineBody.rows[roww].cells[coll].parentNode.rowIndex, mineBody.rows[roww].cells[coll].cellIndex);
}
}
}
function endGame(result) {
clearInterval(timer);
if (result === "lose") {
for (var i=0; i<boxElts.length; i++) {boxElts[i].classList.remove("backgrounded");}
smileElt.innerHTML = frown;
msgElt.innerHTML = "You lose !";
}
else if (result === "win") {
msgElt.innerHTML = "You win in " + time + " sec!";
}
setTimeout(function() {
resetGame();
}, 1200);
}
function resetGame() {
for (var i=0; i<boxElts.length; i++) {
boxElts[i].classList.add("backgrounded");
boxElts[i].classList.remove("flagged");
boxElts[i].innerHTML = "";
}
modalElt.classList.remove("hidden");
playElt.innerHTML = "REPLAY";
smileElt.innerHTML = smile;
time = 0;
flagCount = 10;
flagElt.innerHTML = flagCount;
timeElt.innerHTML = time;
count = 0;
}
// handle focus of the page
// function checkPageFocus() {
// if (document.hasFocus()) {
// modalElt.classList.remove("hidden");
// }
// else {
// modalElt.classList.add("hidden");
// }
// }
// var checkPageInterval = setInterval(checkPageFocus, 300);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.