javascript minesweeper扩大搞乱柜台

Question

我在javascript中制作了一个扫雷游戏,最后运行起来非常顺利,直到我添加了"expand()"功能(见下文).我有3个问题:

1. 当它扩展时,它会增加太多"flippedCount"(见下面的代码) - 在右下方div中的图像显示"flippedCount",而它的39则代替35.
2. 结果,如果玩家在"展开()"期间超过90格(赢得金额),则获胜屏幕不会显示.
3. 它也没有正确扩展(见下图).

相关代码和链接低于这两个图像

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

我无法找到缺少扩展的模式或添加到翻转计数的数字.

链接在这里

ps抱歉标题我不知道还有什么叫它

Answer 1

您得到的计数不正确，因为您的算法没有考虑已经翻转的方块 - 结果是方块被计数两次。

\n\n

保持准确计数的最简单方法是利用“getElementsByClassName”返回活动节点列表这一事实。

\n\n

注意：getElementsByClassName 有很好的浏览器支持，但是如果您的浏览器要求不同，您将需要对此进行一些调整。

\n\n

输入时，初始化列表（变量名称只是为了与以前的名称区分开）：

\n\n

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

\n\n

每次用炸弹计数类更新方块时，请使用它（也添加翻转类）：

\n\n

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

\n\n

当您使用新的翻转计数更新 UI 时，请使用：

\n\n

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

\n\n

你的计数现在神奇地正确了:)

\n\n

注意：您还可以通过检查在递增之前框是否已翻转来解决此问题flippedCount。

\n\n

您还会定期在控制台中收到错误：

\n\n

Uncaught TypeError: Cannot set property \'className\' of null\n

\n\n

在这一行（第298行附近）：

\n\n

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

\n\n

您应该通过检查边界或仅在使用前检查返回值来保护它：

\n\n

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

\n\n

演示

\n\n

编辑：如果您有兴趣，这里是扫雷级联算法的高级概述

\n\n

更新 - 发现级联错误

\n\n

级联在连续重播中无法正常工作的原因之一是用于跟踪已设置为零的单元格的变量未在新游戏中重置。如需修复：

\n\n

function start() {\n   \xe2\x80\xa6\n   // Reset to empty array\n   alreadySetAsZero = [];\n   ...\n}\n

\n\n

使用附加调试语句更新了小提琴以帮助查找问题：

\n\n

演示

\n