首页 文章

使用requestAnimationFrame的简单球动画HTML5

提问于
浏览 次
0

我刚开始尝试使用HTML5和JavaScript制作动画 . 目前我已经为球创建了一个JavaScript类 . 它有一个更新功能，应该更新球的位置和绘制功能，它应该绘制它：

/*global Vector*/
var Ball = (function () {
function Ball(pPostion) {
    this.setPosition(pPostion);
}

Ball.prototype.getPosition = function () {
    return this.mPosition;
};
Ball.prototype.setPosition = function (pPosition) {
    this.mPosition = pPosition;
};
Ball.prototype.draw = function (pContext) {
    pContext.save();
    pContext.beginPath();
    pContext.arc(100, 100, 20, 0, Math.PI * 2, true);
    pContext.closePath();
    pContext.fillStyle = '#ff0000';
    pContext.stroke();
    pContext.restore();
};

Ball.prototype.update = function () {
    this.getPosition().add(new Vector(10, 0));
};

return Ball;
}());

在我的主要部分中，我创建了以下方法：

function ballGameLoop() {
    ball.draw(mainContext);
    ball.update();
    requestAnimationFrame(ballGameLoop);
}

当被召唤时，它确实会吸引球，但它似乎根本不动 . 我没有特定类型的方式我希望球被动画，任何类型的运动都会很好 . 任何人都可以就我可能出错的地方提出任何建议吗？

javascript html5 animation

1 回答

  • 1

    从它的外观来看，你似乎只是在相同的坐标上反复绘制一个圆弧（中心位于（100,100）） .

    将Ball的位置合并到此将是使渲染位置取决于对象位置的方法 . 从它看来，下面的内容将提供运动：

    Ball.prototype.draw = function (pContext) {
    var coordinates = this.getPosition();
    pContext.save();
    pContext.beginPath();
    pContext.arc(coordinates.X, coordinates.Y, 20, 0, Math.PI * 2, true);
    pContext.closePath();
    pContext.fillStyle = '#ff0000';
    pContext.stroke();
    pContext.restore();
};

    我当然假设你如何设置Vector对象，所以我猜x和y可以分别通过（Vector）.X和（Vector）.Y访问 .

    无论如何只是我的方法 .

    回复于

相关问题