최대 이동 속도 스프라이트 PIXI.js

Question

저는 사용자가 스프라이트 주위를 이동할 수있는 간단한 게임을 작성하고 있습니다. 무대를 클릭하면 스프라이트가 해당 위치로 이동합니다. 내가 직면하고있는 문제는이 스프라이트의 속도를 설정하고 싶다는 것이다. 사용자가 클릭 할 값을 모르겠습니다. 나는 스프라이트의 속도가 항상 같은 방법을 생각할 수 없다.

PIXI.js의 점은 스프라이트의 x 및 y 이동 속도를 설정할 수 있다는 것입니다. 그 이동 속도의 결과는 예를 들어 5와 같이 항상 같아야합니다. 따라서 스프라이트가 아래로 이동하면 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;