Почему не работает алгоритм

Привет!

Пишу 2048 от нефиг делать, и никак не могу разобраться с движением вправо. Работает это так:

  • реверт массива (строки матрицы)
  • применение к ней того же алгоритма что и при движении влево
  • реверт обратно
  • рендер

Собственно движение происходит верно, но при проверке изменения матрицы почему-то сравнивается прошлое состояние и новое, будто бы был всего один реверт:

oldArr: 0,0,0,0 
        2,0,0,0
        0,0,0,0
        0,0,0,0;

newArray: 0,0,0,0 
          0,0,0,2
          0,0,0,0
          0,0,0,0
import '../pages/style.css'

class Game {
    score = 0;
    actionField = [
        [0, 0, 0, 0],  
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
    ]
  // (re)start game

  _generateNumber() {
    let spawnedNumber = 4;
    if (Math.floor(Math.random()*9) < 8) {
        spawnedNumber = 2;
    }
    return spawnedNumber
  }

  renderNumber() {
    let actionRows = document.querySelectorAll('.action-field__row');
    let randomRow = Math.floor(Math.random()*(1, 4));
    let actionItem = actionRows[randomRow].querySelectorAll('.action-field__item');
    let randomItem = Math.floor(Math.random()*(1, 4));

    let rendererNumber = this._generateNumber();

    if (this.actionField[randomRow][randomItem] == 0) {
        this.actionField[randomRow][randomItem] = rendererNumber;

        actionItem[randomItem].textContent = rendererNumber;
    }
    else this.renderNumber();
  }

  _moveGame(line) { // algorithm to moving lines
    let result = [];
  
    line.forEach((el) => {
        if (el == 0) {
        return
        }
        else result.push(el)
    });
  
    result.forEach((el, idx) => {
        if (el == result[idx+1]) {
        result[idx] = el*2;
        result.splice(idx+1, 1)
        return true
        }
    })
  
    while(result.length < line.length) {
        result.push(0)
    }

    return result
    }

  // move left, right, up, down

  _renderMove(resultOfMove) { 
    let testArr = this.actionField.slice();
    this.actionField = resultOfMove;
    
    let actionRows = document.querySelectorAll('.action-field__row');

    actionRows.forEach((row, rowIdx) => {
      row.querySelectorAll('.action-field__item').forEach((item, idx) => {
        if (this.actionField[rowIdx][idx] != 0) {
          item.textContent = this.actionField[rowIdx][idx]
        }
        else {
          item.textContent = '';
        }
      })
    });
    
    let oldArr = '';
    let newArray = '';

    testArr.forEach(item => {
      oldArr = oldArr + item.toString()
    })

    this.actionField.forEach(item => {
      newArray = newArray + item.toString()
    })

    console.log(oldArr, newArray)

    if (newArray != oldArr) {
      this.renderNumber()
    }
  }

  _moveLeft() {
    let newArr = [];
    this.actionField.forEach(item => {
        newArr.push(this._moveGame(item))
    });

    this._renderMove(newArr)

    
  }

  _moveRight() {
    let newArr = [];
    this.actionField.forEach(item => {
        newArr.push(this._moveGame(item.reverse()))
    });

    let resultArr = newArr.map(item => {
      return item.reverse()
    })

    this._renderMove(resultArr)
  }

  // add Event listeners to move

  addEventListeners() {
    document.addEventListener('keydown', e => {
        if (e.key == 'ArrowLeft') {
            this._moveLeft();
        }
    });
    document.addEventListener('keydown', e => {
      if (e.key == 'ArrowRight') {
          this._moveRight();
      }
  })

  }

  // add lesteners for win or lose

  // score counter
}

let game = new Game()

game.renderNumber()
game.addEventListeners()

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