Question

我正在尝试在javascript中创建一个函数，每次释放一个键时，它会在页面上推进一些形状（表格中的彩色单元格）。我是一个新手，所以现在，我只想弄清楚如何在用户键入时将“活动”类从一个<td>标记移动到另一个标记。

<table class="racer_table">
      <tr id="player1">
        <td class="active"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr id="player2">
        <td class="active"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

Answer 1

你有一个有趣的挑战。基于HTML，我假设你想要一个多人游戏。我会把那部分留给你。但是这里是你如何为一个玩家做到这一点（然后只是跟踪谁是活跃的，你可以让它适应两个玩家）：

使用document.onkeyup如果为其分配了一个功能，每次按键“向上”时都会被调用（例如，当我按下“k”键时，它会向下然后向上，所以听因为up是一个完整的按键）。调用该函数时，会传递一个事件。我们知道标准表示事件中存在一个名为keyCode的属性，它是一个数值。我们可以使用它来识别按下了哪个键。

所以说我们有这个HTML：

<table class="racer_table">
  <tr>
    <td class="active"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

我们将其设置为样式，以便我们可以将td视为颜色的正方形：

td {
  width: 50px;
  height: 50px;
  background-color: blue;
}

td.active {
  background-color: red;
}

然后使用此JavaScript：

var UP = 38;
var DOWN = 40;
var LEFT = 37;
var RIGHT = 39;

var racerTable = document.getElementsByClassName('racer_table')[0];

document.onkeyup = function(e) {
  switch (e.keyCode) {
    case UP:
    case LEFT:
      var cells = racerTable.getElementsByTagName('td');
      for (var i=0; i < cells.length; i++) {
        if (cells[i].className.indexOf('active') !== -1) {
          if (i === 0) {
            // do nothing, all the way left
          } else {
            cells[i].className = '';
            cells[i-1].className = 'active';
            break;
          }
        }
      }
      break;

    case DOWN:
    case RIGHT:
      var cells = racerTable.getElementsByTagName('td');
      for (var i=0; i < cells.length; i++) {
        if (cells[i].className.indexOf('active') !== -1) {
          if (i === (cells.length - 1)) {
            // do nothing, all the way right
          } else {
            cells[i].className = '';
            cells[i+1].className = 'active';
            break;
          }
        }
      }
      break;
  }
}

JSFiddle：https://jsfiddle.net/5wuc0mre/（注意，点击带有蓝色和红色圆圈的右下方窗格，然后使用上/下或左/右键移动红色方块）

使用javascript将类从一个标记移动到另一个标记

1 个答案: