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

117

11 марта 2019, 11:30

Пишу змейку.

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

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

Вот код:

(function() { 
    var rows = ''; 
    for(var i=0;i<=15;i++) { 
        rows += '<tr class="row" + i'; 
        for(var j=0;j<=25;j++) { 
            rows += '<td></td>'; 
        } 
        rows += '</tr>'; 
    } 
    document.getElementById('table').innerHTML = rows; 
  addEventListener("keyup", function(event) { 
    if (event.keyCode == 86) 
      document.body.style.background = ""; 
  });   
}());

#table { 
    margin: 0 auto; 
} 
td { 
    width: 10px; 
    height: 10px; 
    border: 1px solid black; 
} 
tr:nth-child(1) td:nth-child(1) { 
    background: red; 
} 
tr:nth-child(1) td:nth-child(2) { 
    background: red; 
} 
tr:nth-child(1) td:nth-child(3) { 
    background: red; 
} 
tr:nth-child(1) td:nth-child(4) { 
    background: red; 
}

<table id="table"> 
   <tr class="row"> 
       <td></td> 
   </tr> 
</table>

Answer 1

(function() { 
  var tbl = document.getElementById('table'); 
 
  var rows = ''; 
  for (var i = 0; i <= 15; i++) { 
    rows += '<tr class="row" + i'; 
    for (var j = 0; j <= 25; j++) { 
      rows += '<td></td>'; 
    } 
    rows += '</tr>'; 
  } 
  tbl.innerHTML = rows; 
 
  var i = 0; 
  var j = 0; 
   
  function markCell(i, j) { 
    //console.log(i, j); 
    var old = document.querySelector("td.red"); 
    if (old) 
      old.classList.remove("red"); 
    tbl.rows[i].cells[j].classList.add("red"); 
  } 
   
  /*setInterval(function() { 
    if (j >= 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; 
}

<table id="table"> 
  <tr class="row"> 
    <td></td> 
  </tr> 
</table>

Answer 2

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

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

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

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

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

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

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

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