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中文網其他相關文章！