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.


1 Answer 1


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).


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

    // 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;
  • \$\begingroup\$ Wow, thanks for the great answer! Just a question, what is sprite there? \$\endgroup\$ Commented Aug 31, 2012 at 13:25
  • \$\begingroup\$ @FlorianMargaine Oh, sorry. Sprite is your player. So sprite.x refers to the X-position of your player etc. \$\endgroup\$
    – bummzack
    Commented Aug 31, 2012 at 13:28
  • \$\begingroup\$ Oh, makes a lot more sense! \$\endgroup\$ Commented Aug 31, 2012 at 13:31
  • \$\begingroup\$ @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. \$\endgroup\$
    – bummzack
    Commented Aug 31, 2012 at 13:36
  • \$\begingroup\$ 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 :-) \$\endgroup\$ Commented Aug 31, 2012 at 13:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .