AI Skills
game-engine

game-engine

熱門

專家技能，用於使用 HTML5、Canvas、WebGL 和 JavaScript 建立網頁遊戲引擎與遊戲。當需要建立遊戲、建構遊戲引擎、實作遊戲物理、處理碰撞偵測、設定遊戲迴圈、管理精靈、加入遊戲控制或處理 2D/3D 渲染時使用。涵蓋平台遊戲、打磚塊風格遊戲、迷宮遊戲、圖塊地圖、音訊、透過 WebRTC 實現多人連線以及遊戲發布等技術。

3.6萬星標
0分支
更新於 2026/7/11
獲取技能源代碼

相關技能

imagegen-frontend-mobile4.8萬baoyu-infographic2.2萬web-design-guidelines5444
SKILL.md
readonlyread-only
name
game-engine
description

專家技能，用於使用 HTML5、Canvas、WebGL 和 JavaScript 建立網頁遊戲引擎與遊戲。當需要建立遊戲、建構遊戲引擎、實作遊戲物理、處理碰撞偵測、設定遊戲迴圈、管理精靈、加入遊戲控制或處理 2D/3D 渲染時使用。涵蓋平台遊戲、打磚塊風格遊戲、迷宮遊戲、圖塊地圖、音訊、透過 WebRTC 實現多人連線以及遊戲發布等技術。

遊戲引擎技能

使用 HTML5 Canvas、WebGL 和 JavaScript 建立網頁遊戲與遊戲引擎。此技能包含入門範本、參考文件以及 2D 和 3D 遊戲開發的逐步工作流程，並可搭配 Phaser、Three.js、Babylon.js 和 A-Frame 等框架。

何時使用此技能

  • 從頭開始使用網頁技術建立遊戲引擎或遊戲
  • 實作遊戲迴圈、物理、碰撞偵測或渲染
  • 使用 HTML5 Canvas、WebGL 或 SVG 處理遊戲圖形
  • 加入遊戲控制（鍵盤、滑鼠、觸控、遊戲手把）
  • 建立 2D 平台遊戲、打磚塊風格遊戲、迷宮遊戲或 3D 體驗
  • 處理圖塊地圖、精靈或動畫
  • 為網頁遊戲加入音訊
  • 使用 WebRTC 或 WebSockets 實作多人連線功能
  • 最佳化遊戲效能
  • 發布與散佈網頁遊戲

前置需求

  • 具備 HTML、CSS 和 JavaScript 基本知識
  • 支援 Canvas/WebGL 的現代網頁瀏覽器
  • 文字編輯器或 IDE
  • 可選：Node.js 用於建置工具和本機開發伺服器

核心概念

以下概念構成每個網頁遊戲引擎的基礎。

遊戲迴圈

每個遊戲引擎都圍繞著遊戲迴圈——一個連續的循環：

  1. 處理輸入 - 讀取鍵盤、滑鼠、觸控或遊戲手把輸入
  2. 更新狀態 - 更新遊戲物件位置、物理、AI 和邏輯
  3. 渲染 - 將當前遊戲狀態繪製到螢幕上

使用 requestAnimationFrame 實現流暢且經瀏覽器最佳化的渲染。

渲染

  • Canvas 2D - 最適合 2D 遊戲、基於精靈的渲染和圖塊地圖
  • WebGL - 硬體加速的 3D 和進階 2D 渲染
  • SVG - 向量圖形，適合 UI 元素
  • CSS - 適用於基於 DOM 的遊戲元素和轉場效果

物理與碰撞偵測

  • 2D 碰撞偵測 - AABB、圓形和 SAT 碰撞
  • 3D 碰撞偵測 - 邊界盒、邊界球和光線投射
  • 速度與加速度 - 基本的牛頓物理用於移動
  • 重力 - 平台遊戲中持續向下的加速度

控制

  • 鍵盤 - 方向鍵、WASD 和自訂按鍵綁定
  • 滑鼠 - 點擊、移動和 FPS 風格的指標鎖定
  • 觸控 - 行動裝置觸控事件和虛擬搖桿
  • 遊戲手把 - 使用 Gamepad API 支援控制器

音訊

  • Web Audio API - 程式化聲音生成和空間音訊
  • HTML5 Audio - 簡單的音訊播放，用於音樂和音效

逐步工作流程

建立基本 2D 遊戲

  1. 設定包含 <canvas> 元素的 HTML 檔案
  2. 取得 2D 渲染上下文
  3. 使用 requestAnimationFrame 實作遊戲迴圈
  4. 建立具有位置、速度和大小屬性的遊戲物件
  5. 處理鍵盤/滑鼠輸入以控制玩家
  6. 實作遊戲物件之間的碰撞偵測
  7. 加入分數、生命值和勝負條件
  8. 加入音效和音樂

建立 3D 遊戲

  1. 選擇框架（Three.js、Babylon.js、A-Frame 或 PlayCanvas）
  2. 設定場景、攝影機和渲染器
  3. 載入或建立 3D 模型和紋理
  4. 實作光照和著色器
  5. 加入物理和碰撞偵測
  6. 實作玩家控制和攝影機移動
  7. 加入音訊和視覺效果

發布遊戲

  1. 最佳化素材（壓縮圖片、最小化程式碼）
  2. 跨瀏覽器和裝置測試
  3. 選擇發布平台（網頁、應用程式商店、遊戲入口網站）
  4. 如有需要，實作獲利機制
  5. 透過遊戲社群和社交媒體推廣

遊戲範本

assets/ 資料夾中提供了入門範本。每個範本都提供一個完整且可運作的範例，可作為新專案的起點。

範本 說明
paddle-game-template.md 使用純 JavaScript 的 2D 打磚塊風格遊戲
2d-maze-game.md 使用裝置方向控制的迷宮遊戲
2d-platform-game.md 使用 Phaser 框架的平台遊戲
gameBase-template-repo.md 遊戲基礎範本儲存庫結構
simple-2d-engine.md 具有碰撞偵測的簡單 2D 平台遊戲引擎

參考文件

references/ 資料夾中提供了詳細的參考資料。請查閱這些檔案以深入了解特定主題。

參考文件 涵蓋主題
basics.md 遊戲開發簡介與結構
web-apis.md Canvas、WebGL、Web Audio、Gamepad 及其他網頁 API
techniques.md 碰撞偵測、圖塊地圖、非同步腳本、音訊
3d-web-games.md 3D 理論、框架、著色器、WebXR
game-control-mechanisms.md 觸控、鍵盤、滑鼠和遊戲手把控制
game-publishing.md 散佈、推廣和獲利
algorithms.md 光線投射、碰撞、物理、向量數學
terminology.md 遊戲開發詞彙表
game-engine-core-principles.md 遊戲引擎的核心設計原則

疑難排解

問題 解決方案
Canvas 為空白 確認在取得上下文後並在遊戲迴圈內呼叫繪圖方法
遊戲以不同速度執行 在更新計算中使用 delta 時間而非固定值
碰撞偵測不一致 對快速移動的物體使用連續碰撞偵測或減少時間步長
音訊無法播放 瀏覽器需要使用者互動才能播放音訊；從點擊處理常式觸發播放
效能不佳 使用瀏覽器開發者工具進行分析，減少繪圖呼叫，使用物件池，最佳化素材大小
觸控控制無反應 阻止預設觸控行為，並將觸控事件與滑鼠事件分開處理
WebGL 上下文遺失 處理 webglcontextlost 事件，並在 webglcontextrestored 時還原狀態