Javascript minesweeper posted an unnecessary "1"

Question

I wrote a minesweeper in JavaScript that worked fine for a while, and then by chance in 1 perspective (I tried to improve the style), he gave me this:

pay attention to "1" in the upper right corner, as well as 2 missing 1 two and three spaces below

here is my function to add numbers to squares:

function nextToBombCheck(event) { //reset bomb count bombCount = 0 ; //initialize variable for checking nerby boxes var nextToBox = 0; //asign the box id as a number var boxNum = parseInt(event.id); var checkSide = 0; for ( var i = 9 ; i <= 11 ; i++ ) { nextToBox = boxNum + i; //check if its a wrap if ( ( nextToBox%10 === 0 && boxNum%10 === 9 ) || ( nextToBox%10 === 9 && boxNum%10 === 0 ) ) { continue; //check boxes below } else if ( bomb.indexOf( nextToBox ) >= 0 ) { bombCount++; } } for ( i = -1 ; i <= 1 ; i++ ) { nextToBox = boxNum + i; //check if its a wrap (above and below wont work anyway) if ( ( nextToBox%10 === 0 && boxNum%10 === 9 ) || ( nextToBox%10 === 9 && boxNum%10 === 0 ) ) { continue; //check boxes alongside } else if ( bomb.indexOf( nextToBox ) >= 0 ) { bombCount++; } } for ( i = -11 ; i <= -9 ; i++ ) { nextToBox = boxNum + i; if ( ( nextToBox%10 === 0 && boxNum%10 === 9 ) || ( nextToBox%10 === 9 && boxNum%10 === 0 ) ) { continue; //check boxes above } else if ( bomb.indexOf( nextToBox ) >= 0 ) { bombCount++; } } //set class(colors) based on bombCount event.className = classList[ bombCount ]; if ( bombCount !== 0 ) { //write number of neighboring bombs event.innerHTML = bombCount; } } 

my program works using a table and each td has an identifier of 0-99

heres link if this helps

Answer 1

Good game. But you are making a general mistake counting the last index. You see that your table has a size of 11x11 = 121 ? But in your program you use

 var rowAmount = 10; var columnAmount = 10; cellAmount = columnAmount * rowAmount; 

which is wrong. The for loop also explicitly assumes that there are 11 columns:

 for ( i = 0 ; i <= rowAmount ; i++ ) { gameBox += "<tr>"; for ( var j = 0 ; j <= columnAmount ; j++ ) { var idValue = i * 10 + j; gameBox += "<td class = 'box' id = '" + idValue + "' onclick = 'process(this);' ></td>"; } gameBox += "</tr>"; } 

but idValue uses 10 columns. This means that your program will ignore the last column. Change this in all of your codes and everything will be fine.

Answer 2

I believe that the problem is related to several elements with the same identifier that you can see on the screen taken from the Chrome inspector. As you can see, the last cell of the row and the first cell of the next row have the same identifier. And this is true for all lines.

Answer 3

Instead of using modular tricks, etc. use the X and Y coordinates and get a function to get the cell ID from the given X and Y , i.e.

 function getCellId(x, y) { return 'cell-' + x + '-' + y); } 

And name your cell id cell-0-0 → cell-9-9

Then neighboring cells

 (x - 1, y - 1) (x, y - 1) (x + 1, y - 1) (x - 1, y ) (x + 1, y ) (x - 1, y + 1) (x, y + 1) (x + 1, y + 1) 

This problem can also be resolved by using this approach.