html5画布绘制多个图像

Sora 发表于 Dev

素拉

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
        }
    };

我在创建一个算法时会遇到一些问题，该算法可以产生多个看起来像这样的矩形：

在此处输入图片说明

谁能帮我？

心灵联合

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

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);     

 });