Develop Reference

How to sort elements on DOM by its inner Text

I have a graph that is rendering its values as a div inside the body element with a class according to their number values. This is working fine. But next I need to sort the divs according to their number values or background color. BUT, it needs to start on the lower left corner of the page and fan out upwards to towards the right as the numbers increase. Basically just like a line graph.
I'd like to stay away from libraries if at all possible.
How would I approach this? Thank you all.
let interval = setInterval(makeDivs, 5);
function makeDivs(){
let cont = checkHeight();
if(cont){
let div = document.createElement('div');
let randNum = Math.random() * 100;
if(randNum < 20) { div.classList.add('blue') }
if(randNum >= 20 && randNum < 40) { div.classList.add('green') }
if(randNum >= 40 && randNum < 60) { div.classList.add('yellow') }
if(randNum >= 60 && randNum < 80) { div.classList.add('orange') }
if(randNum >= 80 && randNum < 101) { div.classList.add('red') }
div.textContent = randNum.toFixed(2);
document.querySelector('body').appendChild(div);
} else {
alert('done');
clearInterval(interval);
sortDivs(); // Begin sorting divs
}
}
function checkHeight(){
let w = window.innerHeight;
let b = document.querySelector('body').offsetHeight;
if(b < w) {
return true;
} else {
return false;
}
}
function sortDivs(){
document.querySelector("body div:last-child").remove();
alert('sorting now...')
}
* { box-sizing: border-box;}
body { width: 100vw; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: end;}
body div { width: calc(10% + 1px); text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 10px;}
body div.blue { background: aqua; }
body div.green { background: green; }
body div.yellow { background: yellow; }
body div.orange { background: orange; }
body div.red { background: red; }
UPDATE!!!
So I have this so far based on the feed back down below. The problem now is the sorting is only happening laterally and not on an angle (spreading right and to the top).
let interval = setInterval(makeDivs, 10);
function makeDivs(){
let cont = checkHeight();
if(cont){
let div = document.createElement('div');
let randNum = Math.random() * 100;
if(randNum < 20) { div.classList.add('blue') }
if(randNum >= 20 && randNum < 40) { div.classList.add('green') }
if(randNum >= 40 && randNum < 60) { div.classList.add('yellow') }
if(randNum >= 60 && randNum < 80) { div.classList.add('orange') }
if(randNum >= 80 && randNum < 101) { div.classList.add('red') }
div.textContent = randNum.toFixed(2);
document.querySelector('.outPut').appendChild(div);
} else {
clearInterval(interval);
document.querySelector(".outPut div:last-child").remove();
compileArrays(); // Begin sorting divs
}
}
function checkHeight(){
let w = window.innerHeight;
let b = document.querySelector('.outPut').offsetHeight;
if(b < w) {
return true;
} else {
return false;
}
}
function compileArrays(){
let divs = document.querySelectorAll('.outPut div');
let bArr = [], gArr = [], yArr = [], oArr = [], rArr = [];
divs.forEach( (d) => {
if( d.classList.contains('blue') ){ bArr.push(d) }
if( d.classList.contains('green') ){ gArr.push(d) }
if( d.classList.contains('yellow') ){ yArr.push(d) }
if( d.classList.contains('orange') ){ oArr.push(d) }
if( d.classList.contains('red') ){ rArr.push(d) }
});
let finalArr = sortArray(bArr).concat(sortArray(gArr)).concat(sortArray(yArr)).concat(sortArray(oArr)).concat(sortArray(rArr));
newDom(finalArr);
}
function sortArray(arr){
let newArr = arr;
newArr.sort( (a, b) => {
return a.innerText - b.innerText;
});
return newArr;
}
function newDom(arr){
let b = document.querySelector('.outPut');
b.innerHTML = '';
arr.reverse();
arr.forEach((a) => {
b.appendChild(a);
});
}
* { box-sizing: border-box;}
body { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; align-items: flex-end;}
body .outPut { flex: 1; display: flex; flex-wrap: wrap; flex-direction:row-reverse; }
body .outPut div { width: calc(10% + 1px); text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 10px;}
body .outPut div.blue { background: aqua; }
body .outPut div.green { background: #44df15; }
body .outPut div.yellow { background: yellow; }
body .outPut div.orange { background: orange; }
body .outPut div.red { background: red; }
<div class="outPut"></div>

Supposed you already have a mechanism to organise such DIVs in a grid as shown, the following should give you what you are looking for:
var items = divList.filter((div) => div.nodeType == 1); // get rid of the whitespace text nodes
items.sort(function(a, b) {
return a.innerHTML == b.innerHTML
? 0
: (a.innerHTML > b.innerHTML ? 1 : -1);
});
Then, place them back in the DOM as needed, example:
for (i = 0; i < items.length; ++i) {
divList.appendChild(items[i]);
}

This worked with the first code example!!!
try this sortDivs function:
function sortDivs() {
document.querySelector("body div:last-child").remove();
alert('sorting now...')
let toSort = document.getElementsByTagName("div")
toSort = Array.prototype.slice.call(toSort, 0)
toSort.sort((a, b) => {
let aord = parseFloat(a.textContent);
let bord = parseFloat(b.textContent);
return bord - aord;
})
document.body.innerHTML = ""
for(var i = 0, l = toSort.length; i < l; i++) {
document.querySelector('body').appendChild(toSort[i]);
}
}
and in the css file set flex-wrap to wrap-reverse. Hope I could help :)
PS: please, implement some else if instead of doing only if

