# Direction of the bullet - how to have something else than left, right, top, bottom

I'm making a simple shooter game using canvas and javascript. The current code can be seen here.

To know which way I want the bullet to be shot, I simply have a direction property that can have 4 values (left, right, bottom, top), and I can then calculate the next position of the bullet easily.

However, I'd like to move the bullet to the mouse position, but I don't really see how to do this. How do I calculate the next position? I'm guessing there is some formula to calculate the line between two positions (the player's and the mouse's), but I don't have much idea yet.

So there is no obstacle, but I don't see how to calculate this, and be able have the next position of the bullet at each frame.

• Do you mean, how to find the new xy based on a speed and angle? – William Mariager Aug 31 '12 at 12:14
• – MichaelHouse Aug 31 '12 at 16:33

Your problem doesn't need any path-finding. This is where vectors come in handy. For your example, you would calculate a direction vector (which is the normalized vector pointing from your player to the mouse). Then you increase the position of your sprite by direction * speed * deltaTime or (with a fixed timestep) by direction * distanceToCoverEachUpdate.

It's also a good idea to perform a check of the remaining distance, so if your sprite is closer to the target node than the current speed, just move the sprite by the remaining distance instead (otherwise the sprite would overshoot the target).

Update:

If your libaray/game-engine doesn't come with a vector implementation, you could use something existing, or just work with x and y values separately.

This would then look like this:

// Set the target position
var targetX = mouse.x;
var targetY = mouse.y;

// Get the direction in x and y (delta)
var directionX = targetX - player.x;
var directionY = targetY - player.y;

// Normalize the direction
var len = Math.sqrt(directionX * directionX + directionY * directionY);
directionX /= len;
directionY /= len;

// Set the speed (move 100 pixels per second)
var speed = 100;

// Flag to check if we reached the target
var targetReached = false;

// Your update method with a delta time
// (time passed since last update in seconds)
function update(deltaTime){
// if we have reached the target, we can exit here
if(targetReached){
return;
}

// calculate remaining distance
var dx = targetX - player.x;
var dy = targetY - player.y;
var lenSquared = dx * dx + dy * dy;

// distance to cover in this update
var distToCover = deltaTime * speed;

// Check if the remaining distance is smaller than the
// distance to cover. If yes, set location to target location.
// Also set the "targetReached" flag to true
if(lenSquared < distToCover * distToCover){
player.x = targetX;
player.y = targetY;
targetReached = true;
} else {
player.x += distToCover * directionX;
player.y += distToCover * directionY;
}
};

• Wow, thanks for the great answer! Just a question, what is sprite there? – Florian Margaine Aug 31 '12 at 13:25
• @FlorianMargaine Oh, sorry. Sprite is your player. So sprite.x refers to the X-position of your player etc. – bummzack Aug 31 '12 at 13:28
• Oh, makes a lot more sense! – Florian Margaine Aug 31 '12 at 13:31
• @FlorianMargaine Changed the example code so that it reads player instead of sprite. I also changed the arriving part.. instead of taking a sqrt for the remaining distance, we can just as well set the player position to the target position. – bummzack Aug 31 '12 at 13:36
• Well, for the arriving part, I've already done it in my game engine, so I shouldn't worry about that. Thanks a lot for introducing me to these concepts, I haven't done any math since high school :-) – Florian Margaine Aug 31 '12 at 13:41