Question

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

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

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

这是一个小提琴（子弹功能在第166行）：http://jsfiddle.net/eRQ3P/（注意：子弹现在没有被丢弃;所以它会在几颗子弹之后滞后！）（注2：向上方射击）左转，看看子弹是如何过去的。

尽管如此;这是我的子弹函数，它获取目标X和Y（它是鼠标X的X和Y以及点击时的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();
    }
}

Answer 1

我之前从未使用过Kinect.js所以我不知道我是否以“Kinect”的方式做了所有事情。但这基本上就是我所做的。

首先你在第110行出错了

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

你错过了getWidth

上的parens

现在计算拍摄地点。

    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。为了让子弹以我们需要的速度移动，我们只需将该数字乘以您的速度变量。每次调用绘图时，都会将速度添加到对象x和y坐标。

代码本身很有说服力，希望它有所帮助。

<强> Live Demo

X和Y到某个目的地如何动画

1 个答案: