Question

我正在尝试重新挖掘Dig Dig。我有一个功能，它可以获得我的＆＃34; avatar＆＃34;并将它所在的div变为黑色。目前它正在某种程度上发挥作用。当我移动化身时，div在不同的位置变成黑色，并且只有当我将元素沿直线移动而导致它离开可玩区域时，才能激活某些行。如果我直接向上或向下移动它，列中的某些div会激活，而其他div则被跳过。下面是相关代码，我留下了一个jsfiddle链接来显示。感谢您的帮助，如果我说的话仍然令人困惑，我会提前道歉。

jsfiddlelink

JQUERY

function blackoutSquare(row, col) {
  console.log('Blacking out %s,%s', row, col)
  $('.all div:nth-of-type(' + row + ') div:nth-child(' + col + ')')
    .addClass('black')
}
$(document).ready(function() {

  blackoutSquare(0, 0);
  docReady()
})
$()

function leftArrowPressed() {
  var element = document.getElementById("avatar");
  element.style.left = parseInt(element.style.left) - 5 + 'px';
}

function rightArrowPressed() {
  var element = document.getElementById("avatar");
  element.style.left = parseInt(element.style.left) + 5 + 'px';

}

function upArrowPressed() {
  var element = document.getElementById("avatar");
  element.style.top = parseInt(element.style.top) - 5 + 'px';
}

function downArrowPressed() {
  var element = document.getElementById("avatar");
  element.style.top = parseInt(element.style.top) + 5 + 'px';
}

function zKeyPressed() {
  var element = document.getElementById("avatar");
}

function updateSquares() {
  var element = document.getElementById("avatar");
  var blockwidth = 40;
  var blockheight = 50;
  var top = parseInt(element.style.top);
  var left = parseInt(element.style.left);

  var row = -1 + top / blockheight
  var col = left / blockwidth
  console.log('Got row: %s, col %s from top: %s and left: %s', row, col, top, left)
  blackoutSquare(Math.floor(row), Math.floor(col))
}

function moveSelection(evt) {
  switch (evt.keyCode) {
    case 65:
      leftArrowPressed();
      break;
    case 68:
      rightArrowPressed();
      break;
    case 87:
      upArrowPressed();
      break;
    case 83:
      downArrowPressed();
      break;
    case 90:
      zKeyPressed();
  }
  updateSquares()
};

function docReady() {

  window.addEventListener('keydown', moveSelection);
};

CSS

  .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;
        }

HTML

  <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>

（重新挖掘挖掘）我的黑客出了问题

0 个答案: