Question

我尝试使用requestAnimFrame做一些简单的游戏，但动画不起作用，我不知道为什么。也许有人能帮忙吗？这是代码：

// requestAnimationFrame() shim by Paul Irish
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
            };
})();

//Create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

// The main game loop
var lastTime;

function main() {

    var now = Date.now();
    var dt = now - lastTime;

    draw();
    update(dt);

    lastTime = now;
    requestAnimFrame(main);
}

main();

function ball(){
    this.radius = 5;
    this.x = 300;
    this.y = 50;
    this.vx = 200;
    this.vy = 200;
    this.ax = 0;
    this.ay = 0;
    this.color = "red";
    this.draw = function(){
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
        ctx.fill();
    };
}

function draw() {
    newBall = new ball();
    newBall.draw(); 
}

function update(dt) {
    newBall = new ball();
    newBall.x += newBall.vx * dt;
}

在update(dt)功能球不动，我不知道为什么......

Answer 1

您的代码中存在多个错误：

您正在初始化函数之外的变量，总是使用初始值设定项（立即调用函数）。
正如kalley所说，你在每个抽奖的起始位置创建一个新球，而不是使用全局对象。
即使您的球正确绘制，它也会在下一帧内的绘图区域之外，因为Date.now（）以秒为单位测量（使用.getMilliseconds（））。
最后球保持在同一位置，因为每次抽奖后画布都没有清理。

您在寻找什么：

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    theBall.draw();
}

还有其他一些事情，但这个fiddle现在应该做。

使用requestAnimationFrame动画游戏

1 个答案: