I'm attempting to achieve a seamless animation of a moving circle from one set of coordinates to another. In this particular scenario, the circle moves from (10, 10) to (50, 50). Below you can find the code for my Bullet class. Whenever the user presses the spacebar, a new instance of the Bullet object is created with the goal of animating it smoothly. How can I accomplish this?
class Bullet{
constructor(x, y){
this.x = x;
this.y = y;
this.size = 10;
}
draw(){
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI)
ctx.fill();
}
fire(locationX, locationY){
}
}
document.addEventListener('keydown', function(e){
if(e.key == ' '){
var currBullet = new Bullet(10, 10);
currBullet.fire(50, 50);
}
});
function reset(){
ctx.clearRect(0, 0, w, h);
}