-2

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.

Florian Margaine
  • 274
  • 1
  • 8
  • Do you mean, how to find the new xy based on a speed and angle? – William Aug 31 '12 at 12:14
  • 1
    Duplicates: http://gamedev.stackexchange.com/questions/14469/2d-tower-defense-a-bullet-to-an-enemy and http://gamedev.stackexchange.com/questions/13326/how-to-generate-projectiles-with-the-direction-of-the-mouse-pointer and http://gamedev.stackexchange.com/questions/31656/what-algorithms-can-i-use-for-bullet-movement-toward-the-enemy – House Aug 31 '12 at 16:33

1 Answers1

3

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;
    }
};
bummzack
  • 22,646
  • 5
  • 61
  • 86