Forums » Help » Code for aiming with a mouse

I am making a simple 2D platformer game in which the player has a gun with which she can aim towards the direction dictated by the mouse, firing a bullet once the mouse is clicked. So the aiming will be fully rotational, following the movements of the mouse. So far I have gotten no result and decided to ask for help here.

This may help.

move_toward_coord: function(x, y) {
    var distance_x = x - this.pos.x - this.size.x / 2;
    var distance_y = y - this.pos.y - this.size.y / 2;
    var speed = 30;
    this.vel.x = (distance_x > 1 ? 1 : -1) * speed * (Math.abs(distance_x) / (Math.abs(distance_x) + Math.abs(distance_y)));
    this.vel.y = (distance_y > 1 ? 1 : -1) * speed * (Math.abs(distance_y) / (Math.abs(distance_x) + Math.abs(distance_y)));
}

You're going to want to call move_to_coord in your bullet entity update function.

x and y will be the mouse coordinates. But it's a little trickier if you've loaded a level that doesn't all fit on the screen at once.

Something like this should do it though:

var x = ig.input.mouse.x + ig.game.screen.x;
var y = ig.input.mouse.y + ig.game.screen.y;

I have been doing it like this:

var mX = ig.input.mouse.x + ig.game.screen.x,
                mY = ig.input.mouse.y + ig.game.screen.y,
                centerX = player.pos.x + this.size.x/2,
                centerY = player.pos.y + this.size.y/2,
                angleToMouse = Math.atan2(mY - centerY, mX - centerX),
                initialVelocity = 100;

// then spawn the projectile and set

            projectile.vel.x = Math.cos(angleToMouse) * initialVelocity;
            projectile.vel.y = Math.sin(angleToMouse) * initialVelocity;

Joncom would your way be more performant? is it just as accurate?

@unstoppableCarl: They appear to be equally accurate. Would be interesting to do a test to find out which one performs quicker. I suspect yours does.

@unstoppableCarl: It appears that, yes, my method is more performant.

Code to check which is faster:

startTimer = function() {
    var start = new Date().getTime();
    return start;
};

stopTimer = function(start) {
    var end = new Date().getTime();
    var time = end - start;
    return time;
};

functionA = function(x, y, velocity) {
    var distance_x = x + 0; // replaced this.pos.x + this.size.x/2 with zero
    var distance_y = y + 0; // replaced this.pos.x + this.size.x/2 with zero
    var velocityX = (distance_x > 1 ? 1 : -1) * velocity * (Math.abs(distance_x) / (Math.abs(distance_x) + Math.abs(distance_y)));
    var velocityY = (distance_y > 1 ? 1 : -1) * velocity * (Math.abs(distance_y) / (Math.abs(distance_x) + Math.abs(distance_y)));
    return {
        x: velocityX,
        y: velocityY
    };
};

functionB = function(x, y, velocity) {
    var centerX = 0; // replaced this.pos.x + this.size.x/2 with zero
    var centerY = 0; // replaced this.pos.x + this.size.x/2 with zero
    var angleToTarget = Math.atan2(y - centerY, x - centerX);
    var velocityX = Math.cos(angleToTarget) * velocity;
    var velocityY = Math.sin(angleToTarget) * velocity;
    return {
        x: velocityX,
        y: velocityY
    };
};

var total_time_a = 0;
var total_time_b = 0;
var start, end, time, x, y, velocity, result;
for (var i = 0; i < 1000000; i++) {

    // Generate random x, y, and velocity values.
    x = Math.floor(Math.random() * 100000);
    y = Math.floor(Math.random() * 100000);
    velocity = Math.floor(Math.random() * 100000);

    // Time method A.
    start = startTimer();
    result = functionA(x, y, velocity);
    time = stopTimer(start);
    total_time_a += time;

    // Time method B.
    start = startTimer();
    result = functionB(x, y, velocity);
    time = stopTimer(start);
    total_time_b += time;
}

var winner = (total_time_a < total_time_b ? 'Method A' : 'Method B');
var speed_factor = Math.max(total_time_a, total_time_b) / Math.min(total_time_b, total_time_a);
var text = 'Winner: ' + winner + "\n" + 'It was ' + speed_factor.toFixed(2) + ' times faster.';

document.write('DONE! ');
document.write(text);