I’m learning 2D programming, so excuse my approximations, and please, don’t hesitate to correct me. I am just trying to fire a bullet from a player. I’m using HTML canvas (top left origin).
Here is a representation of my problem:
The black vector represent the position of the player (the grey square).
The green vector represent its direction.
The red disc represents the target.
The red vector represents the direction of a bullet, which will move in the direction of the target (red and dotted line).
The blue cross represents the point from where I really want to fire the bullet (and the blue and dotted line represents its movement).
This is how I draw the player (this is the player object. Position, direction and dimensions are 2D vectors):
ctx.save();
ctx.translate(this.position.x, this.position.y);
ctx.rotate(this.direction.getAngle());
ctx.drawImage(this.image, Math.round(-this.dimensions.x/2), Math.round(-this.dimensions.y/2), this.dimensions.x, this.dimensions.y);
ctx.restore();
This is how I instanciate a new bullet:
var bulletPosition = playerPosition.clone(); // Copy of the player position
var bulletDirection = Vector2D.substract(targetPosition, playerPosition).normalize(); // Difference between the player and the target, normalized
new Bullet(bulletPosition, bulletDirection);
This is how I move the bullet (this is the bullet object):
var speed = 5;
this.position.add(Vector2D.multiply(this.direction, speed));
And this is how I draw the bullet (this is the bullet object):
ctx.save();
ctx.translate(this.position.x, this.position.y);
ctx.rotate(this.direction.getAngle());
ctx.fillRect(0, 0, 3, 3);
ctx.restore();
How can I change the direction and position vectors of the bullet to ensure it is on the blue dotted line?
I think I should represent the shift with a vector, but I can’t see how to use it.