Here is a small fiddle with my sample code demonstrating a simple solution in pure JavaScript and absolute CSS positioning for what you are trying to achieve. Link
As some pointed out already, there might be a library, that already provides a better and complete solution for this - I did not research if it is so.
Code:
file.js
var container = document.getElementById("container")
var results = [1,2,3,4,5,6,7,8]
//you can pre-calculate the order of the distances
//here already orderdered array [distanec][X-axis][Y-axis]
var distances =[[0,0,0],
[1,1,0],
[1,0,1],
[1.414, 1,1],
[2,0,2],
[2,2,0],
[2.234, 2,1],
[2.234, 1,2]]
for (i = 0; i < results.length; i++){
var newDiv = document.createElement("div")
newDiv.className = "result"
newDiv.innerHTML = results[i]
newDiv.style.left = distances[i][1]*20 + "px"
newDiv.style.bottom = distances[i][2]*20 + "px"
container.appendChild(newDiv)
}
function setColor(element){
// set class based on value - you already have this part
}
style.css
#container {
border: 4px;
border-color: red;
border-style: solid;
height: 200px;
width: 200px;
position: relative;
}
.result{
border: 2px;
width: 20px;
height: 20px;
position: absolute;
border-color: blue;
border-style: solid;
text-align: center;
}
site.html
<div id="container">
</div>
Output:

Add scores grid game JavaScript

