PIXI.js와 Typescript를 사용하여 원을 애니메이션하기

Question

Typescript를 사용하여 PIXI.js를 사용하여 원을 애니메이션합니다. 현재 원은 오른쪽 경계에서 아래 경계로 튀어 오르고 있습니다. 나는 또한 위쪽과 왼쪽에서 튀어 나와야한다.

나는이 언어에 익숙하지 않으며, 대부분은 이해하기가 어렵다. 나는 'else'문을 새겨 넣으려고했지만이 경우에도 통합되어 있다고 생각하지는 않습니다.

'main.ts'

///<reference path="PIXI.d.ts"/> 
///<reference path="setup.ts"/> 

var drawing:PIXI.Graphics = new PIXI.Graphics(); 
stage.addChild(drawing); 

animate(); 
function animate() { 
    renderer.render(stage); 
    draw(); 
    requestAnimationFrame(animate); 
} 

var x:number = 0; 
var y:number = 0; 

var xspeed:number = 2; 
var yspeed:number = 2; 

// MY CODE 

function draw(){ 

    // clear drawing 
    drawing.clear(); 

    // draw circle 
    drawing.beginFill(0x999999); 
    drawing.drawCircle(x,y,100); 

    // move circle down and to the right for the next frame 
    x += xspeed; 
    y += yspeed; 

    // set boundary for circle to bounce from y 
    if(y > 600){ 
     // bounce the circle 
     yspeed *= -1; 
     // affix to the bottom of the stage 
     y = 600; 
    } 

    // set boundary for circle to bounce from x 
    if(x > 800){ 
     xspeed *= -1; 
     x = 800; 
    } 

} 

HTML은

<script src="src/pixi.js"></script> 
    <script src="src/setup.js"></script> 
    <script src="src/main.js"></script> 
</body> 
</html> 

Answer 1

난 당신이 지금까지있어 좋은 무슨을 생각합니다.

// set boundaries for circle to bounce from y 
if(y > 600){ 
    // bounce the circle 
    yspeed *= -1; 
    // affix to the bottom of the stage 
    y = 600; 
} 
else if(y < 0) { 
    // bounce the circle 
    yspeed *= -1; 
    // affix to the top of the stage 
    y = 0; 
} 

// set boundaries for circle to bounce from x 
if(x > 800){ 
    xspeed *= -1; 
    x = 800; 
} 
else if(x < 0){ 
    xspeed *= -1; 
    x = 0; 
} 

한 번 원을 그리기하고, x 및 y 속성을 설정하는 대신 그것을 매 프레임마다 다시 그립니다된다하려고하는 것 같아서 또 다른 한가지 :

var drawing:PIXI.Graphics = new PIXI.Graphics(); 
drawing.beginFill(0x999999); 
drawing.drawCircle(0,0,100); 
stage.addChild(drawing); 


function draw(){ 

    // move circle 
    drawing.x = x; 
    drawing.y = y; 

    // move circle down and to the right for the next frame 
    x += xspeed; 
    y += yspeed; 

을 당신은 제로 경계에 대한 검사를 추가해야