Почему не работает алгоритм
Привет!
Пишу 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()