Javascript （重新制作Dig Dig）我的潜水舱停电有问题吗

我在试着重新挖掘。我有一个功能，它可以获取我的“化身”的位置，并将其上的div转换为黑色。目前，它在某种程度上正在发挥作用。当我移动阿凡达时，div在不同的位置变黑，只有当我沿直线移动元素，将其移出可玩区域时，才能激活某些行。如果我直接向上或向下移动，列中的一些div将激活，而其他div将被跳过。下面是相关代码，我留下了一个JSFIDLE链接来展示。谢谢你的帮助，如果我说的话仍然让人困惑，我提前道歉

JQUERY

函数blackoutSquare（行、列）{
console.log（'s、%s、行、列变黑）
$（'.all div:n类型（'+row+'）div:n子级（'+col+'））
.addClass（“黑色”）
}
$（文档）.ready（函数（）{
blackoutSquare（0,0）；
docReady（）
})
$()
函数leftarrowspressed（）{
var元素=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）-5+'px'；
}
函数rightarrowspressed（）{
var元素=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）+5+'px'；
}
函数upArrowPressed（）{
var元素=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）-5+'px'；
}
函数向下箭头按下（）{
var元素=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）+5+'px'；
}
函数zKeyPressed（）{
var元素=document.getElementById（“化身”）；
}
函数updateSquares（）{
var元素=document.getElementById（“化身”）；
var块宽度=40；
var块高=50；
var top=parseInt（element.style.top）；
var left=parseInt（element.style.left）；
变量行=-1+顶部/区块高度
var col=左/块宽度
console.log（'获取行：%s，列%s，从顶部：%s和左侧：%s'，行，列，顶部，左侧）
blackoutSquare（数学地板（行），数学地板（列））
}
功能选择（evt）{
开关（evt.keyCode）{
案例65：
左箭头按下（）；
打破
案例68：
右箭头按下（）；
打破
案例87：
向上箭头按下（）；
打破
案例83：
向下箭头按下（）；
打破
案例90：
zKeyPressed（）；
}
updateSquares（）
};
函数docReady（）{
window.addEventListener（'keydown'，moveSelection）；
};

CSS

HTML

为什么不把这些放在一个片段中呢。你知道在这个页面中有一个片段选项。哦，那可能是明智的。抱歉，我是堆栈溢出新手。出现此问题的原因是

blackoutSquare（Math.floor（row）、Math.floor（col））

函数参数错误。我的意思是，实际上，你有12行。但是在您的代码中只有4行。若你们往上走，你们可以在控制台上看到它从4,6跳到3,6。4,16和4,26呢？它们都不见了。您可以创建更多行或编辑这些参数

var row=-1+top/blockheight

以发送到

blackoutSquare（）

函数。这实际上是一道数学题，我愿意在我有时间的时候尽快解决这个问题。好的，谢谢你的意见。我会调查的。你为什么不把这些放在一个片段里呢。你知道在这个页面中有一个片段选项。哦，那可能是明智的。抱歉，我是堆栈溢出新手。出现此问题的原因是

blackoutSquare（Math.floor（row）、Math.floor（col））

函数参数错误。我的意思是，实际上，你有12行。但是在您的代码中只有4行。若你们往上走，你们可以在控制台上看到它从4,6跳到3,6。4,16和4,26呢？它们都不见了。您可以创建更多行或编辑这些参数

var row=-1+top/blockheight

以发送到

blackoutSquare（）

函数。这实际上是一道数学题，我愿意在我有时间的时候尽快解决这个问题。好的，谢谢你的意见。我会调查的。

  .black {
          background-color:black !important;
}
  .row1 {
        width:500px;
      }
      .row1 div {
          display:inline-block;
          width:50px;
          height:40px;
          background-color:#0000FF;
          margin:0px;
          vertical-align: top;
        }

  <div class="row1">
            <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
          </div>