I want to add 10 points when blue box goes into brown box.
I tried to set score = 0 and points to add = 10 but it doesn't work.
I alert '+10 points' and it shows me the alert so I guess the problem is the DOM ?!?
Any suggestions ?
Thanks !
let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 10) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob")
}
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
$(drawPone).addClass("p-0")
}
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
if ($(".p-0").hasClass("ob")) {
alert('add +10 points !!!')
addPoints.text( parseInt(addPoints.text()) + obs );
}
moveCounter += 1;
if ($(".p-0").hasClass("ob")) {
}
$pOne = $('.p-0')
$pOneNext = $pOne.next();
$pOne.removeClass('p-0');
$pOneNext.addClass('p-0');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.ob {
background-color: brown;
}
.p-0 {
background-color: blue;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
<button id="button_right">right</button><br>
</div>
<div id="score">
</div>
Thank you very much! I am new to JavaScript/ JQuery
Thank you very much!

You are trying to change the HTML inside of the div with id "score".
Selecting the css element using $("#id") retrieves the DOM element and not its contents so adding the score directly to it has no consequences.
What you want to do is: update the score variable and then set the HTML inside the div to the score value.
So instead of just:
addPoints += obs
you should
score += obs
addPoints.html(score)

Math.random duplicates numbers JavaScript

I want to randomly assign a class at two boxes.
But even with indexOf(randomIndex) === -1) Math.random is duplicating the numbers.
If you refresh you will see that the boxes are changing classes but sometimes they both have the same class, this should happened.
var grid = document.getElementById("grid-box");
for (var i = 0; i <= 1; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var weaponTwo = [];
while (weaponTwo.length < 1) {
var randomIndex = parseInt(2 * Math.random());
if (weaponTwo.indexOf(randomIndex) === -1) {
weaponTwo.push(randomIndex);
var drawWtwo = document.getElementById('square' + randomIndex);
$(drawWtwo).addClass("w2")
}
};
var weapon3 = [];
while (weapon3.length < 1) {
var randomIndex = parseInt(2 * Math.random());
if (weapon3.indexOf(randomIndex) === -1) {
weapon3.push(randomIndex);
var draw3 = document.getElementById('square' + randomIndex);
$(draw3).addClass("w3")
}
};
#grid-box {
width: 420px;
height: 220px;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.w2 {
background-color: red;
}
.w3 {
background-color: blue;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box"></div>

You are using two different arrays for storing the weapons. Use same array so that the number is not repeated.
var grid = document.getElementById("grid-box");
for (var i = 0; i <= 1; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var weaponTwo = [];
while (weaponTwo.length < 1) {
var randomIndex = parseInt(2 * Math.random());
if (weaponTwo.indexOf(randomIndex) === -1) {
weaponTwo.push(randomIndex);
var drawWtwo = document.getElementById('square' + randomIndex);
$(drawWtwo).addClass("w2")
}
};
while (weaponTwo.length < 2) {
var randomIndex = parseInt(2 * Math.random());
if (weaponTwo.indexOf(randomIndex) === -1) {
weaponTwo.push(randomIndex);
var draw3 = document.getElementById('square' + randomIndex);
$(draw3).addClass("w3")
}
};
#grid-box {
width: 420px;
height: 220px;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.w2 {
background-color: red;
}
.w3 {
background-color: blue;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box"></div>
Better Approach : You can create an array of classes and then shuffle it using this alogrithm. Then you can pop from the array and add to classes one by one.

Scrolling marquee w/ repeating text

I want to have a scrolling marquee that never ends, and with that, I mean that there will never be a blank space in the marquee.
So when, for example, all text has been in the screen (viewport) and the latest words are marquee'ing, the marquee will repeat without first ending the marquee (meaning: all text has gone away into the left side [marquee: right -> left]). With repeat I mean that the text will just start over right behind where the marquee is
So when I have the marquee text " Hello poeple of the earth •", and that is here:
_ = blank
! = Char of first run of marquee
^ = char of second run of marquee
& = char of third run of marquee
________!!!!!!!!!!!!!!!!!!!!!!!!!!!!****************************^^^^^^^^^^^^^^^^^^^^^^^^^^^^&&&&&&&&
Ofcourse I need it to be smooth. Something like this answer, but without the blank spaces. The use of libraries doesn't matter.
Can anyone help me?

You can use marque plugin to achieve this
$('.marquee').marquee({
//speed in milliseconds of the marquee
duration: 5000,
//gap in pixels between the tickers
gap: 0,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false
});
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
<body>
<div class="marquee">stuff to say 1|</div>
<div class="marquee">stuff to say 2|</div>
<div class="marquee">stuff to say 3|</div>
<div class="marquee">stuff to say 4|</div>
<div class="marquee">stuff to say 5</div>
</body>

I think this is what you want :)))
function start() {
new mq('latest-news');
mqRotate(mqr);
}
window.onload = start;
function objWidth(obj) {
if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) return obj.clip.width;
return 0;
}
var mqr = [];
function mq(id) {
this.mqo = document.getElementById(id);
var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
var fulwid = objWidth(this.mqo);
var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
this.mqo.innerHTML = "";
var heit = this.mqo.style.height;
this.mqo.onmouseout = function () {
mqRotate(mqr);
};
this.mqo.onmouseover = function () {
clearTimeout(mqr[0].TO);
};
this.mqo.ary = [];
var maxw = Math.ceil(fulwid / wid) + 1;
for (var i = 0; i < maxw; i++) {
this.mqo.ary[i] = document.createElement("div");
this.mqo.ary[i].innerHTML = txt;
this.mqo.ary[i].style.position = "absolute";
this.mqo.ary[i].style.left = wid * i + "px";
this.mqo.ary[i].style.width = wid + "px";
this.mqo.ary[i].style.height = heit;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
}
function mqRotate(mqr) {
if (!mqr) return;
for (var j = mqr.length - 1; j > -1; j--) {
maxa = mqr[j].ary.length;
for (var i = 0; i < maxa; i++) {
var x = mqr[j].ary[i].style;
x.left = parseInt(x.left, 10) - 1 + "px";
}
var y = mqr[j].ary[0].style;
if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
var z = mqr[j].ary.shift();
z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
mqr[j].ary.push(z);
}
}
mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}
.marquee {
position: relative;
overflow: hidden;
text-align: center;
margin: 0 auto;
width: 100%;
height: 30px;
display: flex;
align-items: center;
white-space: nowrap;
}
#latest-news {
line-height: 32px;
a {
color: #555555;
font-size: 13px;
font-weight: 300;
&:hover {
color: #000000;
}
}
span {
font-size: 18px;
position: relative;
top: 4px;
color: #999999;
}
}
<div id="latest-news" class="marquee">
<span style="white-space:nowrap;">
<span> •</span>
one Lorem ipsum dolor sit amet
<span> •</span>
two In publishing and graphic design
<span> •</span>
three Lorem ipsum is a placeholder text commonly
</span>
</div>

