Merge branch 'main' into nl

6-space-game/5-keeping-score/README.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier!
+✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier!
 
 ## Life, as a game concept
 

6-space-game/5-keeping-score/translations/README.es.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante!
+✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante!
 
 ## La vida, como concepto de juego
 

6-space-game/5-keeping-score/translations/README.hi.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए!
+✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए!
 
 ## जीवन, एक खेल अवधारणा के रूप में
 

6-space-game/5-keeping-score/translations/README.it.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato!
+✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato!
 
 ## La vita, come concetto di gioco
 

6-space-game/5-keeping-score/translations/README.ko.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요!
+✅ [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요!
 
 ## 게임 컨셉에서 생명
 

6-space-game/5-keeping-score/translations/README.ms.md

@@ -17,7 +17,7 @@ ctx.textAlign = "right";
 ctx.fillText("show this on the screen", 0, 0);
 ```
 
-✅ Baca lebih lanjut mengenai [cara menambahkan teks ke kanvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), dan jangan ragu untuk menjadikan teks anda kelihatan lebih menarik!
+✅ Baca lebih lanjut mengenai [cara menambahkan teks ke kanvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), dan jangan ragu untuk menjadikan teks anda kelihatan lebih menarik!
 
 ## Hidup, sebagai konsep permainan
 

6-space-game/5-keeping-score/translations/README.zh-tw.md

@@ -0,0 +1,189 @@
+# 建立太空遊戲 Part 5：分數與生命數
+
+## 課前測驗
+
+[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/37?loc=zh_tw)
+
+在這堂課中，你會學習如何為遊戲加入計分功能與計算性命數。
+
+## 在畫面上繪製文字
+
+為了在畫面上顯示遊戲分數，你需要了解如何配置文字。答案是在 Canvas 物件上使用方法 `fillText()`。你也可以控制其他特徵，例如文字字型、文字顏色甚至文字對齊方向(左、右、置中)。下面是在畫面中繪製一些文字。
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ 閱讀更多關於[在畫布上建立文字](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)，你可以自由地豐富你的文字！
+
+## 性命，一個遊戲概念
+
+遊戲中的生命概念只是一個數字。在太空遊戲中，在你的船艦受到攻擊時，扣除生命值是一種常見的方式。如果能以圖像的方式顯示生命值也是很好的方式，例如船艦圖示、心臟圖像，而非單純使用數字。
+
+## 建立目標
+
+我們在遊戲中新增下列功能：
+
+- **遊戲分數**：當每一艘敵軍艦艇被摧毀時，英雄應該取得一些獎勵分數，我們建議一艘敵艦一百分。遊戲總分應該顯示在畫面的左下角。
+- **生命值**：你的船艦有三條性命。在每一次敵軍艦艇撞擊你時，你會損失一條性命。生命數應該顯示在畫面的右下角，以下列圖像顯示出來。 ![性命圖片](../solution/assets/life.png)
+
+## 建議步驟
+
+在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+開始 `your_work` 資料夾中的專案，輸入：
+
+```bash
+cd your-work
+npm start
+```
+
+這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址，現在它能顯示出英雄與所有的敵人，在你操作方向鍵後，英雄能移動並擊落敵人。
+
+### 加入程式碼
+
+1. 從資料夾 `solution/assets/` **複製你需要的檔案** 到資料夾 `your-work` 中。你會加入檔案 `life.png`。在函式 window.onload 中加入 lifeImg ： 
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. 在檔案清單中加入 `lifeImg`：
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **新增變數**。 加入程式碼表達你的遊戲總分(0)和剩餘性命(3)，並顯示在畫面上。
+
+3. **擴增函式 `updateGameObjects()`**。 擴增函式 `updateGameObjects()` 來處理敵軍碰撞：
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **加入 `life` 與 `points`**. 
+   1. **初始化變數**。 在 `Hero` class 的 `this.cooldown = 0` 下方，設定性命與分數：
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **在畫面上顯示變數內容**。 在畫面上繪製這些數值：
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **在遊戲迴圈中加入呼叫**。 請確保你加入這些函式到 `updateGameObjects()` 下方的 window.onload 內：
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **制定遊戲規則**。 制定下列的遊戲規則：
+
+   1. **在英雄與敵人發生碰撞時**，扣除一條生命。
+   
+      擴增 `Hero` class 來執行這段減法：
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **當雷射擊中敵人時**，增加遊戲總分一百分。
+
+      擴增 Hero class 來執行這段加法：
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        加入這些函式到碰撞事件發送器中：
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ 做點研究，探索其他使用到 JavaScript 與 Canvas 的遊戲。他們有什麼共同特徵？
+
+在這個工作的尾聲，你應該能在右下方看到「性命」小船；左下方看到遊戲總分。當你碰撞到敵人時會扣除生命；當你擊落敵人時會增加分數。做得好！你的遊戲就快完成了。
+
+---
+
+## 🚀 挑戰
+
+你的程式就快完成了。你能預測到下一步嗎？
+
+## 課後測驗
+
+[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/38?loc=zh_tw)
+
+## 複習與自學
+
+研究其他種增加與減少分數與生命數的方法。這邊有一些有趣的遊戲引擎，例如：[PlayFab](https://playfab.com)。使用這些引擎能如何增進你的遊戲？
+
+## 作業
+
+[建立計分遊戲](assignment.zh-tw.md)

6-space-game/5-keeping-score/translations/assignment.zh-tw.md

@@ -0,0 +1,11 @@
+# 建立計分遊戲
+
+## 簡介
+
+建立一款遊戲，能有創意地顯示生命值與分數。建議上能在畫面的正下方，以心型圖示顯示生命值，或是斗大的數字顯示分數。看看這些[免費的遊戲資源](https://www.kenney.nl/)。
+
+## 學習評量
+
+| 作業內容 | 優良             | 普通             | 待改進       |
+| -------- | ---------------- | ---------------- | ------------ |
+|          | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 |