JavaScript 当 totalbrick == 0 时重绘砖块

Question

我是 Whosebug 和 JS 的新手。我的编码 class 有一个任务，我选择用 JS 创建游戏。目前，我仅使用 JS 创建了一个简单的突围游戏。我现在的问题是，我希望游戏是无休止的，所以当球与所有砖块相撞时，砖块将重新绘制，但分数将保持不变。我试着做点什么，其中之一是：

function redrawBricks(){
  if(brickColumnCount * brickRowCount < 1){
  for(var c=0; c<brickColumnCount; c++){
    for(var r=0; r<brickRowCount; r++){
      if(bricks[c][r].status == 1){
      var brickX = (c*(brickWidth+brickPadding)+brickOffsetleft);
      var brickY = (r*(brickHight+brickPadding)+brickOffsetTop);
      bricks[c][r].x = brickX;
      bricks[c][r].y = brickY;
      ctx.beginPath();
      ctx.rect(brickX, brickY, brickWidth, brickHight);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath;
        }
      }
    }
  }
}

第一个 if 语句后的测试与原始 drawBricks 相同。然后我获取了那个函数并将它放在我调用函数的地方。

我根本无法让它工作。但我的想法是用 if 语句创建一个新函数，所以如果 brickColumn * brickRow < 1 然后画这个（砖块）

如果你需要看代码，你可以看here但是注意我的语言是丹麦语，所以评论你可能看不懂xD而且我还没有把它写清楚，所以它可能不符合标准

Answer 1

查看 link 中的代码，我可以看到您将与砖块碰撞时的状态设置为 0。这意味着它没有被渲染。在此代码设计中，解决方案可能是检查所有 brick.status 何时为 0，然后将它们设置回 1。

function loop2DArray(arr, rows, cols, cb){
  for(let c = 0; c < cols; c++){
    for(let r = 0; r < rows; r++){
      cb(arr[c][r])
    }
  }
}
function redrawBricks(){
  let bricksRemaining = 0;
  loop2DArray(bricks, brickRowCount, brickColumnCount, brick => {
    if(brick.status == 1){
      bricksRemaining ++;
      var brickX = (c*(brickWidth+brickPadding)+brickOffsetleft);
      var brickY = (r*(brickHight+brickPadding)+brickOffsetTop);
      bricks[c][r].x = brickX;
      bricks[c][r].y = brickY;
      ctx.beginPath();
      ctx.rect(brickX, brickY, brickWidth, brickHight);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath;
    }
  });
  // if all bricks gone, recreate all of them
  if(bricksRemaining === 0){
    loop2DArray(bricks, brickRowCount, brickColumnCount, brick => {
      brick.status = 1;
    });
  }
}

但是，您会注意到许多循环，其中有许多未使用的迭代。这是低效且令人困惑的代码。更好的解决方案是将积木存储在更易于迭代的更合理的数据结构中。

例如，您可以将它们存储在平面数组中，并存储它们的 x、y 坐标，而不是从行/列索引生成它们。你将有一个函数来生成这个扁平的砖块阵列。然后你的碰撞函数将用于从数组中移除砖块，这样当循环数组时，它不需要条件并且迭代次数越少，砖块越少。最后，要检查所有的砖块是否都消失了，只需检查砖块数组的长度，现在你可以调用生成平面数组中所有砖块的初始函数。

祝你好运。

JavaScript 当 totalbrick == 0 时重绘砖块

JavaScript Redraw bricks when totalbrick == 0

javascript

function

2d-games