Question

我正在尝试制作像this这样的简单突破游戏。我使用的是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);
}

我将其余的功能留给学生练习。

您可能希望将创建的块添加到某个集合中，以便您可以跟踪它们。

如何在游戏中添加多个块

3 个答案: