[英]HTML Canvas create multiple rectangles that are animated
I am trying to create and HTML5 game using Canvas that needs to have multiple blocks being created (create a new block every second). 我正在尝试使用需要创建多个块的Canvas创建HTML5游戏(每秒创建一个新块)。 Each time a new block is created, it needs to "fall" down the screen using an animation.
每次创建新块时,都需要使用动画使其“掉落”在屏幕上。 I can get the animation to work correctly for one element, but I'm not sure how to do it with creating multiple (and creating them at a time interval different that the interval being used for the animation FPS).
我可以使动画对于一个元素正常工作,但是我不确定如何创建多个动画(并以与动画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 is just another function that creates a rounded rectangle. rounded_rect只是另一个创建圆角矩形的函数。 It works correctly.
它可以正常工作。
This is one way to do it. 这是做到这一点的一种方法。 Create an array to hold your blocks, and a Block object to use for the boxes.
创建一个数组来保存您的块,并创建一个用于框的Block对象。 I then create two methods, update and render which update the box and draw it to the canvas.
然后,我创建两个方法,即update和render,它们将更新框并将其绘制到画布上。
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);
};
As for creating new ones independent of the frame rate you can just do a time check to see if 1 second has passed since the last time you created a block. 至于创建与帧速率无关的新帧,您可以进行一次时间检查,以查看自上次创建块以来是否经过了1秒钟。
if(+new Date() > lastTime + minWait){
lastTime = +new Date();
// add a new block
blocks.push(new Block(Math.random()*300, 0,20,20));
}
Basically how this works is if the current time is greater than the last time + 1 second it will create a new one, and reset the lastTime to the current time. 基本上,这是如何工作的,如果当前时间大于上次时间+ 1秒,它将创建一个新时间,并将lastTime重置为当前时间。
I highly suggest you look at requestAnimationFrame it is the proper and defacto way to do any sort of canvas rendering. 我强烈建议您查看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();
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.