Space Defender - 設定專案的一部分

在上一篇文章中，我向您展示如何使用 Vite 和 TypeScript 設定 PixiJS 專案。在這篇文章中，我們將在該設定的基礎上創建一個簡單的太空防御者遊戲。

對於這個項目，我假設您具備如何使用 TypeScript/JavaScript 進行程式設計的基本知識。因為我們專注於 PixiJS，所以我不會太在意 HTML/CSS 方面。

最終的原始碼可以在我的GitHub儲存庫中找到，如果你想玩遊戲，你可以在這裡找到它。

設定項目

如果您還沒有使用 Vite 和 TypeScript 設定 PixiJS 項目，我建議您先閱讀我之前的文章，其中我解釋瞭如何設定並運行它。

讓我們快速設定index.html 文件，其中包含該項目所需的內容。將

這將是我們遊戲的結構，我們有一個 HUD（平視顯示器），它將顯示玩家的生命、等級和得分。以及我們將在其中渲染遊戲的遊戲容器。在第 4 部分中，我們將開始使用它。

接下來，我們需要對其應用一些CSS，以便它可以很好地顯示在螢幕上。導覽至 src 資料夾中名為 styles.css 的樣式表並新增以下內容：

準備遊戲畫面

太棒了！現在我們已經有了基本結構，讓我們開始創建遊戲螢幕。我們需要一個變數來保存遊戲容器元素，以便遊戲知道將遊戲畫布插入 DOM 的何處。

之後，我們需要更新應用程式大小以符合我們想要的遊戲大小，在我們的例子中，我們想要一個寬 480、高 720 的遊戲。所以我們需要更新 app.init 呼叫以匹配該大小。

然後更換

與

我們現在有一個尺寸為 480x720 像素並顯示在螢幕中央的遊戲螢幕。

在下一部分中，我們將開始創建玩家的飛船並使其移動和射擊。

使用 Vite 和 TypeScript 設定 PixiJS

先生Linxed ・ 4 月 20 日

#webdev #javascript #初學者 ＃教程

透過「完成崇拜」取得更多成就

先生Linxed ・ 2 月 18 日

＃生產率 #初學者 ＃討論 ＃動機

不要忘記訂閱我的時事通訊，成為第一個了解與這些類似的教程的人。

以上是Space Defender - 設定專案的一部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！