Pedro Gonçalves Pedro Gonçalves - 29 days ago 11
CSS Question

Minefield with JS gone wrong

I'm creating a minefiled game and I'm trying to put 10 bombs in a random location each time. The problem is that sometimes 2 or more bombs can be placed in the same block, resulting in less than 10 bombs in the game. How can I prevent this?

I've already tried saving all the bombs locations in an array and each time compare the new bomb location to all the past ones, but id didn't work.

Here is my code:



var number_of_blocks = 0;
var number_of_bombs = 10;
var minefield_width = 500;
var minefield_height = 500;
var block_width = 50;
var block_height = 50;
var bombs = [];

number_of_blocks = (minefield_width * minefield_height) / (block_width * block_height);

$("#new_game").click(function() {
create_blocks();
create_bombs();
});

function random(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

function create_blocks() {
//Create the "normal blocks".
for (var i = 0; i < number_of_blocks; i++) {
var block = document.createElement("div");
block.style.width = block_width + "px";
block.style.height = block_height + "px";
block.className = "block";
block.id = "b" + i;
block.onclick = function() {
console.log(this.id);
this.style.backgroundColor = "#ddd";
};
document.getElementById("field").appendChild(block);
}
}

function create_bombs() {
//Select a "normal block" and transform it into a "bomb block".
for (var i = 0; i < number_of_bombs; i++) {
var random_block = bombs_do_not_repeat();
var bomb = document.getElementById(random_block);
bomb.style.backgroundColor = "red";
bomb.classList.add("bomb");
bomb.onclick = function() {
alert("GAME OVER");
};
bombs[i] = random_block;
}
}

function bombs_do_not_repeat() {
//Should prevent a 'bomb block' to go inside the same 'block' more than 1 time. Example:
//CORRECT: bombs[] = "b1", "b2", "b3", "b4", "b5";
//INCORRECT: bombs[] = "b1", "b1", "b3", "b4", "b4";
var random_num = "b" + random(1, number_of_blocks);
for (var j = 0; j < bombs.length; j++) {
if (random_num == bombs[j]) {
console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]);
bombs_do_not_repeat();
}
}
return random_num;
}

* {
list-style: none;
font-family: sans-serif;
margin: 0px;
}

#field {
width: 500px;
height: 500px;
border: solid 1px black;
margin: 0px auto;
margin-top: 50px;
overflow: auto;
background-color: #ccc;
}

.block {
background-color: #aaa;
border: solid 1px #000;
box-sizing: border-box;
float: left;
cursor: pointer;
}

.block:hover {
background-color: #eee
}

.block:active {
background-color: #ddd
}

#container {
overflow: auto;
}

#menu {
width: 100%;
height: auto;
background-color: #333;
overflow: auto;
}

#menu li {
float: left;
text-align: center;
width: 100px;
color: white;
cursor: pointer;
}

#menu li:hover {
background-color: #555
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<div id="container">
<div id="menu">
<ul>
<li id="new_game">New Game</li>
</ul>
</div>
<div id="field"></div>
</div>

</body>

</html>




Answer Source

You're recursively calling bombs_do_not_repeat(), but always ignoring the recursive result and just going with whatever was selected first whether it's a repeat or not.

I suspect you mean to assign the result of the recursion:

random_num = bombs_do_not_repeat();