Thank You sire.....I get it....What I need....
function start() {
new mq('latest-news');
mqRotate(mqr);
}
window.onload = start;
function objWidth(obj) {
if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) return obj.clip.width;
return 0;
}
var mqr = [];
function mq(id) {
this.mqo = document.getElementById(id);
var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
var fulwid = objWidth(this.mqo);
var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
this.mqo.innerHTML = "";
var heit = this.mqo.style.height;
this.mqo.onmouseout = function () {
mqRotate(mqr);
};
this.mqo.onmouseover = function () {
clearTimeout(mqr[0].TO);
};
this.mqo.ary = [];
var maxw = Math.ceil(fulwid / wid) + 1;
for (var i = 0; i < maxw; i++) {
this.mqo.ary[i] = document.createElement("div");
this.mqo.ary[i].innerHTML = txt;
this.mqo.ary[i].style.position = "absolute";
this.mqo.ary[i].style.left = wid * i + "px";
this.mqo.ary[i].style.width = wid + "px";
this.mqo.ary[i].style.height = heit;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
}
function mqRotate(mqr) {
if (!mqr) return;
for (var j = mqr.length - 1; j > -1; j--) {
maxa = mqr[j].ary.length;
for (var i = 0; i < maxa; i++) {
var x = mqr[j].ary[i].style;
x.left = parseInt(x.left, 10) - 1 + "px";
}
var y = mqr[j].ary[0].style;
if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
var z = mqr[j].ary.shift();
z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
mqr[j].ary.push(z);
}
}
mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}
.marquee {
position: relative;
overflow: hidden;
text-align: center;
margin: 0 auto;
width: 100%;
height: 30px;
display: flex;
align-items: center;
white-space: nowrap;
}
#latest-news {
line-height: 32px;
a {
color: #555555;
font-size: 13px;
font-weight: 300;
&:hover {
color: #000000;
}
}
span {
font-size: 18px;
position: relative;
top: 4px;
color: #999999;
}
}
<div id="latest-news" class="marquee">
<span style="white-space:nowrap;">
<span> •</span>
one Lorem ipsum dolor sit amet
<span> •</span>
two In publishing and graphic design
<span> •</span>
three Lorem ipsum is a placeholder text commonly
</span>
</div>

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>
SOLVED:
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]);
return random_num = bombs_do_not_repeat();
}
}
return random_num;
}

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();

I suggest you to change your function to this
function bombs_do_not_repeat() {
var check = false;
var random_num;
do{
random_num = "b" + random(1, number_of_blocks);
for (var j = 0; j < bombs.length && !check; j++) {
if (random_num == bombs[j]) {
console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]);
check = true;
}
}
}while(check);
return random_num;
}

Instead of creating each random number prepare a random (shuffled) array. Something like this.
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 = [];
var blockArr = []; //helper array
number_of_blocks = (minefield_width * minefield_height) / (block_width * block_height);
$("#new_game").click(function() {
//reset blockArr and bombs
bombs = [];
blockArr = [];
//clean the field
document.getElementById('field').innerHTML = '';
create_blocks();
//blockArr is now fillewd
bombs = blockArr.sort(function() {
return Math.random() < 0.5 ? -1 : 1;
}) //shuffle
.slice(0, number_of_bombs);
//for debug purpose
//console.log(bombs);
create_bombs();
});
//function random(min, max) {//obsolete
// return Math.floor(Math.random() * (max - min)) + min;
//}
function create_blocks() {
//Create the "normal blocks".
for (var i = 0; i < number_of_blocks; i++) {
//fill blockArr in the samee loop
blockArr.push(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(); //no need
var bomb = document.getElementById('b' + bombs[i]); //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() { //obsolete
//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>