1

我正在使用 Javascript、Canvas 和 KineticJS 制作一个小练习脚本，我想在其中向鼠标光标射击一些子弹。

唯一的问题是我真的找不到让子弹直接射向我的鼠标的方法。它似乎总是对角线而不是直接指向我的鼠标。现在我知道我的代码不是现在。我只是想问我如何才能让我的对象移动到我的鼠标而不是对角线。

我试过将 X 和 Y 分开设置。但这使它首先对角线跳跃，最后几个像素跳到正确的 X，这显然是不正确的。

这是一个小提琴（子弹功能在第166行）：http: //jsfiddle.net/eRQ3P/（注意：子弹现在没有处理；所以它会在几颗子弹后滞后！）（注2：射击到左上角，看看子弹是怎么飞的）

尽管如此; 这是我的项目符号函数，它获取目标 X 和 Y（它是鼠标 X 和 Y 的 X 和 Y 单击时）

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();
    }
}
4

1 回答 1

1

我以前从未使用过 Kinect.js，所以我不知道我是否以“Kinect”的方式进行了所有操作。但这基本上是我所做的。

首先你在第 110 行有一个错误

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

你错过了括号getWidth

现在开始计算拍摄地点。

    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;

我们需要做的是获得子弹所需的速度。我们通过获取目标和原点之间的距离来做到这一点。然后我们需要将该数字除以目标 x 和 y。为了使子弹以我们需要的速度移动，我们只需将该数字乘以您的速度变量。每次调用 draw 时，都会将速度添加到对象 x 和 y 坐标。

代码本身非常解释，希望对您有所帮助。

现场演示

于 2013-03-21T14:07:29.027 回答