Не получается правильно настроить цикл перебора элемнетов dom (проблема с операторами break и continue)

У меня такой вопрос.

Задача:

Интерфейс представляет собой ряд из четырех клеток.

  1. Нажатием мыши на клетку таблицы игрок выставляет на этой клетке цифру 22.
  2. Нажатием кнопки 'Move All Number Right' игрок может скинуть все плитки игрового поля вправо.
  3. Если при сбрасывании две плитки одного номинала «налетают» одна на другую, то они превращаются в одну, номинал которой равен сумме соединившихся плиток.
  4. Если при нажатии кнопки местоположение плиток или их номинал не изменится, то ход не совершается.

Я вроде бы все реализовал путем создания массива из элементов 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)

Ответы (0 шт):