在上一部分中，我們創建了遊戲的基本結構。在這一部分中，我們將開始創建玩家的飛船並使其移動和射擊。
最終源碼可以在我的GitHub倉庫中找到
如果你想玩這個遊戲，你可以在這裡找到它
在開始設定播放器之前，我們需要一種處理鍵盤事件的方法。為此，我使用了 kittykatattack 的 PixiJS 教程中找到的鍵盤控制器，並將其改編為 TypeScript。
你可以在我的 GitHub 儲存庫中找到它。
我們不會深入探討它是如何運作的，因為這超出了本專案的範圍，但它的作用是監聽 keydown 和 keyup 事件，並為每個按下或釋放的鍵設定一個布林值。這樣我們就可以檢查遊戲循環中是否按下或放開某個鍵，並相應地更新玩家的行為。
要使用鍵盤控制器，請從上面的提交中下載keyboard.ts 檔案並將其放置在專案的 src/helpers 資料夾中。
現在我們有了處理鍵盤事件的方法，我們可以開始建立播放器了。在未來的教程中，我們將製作一個更複雜的遊戲，並將我們的專案分成多個檔案。現在，我們將堅持使用一個文件。
在 main.ts 檔案中初始化 PixiJS 應用程式之後等待 app.init({ ，加入以下程式碼：
這將建立一個新的 Graphics 對象，使用 poly 方法繪製一個三角形，用淺藍色填充它並將其放置在螢幕底部。
如果您現在開始遊戲，您會在螢幕底部看到一個小三角形。但我們希望能夠移動它。為此，我們需要根據鍵盤輸入更新玩家的位置。
首先我們需要捕捉鍵盤輸入。在我們建立播放器的位置之後加入以下程式碼：
這段程式碼的作用是建立兩個 KeyHandler，一個用於左箭頭鍵，一個用於右箭頭鍵。當按下按鍵時，玩家在x軸上的速度設定為-500或500。當放開按鍵時，玩家的速度設定為0。這樣我們就可以左右移動玩家。
這本身不會移動玩家，我們需要更新玩家在遊戲循環中的位置。將 app.ticker.add 呼叫替換為以下程式碼：
如果您的程式碼中沒有 app.ticker.add 調用，您可以將其新增至定義 KeyHandlers 的位置之後。
現在，如果您開始遊戲，您將能夠左右移動玩家。偉大的！讓我們來拍攝吧。
當我們想讓玩家射擊時，我們需要考慮三件事：
所以我們需要一個方法來創建子彈，將其添加到子彈數組中，透過遊戲循環更新子彈位置，然後在超出範圍時將其刪除。
讓我們從建立項目符號的方法開始，在 main.ts 檔案的底部加入以下程式碼：
每次我們想要建立項目符號時建立一個新的 Graphics 物件是昂貴的，因此我們建立一個範本項目符號，每次我們想要建立新項目符號時都會複製它。克隆比每次創建一個新物件更便宜。
然後我們使用來源（發射子彈的人）將子彈定位在正確的位置，然後返回圖形物件。
好吧，目前這個方法還沒有被使用，也沒有任何東西被繪製到螢幕上。讓我們解決這個問題。
我們將讓玩家可以透過按空白鍵進行射擊，我們將再次使用 KeyHandler 來實現這一點。要告訴 KeyHandler 使用空白鍵，我們必須將“”作為鍵。
在我們定義左右箭頭鍵的 KeyHandler 後加入以下程式碼：
這段程式碼將在按下空白鍵時建立一個新的項目符號，將其添加到項目符號陣列中並將其添加到舞台上，以便我們可以看到它。
我們還沒有項目符號數組，所以讓我們在定義 Player 物件之後添加它：
現在，如果您開始遊戲，您將能夠左右移動玩家並射擊子彈。但子彈將永遠留在螢幕上。讓我們解決這個問題。
在遊戲循環中，我們將更新子彈位置，並在超出範圍時將其移除。將以下程式碼加入您的遊戲循環中，就在我們更新玩家位置的位置下方：
for(let i = 0; iThis part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.
And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!
PixiJS Setup with Vite and TypeScript
Mr. Linxed ・ Apr 20
#webdev #javascript #beginners #tutorialAccomplish more with the "Cult of Done"
Mr. Linxed ・ Feb 18
#productivity #beginners #discuss #motivation
Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.
以上是太空衛士 - 部分玩家的詳細內容。更多資訊請關注PHP中文網其他相關文章！
