Почему кусок тетриса падает одновременно, а не по одному? - PullRequest
Новая
       19

Почему кусок тетриса падает одновременно, а не по одному?

0 голосов
/ 26 февраля 2020

Я делаю тетрис в JS. При падении блока он позволяет блоку достичь дна экрана за один проход, а не медленно приближается к дну. Я попытался создать переменную, которая хранит изменения, которые будут сделаны так, чтобы он смотрел только на текущую доску, но не повезло. После проверки, является ли выходная переменная == для платы, кажется, что плата все-таки меняется, поскольку она возвращает true. Что происходит?

РЕДАКТИРОВАТЬ: я успешно сделал мелкую копию массива. Тем не менее, он все же сразу падает на дно. В чем дело? 

var data = [];
          function array(x, text) {
              var y = [];
              for (var i = 0; i < x-1; i++) {y.push(text);}
              return y;
          }          
for (var i=0; i<20; i++){data.push(array(10, "b"));}
function draw(){
    var j;
    var i;
    var dataOut = [...data];
    for (i = 0; i < data.length - 1; i++){
        for (j = 0; j < data[i].length; j++){
            if (data[i][j] == "a" && data[i + 1][j] == "b" && i < data.length - 1) {
                
                dataOut[i][j] = "b";
                dataOut[i + 1][j] = "a";
               
            }
        }
    }
    data = dataOut;
}
data[0][4] = 'a';
draw();
console.log(data);

1 Ответ

2 голосов
/ 26 февраля 2020

В JavaScript массивы и объекты передаются по ссылке. Поэтому, когда вы делаете это: 

var dataOut = data;

Обе эти ссылки указывают на один и тот же массив. Вы можете клонировать массив каждый раз: 

var dataOut = JSON.parse(JSON.stringify(data));

Или просто вернуть свой l oop на go снизу вверх. Я позволил себе переименовать переменные, чтобы сделать это более ясным. Попробуйте это ниже: 

var chars = {empty: '.', block: '#'},
    grid = createEmptyGrid(10, 20);

function createEmptyGrid(width, height) {
  var result = [], x, y;
  for (y = 0; y < height; y++) {
    var row = [];
    for (x = 0; x < width; x++) {
      row.push(chars.empty);
    }
    result.push(row);
  }
  return result;
}

function draw() {
  var x, y;
  for (y = grid.length - 1; y > 0; y--) {
    for (x = 0; x < grid[y].length; x++) {
      if (grid[y][x] === chars.empty && grid[y - 1][x] === chars.block) {
        grid[y][x] = chars.block;
        grid[y - 1][x] = chars.empty;
      }
    }
  }
}

// Just for the demo
var t = 0, loop = setInterval(function () {
  draw();
  if (grid[0].includes(chars.block)) {
    clearInterval(loop);
    grid[9] = 'GAME OVER!'.split('');
  }
  document.body.innerHTML = ''
                          +   grid.map(row => row.join(' ')).join('\n')
                          + '
'; if (t% 20 === 0) {grid [0] [Math.floor (Math.random () * 10)] = chars.block; } t ++; }, 20);
...