使用带有 Typescript 的 PIXI.js 为圆圈制作动画

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;