Сдвиг элемента по нажатию клавиши

#javascript #css

Пишу змейку. 

Нужно сдвигать 4 ячейки(длина змеи) по нажатию клавиш стрелок. 

У меня написано условие, но не знаю как продолжить. Каким образом можно это реализовать? 

Вот код:



(function() {
    var rows = '';
    for(var i=0;i<=15;i++) {
        rows += '
   
       
   




    

Ответы

Ответ 1

(function() {
  var tbl = document.getElementById('table');

  var rows = '';
  for (var i = 0; i <= 15; i++) {
    rows += '= tbl.rows[0].cells.length) {
      j = 0;
      i++;
    }
    if (i >= tbl.rows.length) {
      i = 0;
    }

    markCell(i, j);

    j++;
  }, 200);*/
  
  addEventListener("keydown", function(event) {
    // up - 38, down - 40, left - 37, right - 39
    //console.log(event.keyCode);
           if (event.keyCode == 38) { // up
      i--;
      if (i < 0)
        i = tbl.rows.length - 1;
    } else if (event.keyCode == 40) { // down
      i++;
      if (i >= tbl.rows.length)
        i = 0;
    } else if (event.keyCode == 37) { // left
      j--;
      if (j < 0)
        j = tbl.rows[0].cells.length - 1;
    } else if (event.keyCode == 39) { // right
      j++;
      if (j >= tbl.rows[0].cells.length)
        j = 0;
    }
    markCell(i, j);
  });    
  
  markCell(i, j);
}());
#table {
  margin: 0 auto;
}

td {
  width: 10px;
  height: 10px;
  border: 1px solid black;
}

td.red {
  background: red;
}



Ответ 2

Именно сдвигать ничего не нужно. 
А нужен двумерный массив, с координатами ваших ячеек и начальная точка (голова змеи). 

Еще нужен объект со свойствами и методами, а также сетИнтервал или requestAnimationFrame. 

И нужен алгоритм. 

Змея - это объект, ячейки змеи - свойства,  в которых объект с текущими координатами,
текущим направлением и массив для сбора новых направлений (новое направление при нажатии
на стрелку добавляется в конец массива, а при отрисовке берется первый элемент). 

Отрисовка змеи (движение) - проходим циклом по ячейкам змеи и отрисовываем согласно
координатам и текущему направлению (делается это циклично через сетИнтервал например)

Отслеживание направления (изгибы змеи) - 
 - Самое простое это каждая ячейка змеи перед отрисовкой проверяет координаты предыдущей:
если к своим текущим координатам прибавить (согласно текущему направлению - или отнять
единицу от X или Y), то получим ли координаты предыдущей? Если да то отрисовываем -
наша змея не меняла направление. А если нет, то из массива сбора новых направлений
(для этой конкретной ячейки) выбрасываем первый элемент и таким образом для отрисовки
уже берется следующее направление, т.е. наша ячейка меняет направление.

Стоит учесть что выше сказанное не относится к первой ячейке, т.е. голове змеи. Голова
змеи должна сразу же поменять свое направление после нажатия стрелки. Она же не может
сверять свое направление с предыдущей, которой у головы нет.

Еще надо реализовать проверку на коллизии (столкновения).