Space Defender - 设置项目的一部分

在上一篇文章中，我向您展示了如何使用 Vite 和 TypeScript 设置 PixiJS 项目。在这篇文章中，我们将在该设置的基础上创建一个简单的太空防御者游戏。

对于这个项目，我假设您具备如何使用 TypeScript/JavaScript 进行编程的基本知识。因为我们专注于 PixiJS，所以我不会过多关注 HTML/CSS 方面。

最终的源代码可以在我的 GitHub 存储库中找到，如果你想玩游戏，可以在这里找到它。

设置项目

如果您还没有使用 Vite 和 TypeScript 设置 PixiJS 项目，我建议您先阅读我之前的文章，其中我解释了如何设置并运行它。

让我们快速设置index.html 文件，其中包含该项目所需的内容。将

的内容替换为具有以下内容的元素：

<div id="app">
    <div id="gameHud">
        <div>
            Lives: <span id="gameLives"></span>
        </div>
        <div>
            Level: <span id="gameLevel"></span>
        </div>
        <div>
            Score: <span id="gameScore"></span>
        </div>
    </div>
    <div id="game">

    </div>
</div>

这将是我们游戏的结构，我们有一个 HUD（平视显示器），它将显示玩家的生命、等级和得分。以及我们将在其中渲染游戏的游戏容器。在第 4 部分中，我们将开始利用它。

接下来，我们需要对其应用一些CSS，以便它可以很好地显示在屏幕上。导航到 src 文件夹中名为 styles.css 的样式表并添加以下内容：

body {
    margin: 0;
    background-color: darkgrey;
}

#app {
    height: 100vh;
    width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameHud {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;

    > div {
        flex: 1;
    }
}

准备游戏画面

太棒了！现在我们已经有了基本结构，让我们开始创建游戏屏幕。我们需要一个变量来保存游戏容器元素，以便游戏知道将游戏画布插入到 DOM 中的何处。

(async () => {
    let gameContainer = document.getElementById("app");

    // ....
});

之后，我们需要更新应用程序大小以匹配我们想要的游戏大小，在我们的例子中，我们想要一个宽 480、高 720 的游戏。因此我们需要更新 app.init 调用以匹配该大小。

await app.init({
    width: 480,
    height: 720,
});

然后替换

document.body.appendChild(app.canvas);

与

gameContainer.appendChild(app.canvas);

我们现在有一个尺寸为 480x720 像素并显示在屏幕中央的游戏屏幕。

在下一部分中，我们将开始创建玩家的飞船并使其移动和射击。

---

使用 Vite 和 TypeScript 设置 PixiJS

先生。 Linxed ・ 4 月 20 日

#webdev #javascript #初学者 ＃教程

通过“完成崇拜”取得更多成绩

先生。 Linxed ・ 2 月 18 日

＃生产率 #初学者 ＃讨论 ＃动机

---

不要忘记订阅我的时事通讯，成为第一个了解类似教程的人。

以上是Space Defender - 设置项目的一部分的详细内容。更多信息请关注PHP中文网其他相关文章！