javascript - 如何在游戏中添加多个 block

Question

我正在尝试制作一个简单的突破游戏，例如 this 。 我正在使用 HTML5 Canvas + JavaScript。

我的问题是我不知道如何(有效地)添加多个 block 。

我可以添加一个；但我无法在不更改此内容的情况下添加另一个:

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 更好的方法对于我游戏中的每个方 block 。如果有人能告诉我怎么做，我将不胜感激，谢谢!

请查看此 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);
}