如何在游戲中添加多個方塊

Question

我正在嘗試制作一個像這樣的簡單突破游戲。 我正在使用HTML5 Canvas + JavaScript。

我的問題是我不知道如何（有效地）添加多個塊。

我可以加一個； 但是我不能添加另一個而不必更改此設置：

var block = {
    width: 75,
    height: 20,
    x: 212,
    y: 0
};

ctx.fillRect(block.x, block.y, block.width, block.height);

對此：

var block2 = {
    width: 75,
    height: 20,
    x: 300,
    y: 0
};
ctx.fillRect(block2.x, block2.y, block2.width, block2.height);

必須有比手動創建新變量並對游戲中的每個塊使用ctx.fillRect更好的方法。 如果有人能告訴我怎么做，我將不勝感激，謝謝！

請檢查此JSFiddle以供參考： http : //jsfiddle.net/3hEJJ/1/

Answer 1

可以使用包含自更新方法的可創建實例的對象來代替使用對象文字：

function Block(x, y, w, h) {
   this.x = x;
   this.y = y;
   this.width = w;
   this.height = h;
}

Block.prototype.update = function(ctx) {
   ctx.fillRect(this.x, this.y, this.width, this.height); 
};

現在，您可以創建一堆對象：

var blocks = [];

for(var i = 0; i < 100; i++) {
    // get the x,y ... from somewhere, f.ex. another array
    blocks.push(new Block(x, y, w, h));
}

要更新，只需調用：

for(var i = 0; i < blocks.length; i++) {
    blocks[i].update(ctx);
}

Answer 2

http://jsfiddle.net/3hEJJ/2/檢查此小提琴

您可以選擇對象數組。

var blockArray=new Array();

blockArray.push({
    width: 75,
    height: 20,
    x: 212,
    y: 0
});
blockArray.push({
    width: 75,
    height: 20,
    x: 300,
    y: 0
});
blockArray.push({
    width: 70,
    height: 15,
    x: 230,
    y: 0
});

Answer 3

您可以使用循環來創建塊

所以一些偽代碼（我的JavaScript不是全部）：

foreach (i=0; i< maxRows; i++)
{
  for (j=0; j< maxBlocksPerRow;j++)
   {
      AddBlock(GetXpos(i),GetYPos(j));
    } 
}

function AddBlock(xpos, ypos)
{
    var block = {
    width: 75,
    height: 20,
    x: xpos,
    y: ypos
    };

     ctx.fillRect(block.x, block.y, block.width, block.height);
}

我將其余功能留給學生練習。

您可能想要將創建的塊添加到某個集合中，以便盡管可以對其進行跟蹤。