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 に答える