Javascript minesweeper expand messing up counter

Question

I made a minesweeper game in javascript that finally worked pretty smoothly until I added the expand () function (see below). I have 3 questions:

• When it expands, it adds too much to "flippedCount" (see code below) - in the image below the div on the right, "flippedCount" is displayed, and its 39 instead of 35.
• As a result, if a player exceeds 90 squares (winning amount) during "expand ()", the winning screen does not show.
• It also does not spread correctly (see images below).

Corresponding code and link below these 2 images

var flippedCount = 0; var alreadySetAsZero = []; var columnAmount = 10; function processClick(clicked) { //i use a "(this)" to pass as "(clicked)" nextToBombCheck( parseInt(clicked.id) ); checkWin(); } nextToBombCheck( boxNum ) { flippedCount++; document.getElementById("flipped").innerHTML = flippedCount; //long function setting "bombCount" to # bombs around clicked square goes here if ( bombCount !== 0 ) { //blah blah blah } else { alreadySetAsZero[ boxNum ] = "yes"; expand(boxNum); } } function expand( emptyBoxId ) { checkRightOfEmpty( emptyBoxId + 1 ); checkLeftOfEmpty( emptyBoxId - 1 ); checkAboveEmpty( emptyBoxId - columnAmount ); checkBelowEmpty( emptyBoxId + columnAmount ); } function checkRightOfEmpty( boxToTheRightId ) { //check if already marked as zero if ( alreadySetAsZero[ boxToTheRightId ] === "yes" ) return; //if box is at the edge if ( boxToTheRightId % columnAmount === ( 0 ) ) { //do nothing } else { nextToBombCheck( boxToTheRightId ); } } //and the rest are 3 similar functions 

I could not find a template with no extension or numbers added to the count of the number of translations.

link here

ps sorry for the name, I do not know what else to call it

Answer 1

You get the wrong score, because your algorithm does not take into account squares that have already been flipped, as a result, the squares get counted twice.

The easiest way to maintain accurate counts is to use the fact that 'getElementsByClassName' returns a live list of node.

Note: getElementsByClassName has good browser support , but if your browser requirements are different, you need to adjust this a bit.

At the input, initialize the list (the name of the variable is just to distinguish it from the previous name):

 var newFlippedCount = document.getElementsByClassName('flipped'); 

Each time you update a square with a bomb counting class, use this instead (also adds an inverted class):

 document.getElementById(boxNum).className = classList[bombCount] + ' flipped'; 

When you update the user interface with a new counter enabled, use:

 document.getElementById("flipped").innerHTML = newFlippedCount.length; 

Now your score is magical :)

Note. You can also solve this problem by checking that the window is upside down before increasing flippedCount .

You also occasionally received an error message in the console:

 Uncaught TypeError: Cannot set property 'className' of null 

on this line (around line: 298):

document.getElementById (boxNum) .className = classList [bombCount];

You should protect this either by checking the bounds, or simply by checking the return value before using it:

 var ele = document.getElementById(boxNum); if(!ele) return; ele.className = classList[bombCount] + ' flipped'; 

Demo

Edit: if you're interested, here is a high-level overview of the Minesweeper Cascade Algorithm

Update - cascade error detected

One of the reasons the cascade does not work correctly in successive repetitions is because the variable used to track cells that have already been set did not get reset in the new game. For correction:

 function start() { … // Reset to empty array alreadySetAsZero = []; ... } 

Updated script with additional debugging operations to help find the problem:

Demo

Answer 2

Although you use “already SetAsZero” to stop the squares counted several times, this does not take into account the squares with the bomb count. They will be counted several times in your extension method.

Answer 3

I found a problem that bothered me (counter), it counted the squares "-1" and "100"

i then added || boxToTheRightId > ( cellAmount - 1 ) || boxToTheRightId > ( cellAmount - 1 ) in checkRightOfEmpty and || boxToTheRightId < 0 || boxToTheRightId < 0 in checkLeftOfEmpty (in its if ), and it works great, thanks everyone, guys.