Перемещение класса из одного тега в другой с помощью javascript

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», она идет вниз, а затем вверх, чтобы прослушивание было полным нажатием). Когда функция вызывается, ей передается событие. Мы знаем, что стандарт говорит, что свойство, называемое keyCode, будет существовать в событии, которое является числовым значением. Мы можем использовать это, чтобы определить, какой ключ был нажат.

Так что у нас есть этот HTML:

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

И мы стилизовать таким образом, мы можем видеть тд как квадраты цвета:

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/ (обратите внимание, щелкните в правой нижней панели с синим и красным кружками, а затем используйте клавиши вверх/вниз или влево/вправо для перемещения красного квадрата)