html5画布绘制多个图像

Question

我有这段代码：http://jsfiddle.net/zyR9K/4/

var Enemies = {
        x: 25,
        y: 25,
        width: 20,
        height: 30,
        speed: 0.5,
        color: "#000",
        draw: function () {
            canvas.fillStyle = this.color;
            canvas.fillRect(this.x+1, this.y, this.width, this.height);
        },
        update: function () {
            this.y += this.speed
        }
    };

创建一个可以产生多个矩形的算法我有点问题：

任何人都可以帮助我吗？

Answer 1

var enemies = [ ];

var MAX_ROW = 5,
    MAX_COL = 10;

for(var r = 0; r < MAX_ROW; ++r) {
    enemies[r] = [ ];
    switch(r) {
    case 0:
        for(var i = 6; i < 0; --i) {
            enemies[0].push(new Enemy);
        }
        break;
    case 1:
        for(var i = 8; i < 0; --i) {
            enemies[1].push(new Enemy);
        }
        break;
    default:
        for(var i = MAX_COL; i < 0; --i) {
            enemies[r].push(new Enemy);
        }
    }
}

这个？

Answer 2

由于你需要多个敌人（复数），你需要一个管理每个敌人的对象。我将你的“敌人”代码移动到“敌人”中，因为它代表了一个单一的实例。然后创建了“Enemies”对象，其中包含几个“敌人”对象的“集合”，并对每个对象应用“绘制”和“更新”功能：

var canvas = $("#ContainerCanvas")[0].getContext('2d');
var CanvasWidth = 300;
var CanvasHeight = 300;
var FramePSet = 30;

var frameRunner;

var Enemies = {
    collection: [],
    draw: function () {
        canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);

        for (var i = 0; i < this.collection.length; i++){
            this.collection[i].draw();
        }
    },
    update: function () {
        for (var i = 0; i < this.collection.length; i++){
            this.collection[i].update();
        }
    }
};

var Enemy = function () {
    var model = {    
        x: 25,
        y: 25,
        width: 20,
        height: 30,
        speed: 0.5,
        color: "#000",
        draw: function () {
            canvas.fillStyle = this.color;
            canvas.fillRect(this.x+1, this.y, this.width, this.height);
        },
        update: function () {
            this.y += this.speed;
        }
    }
    return model;
};

function addEnemy(x, y){
    var nextEnemy = new Enemy();
    nextEnemy.x = x;
    nextEnemy.y = y;
    Enemies.collection.push(nextEnemy);
}

$(document).ready(function () {
    addEnemy(25, 25);
    addEnemy(60, 60);
    addEnemy(95, 95);

    frameRunner = setInterval(function () {
         Enemies.update();
         Enemies.draw();
     }, 1000 / FramePSet);     

 });

您可以将其复制并粘贴到小提琴的js窗格中。希望有所帮助。