CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvasgame-physics
Romaine Herrera
Romaine Herrera

Reputation: 969

HTML 5 homing missile

This is my class

function Missile(drawX, drawY) {
    this.srcX = 0;
    this.srcY = 0;
    this.width = 16;
    this.r = this.width * 0.5;
    this.height = 10;
    this.drawX = drawX;
    this.drawY = drawY;
    this.img = planeHomingMissile;
    this.rotation = -90;
}

Missile.prototype.draw = function () {
    ctxHM.save();
    ctxHM.translate(this.drawX, this.drawY);
    ctxHM.rotate(this.rotation); 
    ctxHM.drawImage(this.img, -this.r, -this.r);
    ctxHM.restore();
}

And this is my JavaScript logic:

function shootHomingMissile() {
    //if(!missileOut) {
        hMissile = new Missile(player1.drawX + 22, player1.drawY + 32);
        missileOut = true;
    //}
}

function updateHomingMissile() {
    if(missileOut) {
        var targetX = 500 - hMissile.drawX;
        var targetY = 50 - hMissile.drawY;
        //The atan2() method returns the arctangent of the quotient of its arguments, as a numeric value between PI and -PI radians.
        //The number returned represents the counterclockwise angle in radians (not degrees) between the positive X axis and the point (x, y)
        var rotations = Math.atan2(targetY, targetX) * 180 / Math.PI;
        hMissile.rotation = rotations;

        var vx = bulletSpd * (90 - Math.abs(rotations)) / 90;
        var vy;
        if (rotations < 0)
            vy = -bulletSpd + Math.abs(vx);
        else
            vy = bulletSpd - Math.abs(vx);

        hMissile.drawX += vx;   
        hMissile.drawY += vy;   
    }
}

function drawHomingMissile() {
    ctxHM.clearRect(0,0,575,800);   

    hMissile.draw();
}

I want my missile(facing upwards) to target (500, 50) and face it while targeting.

the movement seems to work but its not facing the target its just keeps rotating but the missile is going to the target.

I'm a starting developer so my code is kind of mess, please help me :)

Upvotes: 0

Views: 973

Answers (1)

user1693593
user1693593

Reputation:

You are converting your angle from radians to degrees and is using that for your rotation() which require radians.

Try this in your Missile.prototype.draw:

ctxHM.rotate(this.rotation * Math.PI / 180);

(or simply keep the angle in radians at all stages)

Upvotes: 1

Related Questions