CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
CaptainCarl
CaptainCarl

Reputation: 3489

X and Y to certain destination how to animate

I'm using Javascript, Canvas and KineticJS to make a little practice script where i want to shoot some bullets to my mouse cursor.

The only problem is that i can't really find a way to get the bullet to go straight for my mouse. It always seems to just go diagonal instead of straight to my mouse. Now i know my code isn't right now. I just like to ask how i can get my object to be moved to my mouse instead of diagonally.

I've tried by setting the X and Y seperate. but that makes it jump diagonal at first and the last few pixels to the proper X which obviously isn't right.

Here's a fiddle(Bullet function is on line 166): http://jsfiddle.net/eRQ3P/ (Note: The bullets aren't disposed of now; So it'll lag after a few bullets!)(Note2: Shoot to the upper left corner and see how the bullet flies)

Nonetheless; Here is my bullet function which gets a destination X and Y(It's the X and Y of the mouseX and Y on click)

function Bullet(destinationX, destinationY) {
    this.x = sprite.getX()+(sprite.getWidth()/2);
    this.y = sprite.getY()+(sprite.getHeight()/2);

    this.destinationX = destinationX;
    this.destinationY = destinationY;    

    this.finished = false;

    this.projectile = new Kinetic.Circle({
        x: this.x,
        y: this.y, 
        radius: 5,
        fill: 'pink',
        name: 'projectile'
    });

    this.draw = function(index) {
        var mayDelete = true;
        if (this.headingY == 'north') {
            if (this.projectile.getY() > this.destinationY) {
                this.projectile.setAbsolutePosition(this.projectile.getX() - (2*speed), this.projectile.getY() - (2*speed));
                //this.projectile.setX(this.projectile.getX() - (2*speed));
                mayDelete = false;
            }

        }

        if (mayDelete == true) {
            this.projectile.remove();
            bullets.splice(index, 1);
        }

        ammoLayer.draw();
    }
}

Upvotes: 1

Views: 371

Answers (1)

Loktar
Loktar

Reputation: 35309

I have never used Kinect.js before so I don't know if I did everything the "Kinect" way. But this is basically what I did.

First you had an error on line 110

bullet = new Bullet(cursor.getX() + (cursor.getWidth() / 2), cursor.getY() + (cursor.getHeight() / 2));

You were missing the parens on getWidth

Now on to calculating where to shoot.

    this.x = sprite.getX() + (sprite.getWidth() / 2);
    this.y = sprite.getY() + (sprite.getHeight() / 2);

    var targetX = destinationX - this.x,
        targetY = destinationY - this.y,
        distance = Math.sqrt(targetX * targetX + targetY * targetY);

    this.velX = (targetX / distance) * speed;
    this.velY = (targetY / distance) * speed;
    this.finished = false;

What we need to do is get the required velocity for our bullet. We do this by getting the distance between the target and the point of origin. We then need to divide that number by the targets x and y. To make the bullet travel as fast as we need it to, we just multiply that number by your speed variable. Every time you call draw you add the velocities to the objects x and y coordinates.

The code itself is pretty explanatory, hope it helps.

Live Demo

Upvotes: 1

Related Questions