Функции Javascript в игре на основе HTML-таблиц

Question

Это мой первый вопрос, поэтому будьте осторожны со мной:)

У меня есть таблица с тд в моем HTML, каждый со своим собственным идентификатором, соответствующим значению xy.Например:

<td id = Y9X1></td>
<td id = Y9X2></td>

И я хочу «захватить» этот элемент с помощью функции Например:

//the starting position of x and y
var x = 1;
var y = 1;

let id = 'Y' +y+'X'+x;

//grab the id 
function grabPoistion(id) {
    document.getElementById(id)
}
//move sprite on grid according to position
function moveSprite() {
    grabPoistion(id);
}

Вот что я в основном пытаюсь сделать:

Если x = 1 и y = 1, переместите «player» в ячейку таблицы с идентификатором Y1X1.

Это был мой исходный код, я просто надеялся, что есть способ ускорить его без необходимости делать операторы для каждой отдельной ячейки:

function moveSprite() {
	if(x==1 && y==1) {
		//move the player in the table to td with id =     Y1X1
	}
	else if(x==2 && y==1) {
		//move the player in the table to td with id =     Y1X2
	}	
}

Answer 1

При работе со столом вы можете легко использовать его rows и cells.Обычно нет необходимости работать с id с в течение td с.Честно говоря, я понятия не имею, о чем вы спрашиваете, но у меня был маленький кусочек кода, который перемещал x по таблице, нажимая клавиши со стрелками вверх, вниз, влево и вправо.Я оставил left и right для вас, возможно, вы сможете понять, как выбирать строки таблицы и их ячейки внутри таблицы и реализовывать их вверх и вниз самостоятельно.Сценарий тоже должен быть довольно простым - он намеренно довольно многословен.

const directions = {
  '37': left,
  '39': right,
  '38': up,
  '40': down
},
table = document.getElementsByTagName('table')[0],
  position = {
    x: 0,
    y: 0
  }
table.rows[0].cells[0].innerText = 'x';

window.addEventListener('keyup', e => {
  if (![37, 38, 39, 40].includes(e.keyCode)) return;
  move(e.keyCode);
})

function move(direction) {
  [...table.rows].forEach(r => [...r.cells].forEach(c => c.innerText = ''));
  directions[direction]();
  table.rows[position.y].cells[position.x].innerText = 'x';
}

function left() {
  if (position.x === 0) {
    if (position.y === 0) return;
    position.y -= 1;
    position.x = table.rows[position.y].cells.length - 1;
    return;
  }
  position.x -= 1;
}

function right() {
  if (position.x === table.rows[position.y].cells.length - 1) {
    if (position.y === table.rows.length - 1) return;
    position.y += 1;
    position.x = 0;
    return;
  }
  position.x += 1;
}

function up() {
  console.log('have fun implementing');
}

function down() {
  console.log('have fun implementing');
}

tr, td {
  border: 1px solid red;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

td {
  width: 25px;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

(нажмите «Выполнить фрагмент кода», затем один раз внутри таблицы)