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

Answers


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)


Need Your Help

How to create a comment system in PHP

php mysql comments system

How can i create a comment system in php which will not display the writers name.

cannot switch to webview using appium from native context.

android python android-webview appium selenium-chromedriver

I have been trying to access a webview from the my native context for the app but i have been unable to do so with the following error.