Javascript: как проще всего передвинуть фишку на игровом поле?

Ничего проще как-то не придумалось, в предыдущей заметке я делал куда замудрёней. Но если "ходить" не по фоновому рисунку, а просто по таблице, то не нужно ни позиционировать элементы через CSS, ни рассчитывать каких-либо размеров.

Метод start готовит "игровое поле" в виде таблицы, пустым ячейкам которой присвоены идентификаторы, и вызывает на периодическое выполнение метод move, выполняющий перемещение фигур по клеткам. Вызывается start после полной загрузки страницы.

Стиль таблицы задан так, чтобы все ячейки были одинаковой ширины, без лишних отступов и с обрамлением в 1 пиксель толщиной.

Метод move, если нужно, включает или выключает видимость элементов и рассчитывает их новое положение, после чего получает по идентификатору элемент myItem и методом appendChild добавляет его в нужную ячейку.

Вот весь пример в работе непосредственно на странице и его исходный код:

<style>
 .contentTable {
  table-layout: fixed;
  white-space: nowrap;
  border-spacing: 0;
 }
 .contentCell {
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
  margin: 0;
  padding: 0;
 }
</style>

<div id="contentTable"></div>
<div id="imgBox">
</div>
<img src="http://nickolay.info/jscript/funnyPawns/p1.gif" id="imgMove" style="visibility:hidden;">

<script>
var rows = 10, cols = 10, step = 1, first = true;

function start () {
 var s = '<table class="contentTable">'+"\n";
 for (var i=1; i<=rows; i++) {
  s += '<tr>'+"\n";
  for (var j=1; j<=cols; j++) {
   s += '<td class="contentCell" id="cell'+(cols*(i-1)+j)+'"></td>'+"\n";
  }
  s += '</tr>'+"\n";
 }
 s += '</table>'+"\n";
 document.getElementById('contentTable').innerHTML = s;
 window.setInterval('move()',200);
}

function move () {
 if (first) {
  first = false;
  document.getElementById('imgMove').style.visibility = 'visible';
 }
 var myItem = document.getElementById('imgMove');
 document.getElementById('cell'+step).appendChild(myItem);
 step++;
 if (step>rows*cols) step = 1;
}

window.addEventListener('load', function () {
 start ();
}, false);
</script>
<noscript><div align="center">Включите Javascript для работы приложения</div></noscript>

25.01.2019, 18:30 [1843 просмотра]