Question

我是javascript的新手，我正在创建一个“推动键盘按钮来推进这种黑色方块”的游戏类型。我试图弄清楚如何创建一个允许的原生javascript函数：

一个按键，为<td>元素提供“活动”类，它是下一行（或同级）的已经具有“活动”类的<td>。我还想让'当前'<td class="active">元素同时删除它的“活动”类。

到目前为止，我已设法创建一个功能，允许点击<td>并在所选的<td>上添加“有效”类，同时从中删除任何“有效”类周围的兄弟姐妹。当按下字母'm'时，而不是点击我想给下一个<td>“激活”。

道歉，如果我不好解释：这是我的代码：

var racerTable = document.getElementsByClassName("racer-table");
var p1items = document.getElementById("player1-strip").querySelectorAll("td");

var lastp1 = p1items[p1items.length-1];

for (var i = 0; i < p1items.length; i++) {
  p1items[i].addEventListener("click", player1Race);
}

function player1Race() {
  for (var i = 0; i < p1items.length; i++) {
    p1items[i].className = "";
  }
  
  // The expression below is where I need help
 
  this.className = "active";
  
 	if (lastp1.className === "active") {
  	alert("Player One Won!");
  } else {
  
  }
}

.racer-table td {
  background-color: #ededed;
  height: 50px;
  width: 50px;
}

.racer-table td.active {
  background-color: black;
}

<body>

  <table class="racer-table">

    <tr id="player1-strip">
      <td class="active"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </table>

</body>

的jsfiddle：

https://jsfiddle.net/sean_johnson/bgdb716d/139/

Answer 1

HTML - 请注意添加tabindex属性，该属性允许对焦元素，从而触发keydown事件。

<body>
  <table class="racer-table">
    <tr id="player1-strip" tabindex="1">
      <td class="active"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

<强>的JavaScript

// Get the player's strip
var control = document.getElementById("player1-strip");

// Add an event handler to the strip (tr)
control.addEventListener("keydown", function(event) {

  // Get the current active td
  var active = document.querySelector(".active");

  // Get the letter from the key pressed, lowercase it 
  var letter = String.fromCharCode(event.keyCode).toLowerCase();
  var next;

  // Show it in the console (Firebug)
  console.log(letter);

  // Act on the key
  switch (letter) {
    case 'm':
      // Get the next cell in the row
      next = document.querySelector(".active + td");

      // Remove the active class from the current active cell
      active.classList.remove("active");

      // If there is another cell
      if (next !== null) {

        // Make the next cell active
        next.classList.add("active");
      } else {
        console.log('Done');
      }
      console.log(next);
      break;
  }
});

这是一个简单的例子。您可以扩展开关语句以处理更多键。

在CentOS上的Firefox下编写 - 您可能需要调整其他浏览器或操作系统的代码。

在原生Javascript

1 个答案: