Fatal编程技术网
  • javascript/
  • 为什么我的Javascript动画会在一段时间后变慢

为什么我的Javascript动画会在一段时间后变慢

javascript html performance canvas

为什么我的Javascript动画会在一段时间后变慢,javascript,html,performance,canvas,Javascript,Html,Performance,Canvas,因此，我正在用画布制作这个节奏游戏，到目前为止，它所做的只是渲染接收器（块将与之碰撞的点，以便用户可以按下相应的按钮并获得点），并渲染舞者动画。但由于某些原因，在页面打开一段时间后，舞者的速度明显减慢，并继续逐渐减慢 我不知道为什么或者如何修复它。有人有什么想法吗 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 500; canvas.height =

因此，我正在用画布制作这个节奏游戏，到目前为止，它所做的只是渲染接收器（块将与之碰撞的点，以便用户可以按下相应的按钮并获得点），并渲染舞者动画。但由于某些原因，在页面打开一段时间后，舞者的速度明显减慢，并继续逐渐减慢

我不知道为什么或者如何修复它。有人有什么想法吗

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 600;
document.body.appendChild(canvas);

var spritesheet = null; 


var dancer = {


    time:0,
    speed:0,
    image:null,
    x:0,
    y:0,
    currentFrame:0,
    width:50,
    height:100,
    ready:false 

}

function onload() {

    spritesheet = new Image(); 
    spritesheet.src = "danceSheet.png"; 
    spritesheet.onload = initiate; 


}

function initiate() {

    game.startTime = new Date().getTime() / 1000; 
    dancer.x = (canvas.width / 2) - dancer.width; 
    dancer.y =  120;
    game.initiateReceivers(); 

    main(); 

}

var game = {

    startTime:0,
    currentTime:0,
    receivers:[],
    senders:[],
    lanes:[],
    drawDancer: function() {

        ctx.drawImage(spritesheet, dancer.width * dancer.currentFrame, 0,                                                dancer.width, dancer.height, dancer.x, dancer.y, dancer.width, dancer.height ); 

},
clearWindow: function() {

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

},
initiateReceivers: function() {
    var distanceRate = canvas.width / 4;
    var position = 30; 
    for(initiates = 0; initiates < 4; initiates++) {

        this.receivers[initiates] = new receivers;
        this.receivers[initiates].x = position; 
        this.receivers[initiates].y = 300; 
        position += distanceRate; 

    }

}

}

var gameUpdates = {

    updateMovement: function() {

    game.currentTime = new Date().getTime() / 1000; 
    dancer.time = game.currentTime - game.startTime;

    if(dancer.time >= 0.1) {

        game.startTime = new Date().getTime() / 1000; 
        dancer.currentFrame += 1; 
        if(dancer.currentFrame == 12) dancer.currentFrame = 0; 


        }

    },

collision: function(shapeA, shapeB) {


    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2); 

    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {                  

        return true; 

    }
        return false; 


}

}

function receivers() {

    this.x = 0;
    this.y = 0; 
    this.width = 60;
    this.height = 10; 

}

function senders() {

    this.x = 0;
    this.y = 0; 
    this.width = 60;
    this.height = 10; 
    this.lane = 0;
    this.status = true; 

}

function update() {

    gameUpdates.updateMovement();

}

function render() {

game.clearWindow();
game.drawDancer();

game.receivers.forEach( function(receiver) {
    ctx.rect(receiver.x,receiver.y,receiver.width,receiver.height);
    ctx.fillStyle = "red";
    ctx.fill(); 
    }
)
}

function main() {

update();
render(); 
requestAnimationFrame(main);

}

