Не получается правильно настроить цикл перебора элемнетов dom (проблема с операторами break и continue)
У меня такой вопрос.
Задача:
Интерфейс представляет собой ряд из четырех клеток.
- Нажатием мыши на клетку таблицы игрок выставляет на этой клетке цифру 22.
- Нажатием кнопки 'Move All Number Right' игрок может скинуть все плитки игрового поля вправо.
- Если при сбрасывании две плитки одного номинала «налетают» одна на другую, то они превращаются в одну, номинал которой равен сумме соединившихся плиток.
- Если при нажатии кнопки местоположение плиток или их номинал не изменится, то ход не совершается.
Я вроде бы все реализовал путем создания массива из элементов dom (клеток), затем прохождением циклом for по ним и сравнением по парам.
Проблема:
Если на крайней правой клетке стоит цифра 44, а до нее стоит цифра 22, я в соседней клетке выставляю цифру 22, нажимаю на кнопку, и вместо того, чтобы рядом стояли две клетки с цифрами 44 и 44, крайняя клетка выставляет число 88, чего не должно быть.
Я пробовал менять разные комбинации с break и continue, но пока ничего не получается.
Подскажите пожалуйста, что не то? (Идея сделать клон этой игры - https://play2048.co/)
HTML
<table>
<tr>
<th data-column="1" data-row="1" id="11"></th>
<th data-column="2" data-row="1" id="21"></th>
<th data-column="3" data-row="1" id="31"></th>
<th data-column="4" data-row="1" id="41"></th>
</tr>
</table>
<button id="button-right">Move All Number Right</button>
JS
const th = document.querySelectorAll('th');
const button = document.querySelector('button');
const buttonRight = document.getElementById('button-right');
const table = document.querySelector('table');
function onClick(e) {
if (e.target.nodeName = 'th') {
let clickedTh = e.target;
clickedTh.textContent = '22'
}
}
function moveNubmerRight(el) {
if (el.textContent !== '') {
let row = el.dataset.row
let column = el.dataset.column
for (let i = column; i < 4; i++) {
let currentCeil = document.getElementById(`${i}${row}`);
let counter = parseInt(i) + 1;
let nextCeil = document.getElementById(`${counter}${row}`);
if(currentCeil.textContent !== '' && nextCeil.textContent == '') {
nextCeil.textContent = currentCeil.textContent;
currentCeil.textContent = '';
break;
} else if (currentCeil.textContent == nextCeil.textContent) {
nextCeil.textContent *= 2;
currentCeil.textContent = '';
continue;
}
}
}
}
function onPressRight() {
[...th].forEach(el => {
moveNubmerRight(el);
});
}
buttonRight.addEventListener('click', onPressRight);
table.addEventListener('click', onClick)