在Alan AI中编程游戏！第三集：得分、碰撞等！

Table of Contents

1. Introduction
2. Changing Velocity
3. Setting Timer
4. Creating UI Function
5. Adding Collisions
6. Displaying Lives
7. Resetting Values
8. Fixing Game Loop
9. Checking Score
10. Next Steps

💡 Introduction

歡迎回到第三集！我們今天將繼續開發我們的遊戲。在本集中，我們將改變敵人的速度，設置計時器，添加碰撞，顯示生命值，重置數值並修復迴圈。讓我們開始吧！

💥 Changing Velocity

首先，我們需要調整敵人的速度，因為它目前的速度不足以跳過敵人。我們將把速度設置為2，這樣玩家就可以成功跳過敵人了。

敵人速度 = 2

⏱️ Setting Timer

為了在遊戲中添加一個計時器，我們將創建一個名為"score"的計時器變數。我們將使用setInterval函數每秒增加一次計分。

計時器 = setInterval(加分函數, 1000)

加分函數將在每秒觸發，並將分數增加1。

function 加分函數() {
  分數 += 1
}

🖥️ Creating UI Function

現在我們需要創建一個用於顯示分數的界面函數。我們將使用fillText函數將分數顯示在畫布上。

function 顯示分數函數() {
  填充文字(黑色, 居中, 粗體)
  設置文字(分數 + " 分")
  設置位置(畫布寬度 / 3, 畫布高度)
}

💥 Adding Collisions

現在我們要添加碰撞檢測，以檢查玩家是否與敵人碰撞。我們將在遊戲迴圈中添加一個if語句來做這個檢查。

if (玩家.x + 玩家寬度 > 敵人.x && 玩家.x < 敵人.x + 敵人寬度 && 玩家.y + 玩家高度 > 敵人.y) {
  生命值 -= 1
}

這個條件語句將檢查玩家和敵人之間的X和Y坐標，如果玩家碰到敵人，生命值就會減少。

❤️ Displaying Lives

我們需要在遊戲界面上顯示剩餘生命值。我們可以使用fillText函數來顯示生命值。

function 顯示生命函數() {
  填充文字(黑色, 居中, 粗體)
  設置文字("生命：" + 生命值)
  設置位置(畫布寬度 / 2, 畫布高度)
}

這樣就可以在遊戲界面上顯示生命值了。

🔄 Resetting Values

當玩家死亡時，我們需要重置一些數值以重新開始遊戲。我們將創建一個名為"重置"的函數來實現這一點。

function 重置函數() {
  玩家.x = 10
  敵人.x = 畫布寬度 - 100 - 10
  玩家速度 = 0
  敵人速度 = 0
  分數 = 0
  生命值 = 3
}

重置函數將把玩家和敵人的位置設置回初始位置，並將速度和分數重置為初始值。生命值也會重置為3。

💥 Fixing Game Loop

現在我們需要在遊戲迴圈中檢查玩家是否死亡，並重置遊戲。如果生命值小於或等於零，我們將設置一個新變數"死亡"為真，然後在迴圈中檢查這個變數，如果為真，則重置遊戲。

if (生命值 <= 0) {
  死亡 = true
}

然後在迴圈裡面，當死亡為真時，我們將重置所有的數值並開始遊戲。

if (死亡) {
  重置函數()
  開始函數()
}

這樣就可以確保玩家在死亡後重新開始遊戲。

🔍 Checking Score

現在我們要檢查分數是否正常運作。我們可以在遊戲界面上顯示最後得分。

function 顯示最終得分函數() {
  填充文字(黑色, 居中, 粗體)
  設置文字("上次分數：" + 最終得分)
  設置位置(畫布寬度 / 3, 畫布高度 / 2)
}

這樣玩家就可以在遊戲死亡後看到上次的得分了。

🎯 Next Steps

感謝您閱讀本文。在下一節中，我們將為遊戲添加角色和敵人的精靈，並嘗試添加人工智慧。敬請期待！

🔗 本文參考資源：

• HTML5 Canvas 教程
• JavaScript 函數
• JavaScript 條件語句
• JavaScript 迴圈