var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=500；
帆布高度=600；
document.body.appendChild（画布）；
var spritesheet=null；
舞蹈演员={
时间:0,，
速度：0，
图像：空，
x:0,，
y:0，
当前帧：0，
宽度：50，
身高：100，
就绪：错误
}
函数onload（）{
spritesheet=新图像（）；
spritesheet.src=“danceSheet.png”；
spritesheet.onload=启动；
}
函数初始化（）{
game.startTime=新日期（）.getTime（）/1000；
dancer.x=（canvas.width/2）-dancer.width；
舞者y=120；
game.initiateReceivers（）；
main（）；
}
var博弈={
开始时间：0，
当前时间：0，
接收人：[]，
发件人：[]，
车道：[]，
drawDancer:function（）{
ctx.drawImage（精灵表，dancer.width*dancer.currentFrame，0，dancer.width，dancer.height，dancer.x，dancer.y，dancer.width，dancer.height）；
},
clearWindow:function（）{
clearRect（0，0，canvas.width，canvas.height）；
},
启动器接收方：函数（）{
var distanceRate=canvas.width/4；
var位置=30；
对于（初始值=0；初始值<4；初始值++）{
此。接收者[发起]=新接收者；
this.receivers[initiates].x=位置；
此.receivers[initiates].y=300；
位置+=距离率；
}
}
}
var gameUpdates={
updateMovement:function（）{
game.currentTime=新日期（）.getTime（）/1000；
dancer.time=game.currentTime-game.startTime；
如果（dancer.time>=0.1）{
game.startTime=新日期（）.getTime（）/1000；
dancer.currentFrame+=1；
如果（dancer.currentFrame==12）dancer.currentFrame=0；
}
},
冲突：函数（shapeA、shapeB）{
//获取要检查的向量
变量vX=（shapeA.x+（shapeA.width/2））-（shapeB.x+（shapeB.width/2）），
vY=（shapeA.y+（shapeA.height/2））-（shapeB.y+（shapeB.height/2）），
//添加对象的一半宽度和一半高度
宽度=（shapeA.width/2）+（shapeB.width/2），
hHeights=（shapeA.height/2）+（shapeB.height/2）；
//如果x和y向量小于半宽或半高，则它们必须位于对象内部，从而导致碰撞
if（Math.abs（vX）
我试图了解您看到的速度，因此我调整了您的代码以获得每秒帧数。还没有找到下降的原因

更新

我发现画框从矩形上掉下来了。我修改了代码，使用fillRect将填充样式置于循环之外。这似乎已经解决了框架下降的问题

var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=500；
帆布高度=600；
document.body.appendChild（画布）；
var spritesheet=null；
舞蹈演员={
时间:0,，
速度：0，
图像：空，
x:0,，
y:0，
当前帧：0，
宽度：50，
身高：100，
就绪：错误
}
函数onload（）{
spritesheet=document.createElement（'canvas'）；
spritesheet.width=（dancer.width*12）；
spritesheet.height=dancer.height；
var ctx=spritesheet.getContext（'2d'）；
ctx.font=“30px Arial”；
ctx.fillStyle=“黑色”；
ctx.strokeStyle=“红色”；
对于（变量i=0；i<12；i++）{
var x=（i*舞者宽度）+10；
ctx.fillText（i，x，60）；
ctx.beginPath（）；
ctx.rect（i*dancer.width，0，dancer.width，dancer.height）；
ctx.stroke（）；
}
发起（）；
}
函数初始化（）{
game.startTime=新日期（）.getTime（）/1000；
dancer.x=（canvas.width/2）-dancer.width；
舞者y=120；
game.initiateReceivers（）；
main（）；
}
var博弈={
开始时间：0，
当前时间：0，
接收人：[]，
发件人：[]，
车道：[]，
drawDancer:function（）{
ctx.drawImage（精灵表，dancer.width*dancer.currentFrame，0，dancer.width，dancer.height，dancer.x，dancer.y，dancer.width，dancer.height）；
//ctx.strokeStyle=“红色”；
//ctx.beginPath（）；
//ctx.lineWidth=3；
//ctx.rect（dancer.x，dancer.y，dancer.width，dancer.height）；
//ctx.stroke（）；
},
clearWindow:function（）{
clearRect（0，0，canvas.width，canvas.height）；
},
启动器接收方：函数（）{
var distanceRate=canvas.width/4；
var位置=30；
对于（初始值=0；初始值<4；初始值++）{
此。接收者[发起]=新接收者；
this.receivers[initiates].x=位置；
此.receivers[initiates].y=300；
位置+=距离率；
}
}
};
var gameUpdates={
updateMovement:function（）{
game.currentTime=新日期（）.getTime（）/1000；
dancer.time=game.currentTime-game.startTime；
如果（dancer.time>