HTML Canvas创建多个动画矩形

Question

我正在尝试使用Canvas创建和HTML5游戏，需要创建多个块（每秒创建一个新块）。每次创建新块时，都需要使用动画“下降”屏幕。我可以让动画对一个元素正常工作，但是我不知道如何创建多个（并且创建它们的时间间隔与用于动画FPS的间隔不同）。

//update and animate the screen
var FPS = 60;
setInterval(function() {
  //update();
  draw();
}, 1000/FPS);

var y = 30;
var dy = 5;

//5 + Math.floor(Math.random()*6)

//draw the screen
function draw() {
    //var y = 30;
    context.save();
    context.clearRect(0,0,canvas.width, canvas.height);
    rounded_rect(1*40, y, 40, 40, 5, "red", "black");
    if (this.y < 360){
        y += dy;
    }
    context.restore();

};

rounded_rect只是另一个创建圆角矩形的函数。它工作正常。

Answer 1

的 Live Demo

这是一种方法。创建一个数组来保存块，以及一个Block对象用于框。然后我创建了两个方法，更新和渲染，更新框并将其绘制到画布。

阻止对象

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

Block.prototype.update = function(){
    if(this.y < 360){
        this.y+=dy   
    }else{
        this.y = 0;   
    }
};

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

检查时间是否已达到阈值

至于创建一个独立于帧速率的新的，您可以只做一次检查，看看自上次创建一个块以来是否已经过了1秒。

if(+new Date() > lastTime + minWait){
    lastTime = +new Date();
    // add a new block
    blocks.push(new Block(Math.random()*300, 0,20,20));
}

基本上这是如何工作的，如果当前时间大于上一次+ 1秒，它将创建一个新的，并将lastTime重置为当前时间。

其他信息

我强烈建议您查看requestAnimationFrame这是进行任何类型的画布渲染的正确方法。

完整来源

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

//update and animate the screen
var FPS = 60;
setInterval(function() {
  //update();
  draw();
}, 1000/FPS);

var dy = 5,
    blocks = [],
    minWait = 1000,
    lastTime = +new Date();

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

Block.prototype.update = function(){
    if(this.y < 360){
        this.y+=dy   
    }else{
        this.y = 0;   
    }
};

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

//draw the screen
function draw() {
    if(+new Date() > lastTime + minWait){
        lastTime = +new Date();
        blocks.push(new Block(Math.random()*300, 0,20,20));
    }

    context.clearRect(0,0,canvas.width, canvas.height);

        blocks.forEach(function(e){
            e.update();
            e.render();
        });
};