Javascript Term Project

1. 摘要

Dino Runner 是一款受 Chrome 瀏覽器中經典恐龍遊戲啟發的橫向捲軸遊戲。玩家會操作一隻恐龍，在不斷前進的過程中跳躍和閃避各種障礙物，並收集道具來提高生存時間和分數。本報告將詳細介紹遊戲的設計和實作過程，包括系統功能、架構設計、開發平台和工具、實作細節以及結論與心得。

2. 系統功能與用途

2.1 用途

Dino Runner 是一款休閒遊戲，旨在提供簡單但富有挑戰性的遊戲體驗。玩家可以通過控制恐龍跳躍和閃避障礙物，來挑戰自己的反應速度和決策能力。此外，遊戲中加入了多種道具，增加了變化性和趣味性，吸引玩家持續遊玩。

2.2 提供的功能

恐龍控制：玩家可以通過鍵盤操控恐龍進行跳躍和閃避。
背景動畫：創建連續流動的背景，使遊戲更具動感。
障礙物生成與管理：隨機生成並管理多種類型的障礙物，增加遊戲的挑戰性。
道具生成與效果：提供多種道具，使遊戲具有更多變化和策略性。
分數計算與顯示：即時計算和更新玩家的遊戲分數，激勵玩家挑戰更高的分數。

3. 系統架構與設計

Dino Runner 的設計採用模組化和物件導向的方法，以確保系統的可維護性和擴展性。以下是系統的核心架構和主要模組：

架構圖 (左)

架構圖 (中)

架構圖 (右)

3.1 核心類別說明

Background：負責背景的移動效果。
Entity：定義遊戲中的基本物件，包括恐龍、障礙物和道具。
Dino：恐龍角色的具體實現，繼承自 Entity，負責角色的跳躍和移動。
ObstacleManager：管理障礙物的生成、移動和碰撞檢測。
ItemManager：管理道具的生成、效果啟動和移除。
ScoreManager：負責分數的計算和顯示。
KeyboardManager：處理鍵盤輸入事件，控制恐龍的行為。

3.2 程式功能與邏輯

遊戲初始化：設置遊戲的初始狀態，包括背景、角色、障礙物和道具的加載。
開始遊戲：啟動遊戲循環，背景開始移動，並開始生成障礙物和道具。
遊戲進行中：根據用戶的鍵盤輸入控制恐龍的行為，同時處理障礙物和道具的移動和碰撞檢測。
碰撞檢測：檢測恐龍與障礙物或道具之間的碰撞，並根據碰撞結果更新遊戲狀態。
分數計算：持續計算和更新玩家的遊戲分數。
遊戲結束：當恐龍與障礙物碰撞時，終止遊戲循環，並顯示遊戲結束畫面。

4. 開發平台與工具

4.1 開發平台

Dino Runner 的開發在以下環境中進行：

操作系統：Windows 10
瀏覽器：主要在 Google Chrome 上進行開發和測試

4.2 開發工具與框架

程式語言：JavaScript, HTML, CSS
開發工具：Visual Studio Code, Git, Live Server
框架/程式庫：無

5. 伺服器與執行環境

Dino Runner 是一個前端遊戲，不需要資料庫來運行。然而，這個遊戲需要先在本地端開好伺服器才能夠執行。以下是我在開發時的執行環境

執行平台：Chrome
操作系統：Windows 10
伺服器：Vscode Live Server

6. Config

const config = {
  game: {
    renderInterval: 10, // render interval in milliseconds
    gravity: 0.8, // gravity effect
  },
  dino: {
    speed: window.innerWidth * 0.05,
    jumpInterval: 15, // jump interval that compute gravity in milliseconds
  },
  background: {
    speed: 5,
  },
  obstacle: {
    minGenerateInterval: 800, // minimum interval for generating obstacles in milliseconds in the beginning
    maxGenerateInterval: 1700, // maximum interval for generating obstacles in milliseconds in the beginning
    generateLimit: 100, // Smallest interval for generating obstacles in milliseconds
    minSpeed: 5, // minimum obstacle speed
    maxSpeed: 8, // maximum obstacle speed
    decreaseGenerateInterval: 50, // decrease obstacle interval for this interval (For every level decrease the obstacle generate interval)
  },
  score: {
    interval: 100, // update score in milliseconds
    levelInterval: 50, // update level for this interval (For every 50 points increase the level)
  },
  item: {
    speed: 3, // item speed
    minGenerateInterval: 1000, // minimum interval for generating items
    maxGenerateInterval: 3000, // maximum interval for generating items
    bombHeight: "70vh", // bomb top position
    jumpBoostHeight: "50vh", // jump boost top position
    jumpBoostEffect: 2, // value that will divide the gravity
    jumpBoostExpiration: 5000, // jump boost effect expiration time in milliseconds
  },
};

export default config;

我有用 Config 將遊戲可能會調整的參數包起來，可以在這邊修改參數就能夠修改遊戲內的行為了。

7. 結論與心得

7.1 心得

在 Dino Runner 的開發過程中，我通過模組化的設計和精細的系統架構，成功地實現了一個簡單但具有挑戰性的橫向捲軸遊戲。每一個模組的實現都經歷了詳細的設計和多次迭代，特別是在碰撞檢測和遊戲性能優化方面，我進行了多次測試和調整，以確保遊戲的平滑體驗。

因為是第一次從頭開始製作一個小型專案，其實一開始架構都很不清楚，從一開始只用各種 function 到慢慢包出很多個 class 出來，看到雜亂無章的程式碼被包起來其實還蠻有成就感的XD。

另外，我有將這次的專案部屬到 GitHub Page 上面，可以讓大家可以直接到網頁遊玩。

7.3 未來改進方向

未來的改進方向包括：

添加更多的遊戲元素：例如新的障礙物和道具類型，以及不同的遊戲模式。
排行榜：希望可以記錄每個用戶的遊戲最高分，並製作出一個排行榜。

通過這些改進，我希望能夠進一步提升 Dino Runner 的遊戲性和玩家體驗，使其成為一款更加完整和具有吸引力的遊戲。

bee0511 / Dino-Runner