Pixi.js简单入门-游戏篇-飞机大战创建一个基本的HTML页面，并在页面中引入pixi.js库和您的游戏脚本。在游

创建一个基本的HTML页面，并在页面中引入pixi.js库和您的游戏脚本。

<!DOCTYPE html>
<html>
<head>
    <title>飞机大战</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.1.3/pixi.min.js"></script>
    <script src="game.js"></script>
</head>
<body>
</body>
</html>

在游戏脚本中创建一个Pixi应用程序。

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);

加载游戏资源，例如飞机图像和子弹图像。

PIXI.Loader.shared.add('plane', 'assets/plane.png');
PIXI.Loader.shared.add('bullet', 'assets/bullet.png');
PIXI.Loader.shared.load(setup);

在加载完成后设置游戏场景。

let plane, bullets;

function setup() {
    plane = new PIXI.Sprite(PIXI.Loader.shared.resources['plane'].texture);
    plane.x = app.renderer.width / 2;
    plane.y = app.renderer.height - plane.height;
    plane.anchor.set(0.5);
    app.stage.addChild(plane);

    bullets = new PIXI.Container();
    app.stage.addChild(bullets);

    app.ticker.add(gameLoop);
}

实现游戏逻辑，例如飞机移动、发射子弹和检测碰撞等。

function gameLoop(delta) {
    // 移动飞机
    plane.x += 5 * delta;

    // 检测按键事件
    if (PIXI.keyboard.isKeyDown('ArrowLeft')) {
        plane.x -= 10 * delta;
    }
    if (PIXI.keyboard.isKeyDown('ArrowRight')) {
        plane.x += 10 * delta;
    }
    if (PIXI.keyboard.isKeyDown('ArrowUp')) {
        plane.y -= 10 * delta;
    }
    if (PIXI.keyboard.isKeyDown('ArrowDown')) {
        plane.y += 10 * delta;
    }

    // 发射子弹
    if (PIXI.keyboard.isKeyDown('Space')) {
        let bullet = new PIXI.Sprite(PIXI.Loader.shared.resources['bullet'].texture);
        bullet.x = plane.x;
        bullet.y = plane.y - plane.height / 2;
        bullet.anchor.set(0.5);
        bullets.addChild(bullet);
    }

    // 检测子弹碰撞
    for (let i = 0; i < bullets.children.length; i++) {
        let bullet = bullets.children[i];
        bullet.y -= 10 * delta;
        if (bullet.y < -bullet.height) {
            bullets.removeChild(bullet);
            i--;
        }
    }
}

运行游戏。

app.start();