7.9 KiB

Raw Permalink Blame History Unescape Escape

建立太空遊戲第二部分：將英雄和怪物繪製到 Canvas

課前測驗

Canvas

Canvas 是一個 HTML 元素，預設沒有任何內容；它是一個空白的畫布。你需要透過在上面繪圖來添加內容。

以下是它通常在頁面 body 中的宣告方式：

<canvas id="myCanvas" width="200" height="100"></canvas>

上面我們設定了 id、width 和 height。

id：設定這個值以便在需要與其互動時取得參考。
width：這是元素的寬度。
height：這是元素的高度。

繪製簡單幾何圖形

Canvas 使用笛卡爾座標系統來繪製物件。因此，它使用 x 軸和 y 軸來表示物件的位置。位置 0,0 是左上角，而右下角則是你設定的 Canvas 的寬度和高度。

圖片來源：MDN

要在 Canvas 元素上繪圖，你需要完成以下步驟：

取得 Canvas 元素的參考。
取得位於 Canvas 元素上的 Context 元素的參考。
使用 Context 元素執行繪圖操作。

上述步驟的程式碼通常如下所示：

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ Canvas API 主要專注於 2D 圖形，但你也可以在網站上繪製 3D 元素；為此，你可以使用 WebGL API。

使用 Canvas API，你可以繪製各種內容，例如：

幾何圖形，我們已經展示了如何繪製矩形，但還有更多可以繪製的內容。
文字，你可以繪製任何字體和顏色的文字。
圖片，你可以基於圖片資源（例如 .jpg 或 .png）繪製圖片。

✅ 試試看！你已經知道如何繪製矩形，那麼你能在頁面上繪製一個圓形嗎？看看 CodePen 上一些有趣的 Canvas 繪圖。這裡有一個特別令人印象深刻的例子。

載入並繪製圖片資源

你可以透過建立一個 Image 物件並設定其 src 屬性來載入圖片資源。然後，監聽 load 事件以確保圖片已準備好使用。程式碼如下：

載入資源

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

載入資源模式

建議將上述程式碼包裝在如下結構中，這樣更容易使用，並且只有在圖片完全載入後才嘗試操作它：

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

要將遊戲資源繪製到螢幕上，程式碼會如下所示：

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

現在是時候開始建立你的遊戲了

要建立什麼

你將建立一個包含 Canvas 元素的網頁。它應該渲染一個黑色螢幕，大小為 1024*768。我們已經為你提供了兩張圖片：

英雄飛船
5*5 怪物

建議的開發步驟

找到在 your-work 子資料夾中為你建立的檔案。它應該包含以下內容：

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

在 Visual Studio Code 中打開這個資料夾的副本。你需要設置一個本地開發環境，最好是使用已安裝 NPM 和 Node 的 Visual Studio Code。如果你的電腦上尚未設置 npm，這裡有教學。

透過導航到 your_work 資料夾來啟動你的專案：

cd your-work
npm start

上述指令會在地址 http://localhost:5000 啟動一個 HTTP 伺服器。打開瀏覽器並輸入該地址。目前它是一個空白頁面，但這將會改變。

注意：要在螢幕上看到變更，請重新整理瀏覽器。

添加程式碼

在 your-work/app.js 中添加所需的程式碼來完成以下內容：

繪製一個黑色背景的 Canvas

提示：在 /app.js 中適當的 TODO 下添加兩行程式碼，將 ctx 元素設置為黑色，並將頂部/左側座標設置為 0,0，高度和寬度等於 Canvas 的大小。
載入材質

提示：使用 await loadTexture 並傳入圖片路徑來添加玩家和敵人的圖片。你目前還不會在螢幕上看到它們！
繪製英雄在螢幕下半部的中央

提示：使用 drawImage API 將 heroImg 繪製到螢幕上，設定 canvas.width / 2 - 45 和 canvas.height - canvas.height / 4。

繪製 5*5 的怪物

提示：現在你可以取消註解程式碼，將敵人繪製到螢幕上。接下來，前往 createEnemies 函數並完成它。

首先，設置一些常數：

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

然後，建立一個迴圈來將怪物陣列繪製到螢幕上：

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

結果

完成後的結果應如下所示：

解答

請先嘗試自己解決，但如果卡住了，可以查看解答。

🚀 挑戰

你已經學習了使用以 2D 為主的 Canvas API；現在看看 WebGL API，嘗試繪製一個 3D 物件。

課後測驗

複習與自學

透過閱讀相關內容來進一步了解 Canvas API。

作業

玩轉 Canvas API

免責聲明：
本文件使用 AI 翻譯服務 Co-op Translator 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。

7.9 KiB Raw Permalink Blame History Unescape Escape