Why won't my sprite/entity move in a straight line?

Question

My entity is supposed to move in straight line toward the mouse. It's close, but not quite there yet. Here's a working demo to show you what I mean.

And here's a screenshot: The red represents the path the mouse took. As you can see, the entity does not take the same path.

Relevant code:

EntityPlayer = ig.Entity.extend({

    movementspeed: 400,

    update: function() {
        this.parent();
        this.move_toward_coord(ig.input.mouse.x, ig.input.mouse.y);
    },

    move_toward_coord: function(x, y) {
        var distance_to_target_x = x - this.pos.x - this.size.x / 2;
        var distance_to_target_y = y - this.pos.y - this.size.y / 2;
        if(Math.abs(distance_to_target_x) > 1 || Math.abs(distance_to_target_y) > 1) {
            this.vel.x = (distance_to_target_x > 1 ? 1 : -1) * this.movementspeed * (Math.abs(distance_to_target_x) / (Math.abs(distance_to_target_x) + Math.abs(distance_to_target_y)));
            this.vel.y = (distance_to_target_y > 1 ? 1 : -1) * this.movementspeed * (Math.abs(distance_to_target_y) / (Math.abs(distance_to_target_x) + Math.abs(distance_to_target_y)));
        } else {
            this.vel.y = 0;
            this.vel.x = 0;
        }
    }

});

I suspect there is something wrong with the move_to_coord method, but after tweaking for too many hours, I'm still not sure what it is...

Why doesn't the ship travel in a straight line?

Answer 1

Ughh!! I figured it out literally seconds after I posted this. Sorry, my bad. It was because of a property called maxVel which was limiting the speed on either the x or y velocity, sometimes one more than the other. >.<