Простая анимация шара HTML5 с использованием requestAnimationFrame

Question

Я только начинаю пытаться сделать анимацию с использованием 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); 
} 

И когда он нарисовал мяч, но он, похоже, совсем не движется. У меня нет определенного типа способов, я хочу, чтобы мяч был анимирован, просто любое движение было бы хорошим. Может ли кто-нибудь дать совет, где я могу ошибиться?

Answer 1

Из-за внешнего вида кажется, что вы просто рисуете дугу с одинаковыми координатами снова и снова (в центре на (100,100)).

Включение положения вашего шара в это было бы способом сделать местоположение рендеринга зависимым от положения объекта. Из того, что мне кажется, что-то вдоль линий следующего даст движение:

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(); 
}; 

Я, конечно, при условии, от того, как вы настроите вектор объект, поэтому я предполагаю, что х и у может быть доступен (Вектор) .X и (Вектор) .Y соответственно.

в любом случае просто мой подход к нему.