最大移動速度スプライトPIXI.js

Question

私は、ユーザーがスプライトの周りを移動できる単純なゲームを書いています。ステージをクリックすると、スプライトがその位置に向かって移動します。私が直面している問題は、このスプライトのスピードを設定したいということです。私はユーザーがクリックしようとしている値を知らない。私は、スプライトの速度が常に同じである方法を考えることはできません。

PIXI.jsのものは、スプライトのxとyの移動速度を設定できることです。私はこれらの移動速度の結果を常に同じにしたいとします。たとえば、スプライトが下に移動すると、yスピードは5になります。スプライトが斜めに移動しているとき、対角線の速度は5になります。このスクリプトは、私が思いついた解決策は、私がクリックするたびに速度が異なるので、完全には機能しません。

この問題を解決する方法はありますか？

var Container = PIXI.Container, 
autoDetectRenderer = PIXI.autoDetectRenderer, 
loader = PIXI.loader, 
resources = PIXI.loader.resources, 
Sprite = PIXI.Sprite; 

var stage = new PIXI.Container(), 
renderer = PIXI.autoDetectRenderer(1000, 1000); 
document.body.appendChild(renderer.view); 

PIXI.loader 
    .add("rocket.png") 
    .load(setup); 

var rocket, state; 

function setup() { 

    //Create the `tileset` sprite from the texture 
    var texture = PIXI.utils.TextureCache["animal.png"]; 

    //Create a rectangle object that defines the position and 
    //size of the sub-image you want to extract from the texture 
    var rectangle = new PIXI.Rectangle(192, 128, 32, 32); 

    //Tell the texture to use that rectangular section 
    texture.frame = rectangle; 

    //Create the sprite from the texture 
    rocket = new Sprite(texture); 
    rocket.anchor.x = 0.5; 
    rocket.anchor.y = 0.5; 
    rocket.x = 50; 
    rocket.y = 50; 
    rocket.vx = 0; 
    rocket.vy = 0; 

    //Add the rocket to the stage 
    stage.addChild(rocket); 

    document.addEventListener("click", function(){ 
    x = event.clientX - rocket.x; 
    y = event.clientY - rocket.y; 
    rocket.vmax = 5; 
    var total = Math.abs(x) + Math.abs(y); 
    var tx = x/total; 
    var ty = y/total; 
    rocket.vx = tx*rocket.vmax; 
    rocket.vy = ty*rocket.vmax; 
    }); 

    state = play; 
    gameLoop(); 
} 

function gameLoop() { 

    //Loop this function at 60 frames per second 
    requestAnimationFrame(gameLoop); 
    state(); 

    //Render the stage to see the animation 
    renderer.render(stage); 
} 

function play(){ 
    rocket.x += rocket.vx; 
    rocket.y += rocket.vy; 
} 

Answer 1

これはいかがですか？これはxとyを正規化する。

var total = Math.Sqrt(x * x + y * y); 

となり、xとyには「var」がありません。

var x = event.clientX - rocket.x; 
var y = event.clientY - rocket.y;