javascript minesweeper扩大搞乱柜台

时间:2013-08-23 02:10:22

标签: javascript html minesweeper

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

  1. 当它展开时,它会为“flippedCount”增加太多(见下面的代码) - 在右下方div中的图像显示“flippedCount”,而它的39则代替35。
  2. 因此,如果玩家在“展开()”期间超过90格(赢取金额),则获胜的屏幕不会显示。
  3. 它也没有正确展开(见下图)。
  4. 相关代码和链接位于这2张图片下方

    Image showing a partly completed minesweeper field

    Image showing an 'empty' minesweeper field

    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
    

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

    link here

    P.S。抱歉标题,我不知道还有什么可以称之为

3 个答案:

答案 0 :(得分:4)

您的计数不正确,因为您的算法没有考虑已翻转的正方形 - 导致正方形计数两次。

保持准确计数的最简单方法是利用'getElementsByClassName'返回实时节点列表的事实。

注意:getElementsByClassName有pretty good browser support,但如果您的浏览器要求不同,则需要稍微调整一下。

在输入时,初始化列表(变量名称只是为了区别于以前的名称):

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

每次使用炸弹计数类更新一个方格时,请使用此方法(同时添加翻转的类):

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

使用新的翻转计数更新UI时使用:

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

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

注意:你也可以通过在递增flippedCount之前检查框是否已被翻转来解决这个问题。

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

Uncaught TypeError: Cannot set property 'className' of null

在这一行(约为298行):

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

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

var ele = document.getElementById(boxNum);
if(!ele) return;

ele.className = classList[bombCount] + ' flipped';

Demo

编辑:如果您有兴趣,请参阅Minesweeper Cascade Algorithm

的高级概述

更新 - 发现级联错误

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

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

更新了其他调试语句,以帮助找到问题:

Demo

答案 1 :(得分:1)

虽然您使用“yetSetAsZero”来停止多次计算正方形,但这并未考虑具有炸弹计数的正方形。这些将在您的展开方法中多次计算。

答案 2 :(得分:0)

我发现困扰我的问题(柜台)它计算了方块“-1”和“100”

然后我将|| boxToTheRightId > ( cellAmount - 1 )添加到checkRightOfEmpty|| boxToTheRightId < 0添加到checkLeftOfEmpty(在他们的if语句中)并且它运行正常,谢谢你们。< / p>