[想玩的遊戲自己寫系列]基於《Royal Match》的三消遊戲

更新 發佈閱讀 7 分鐘

這是一個基於《Royal Match》的三消遊戲原型,使用純 HTML5、CSS 和 JavaScript 開發,包含多項創新玩法。此款遊戲的原創,長居手游下載數排行第一的寶座。

居於每日一遊戲開發的原則,目前已擺放在皇家匹配 - 三消遊戲原型 https://www.iaiguidance.com/RoyalMatch/

raw-image

## 🎮 核心功能

### 基礎玩法

- ✅ 8x8 棋盤,6 種顏色方塊

- ✅ 三消機制:連成 3 個或以上相同顏色即可消除

- ✅ 步數限制系統

- ✅ 多關卡進度系統

- ✅ 動態分數計算

### 🚀 強化道具系統

- 🚀 **火箭**:4 個方塊連成直線 → 清除整行或整列

- 💣 **炸彈(TNT)**:5 個方塊排成 L 或 T 型 → 清除周圍 3x3 區域

- 🚁 **螺旋槳**:4 個方塊排成 2x2 方形 → 隨機清除一個目標

- ⭐ **光球**:5 個方塊連成直線 → 清除所有相同顏色

### 💥 強化道具組合技(新功能!)

交換兩個相鄰的強化道具可觸發超強組合效果:

- **雙炸彈** 💣+💣:5x5 超級爆炸

- **雙火箭** 🚀+🚀:清除雙十字形大範圍

- **炸彈+火箭** 💣+🚀:清除三行三列

- **光球+任何道具** ⭐+X:將所有同色方塊變成該道具並引爆

- **雙光球** ⭐+⭐:清除整個棋盤!(終極技能)

### 🧱 障礙物系統(新功能!)

從第 2 關開始出現各種障礙物,需要通過在旁邊消除方塊來摧毀:

**摧毀機制:**

- 在障礙物的上、下、左、右四個方向消除方塊

- 每次消除對相鄰障礙物造成 1 點傷害

- 當生命值降到 0 時,障礙物被摧毀

- 完成「摧毀障礙物 X 個」目標

**障礙物類型:**

- **木磚** 🟫:需要消除 1 次(生命值 1)

- **冰塊** 🧊:需要消除 2 次(生命值 2)

- **鎖鏈** 🔒:方塊被鎖定無法移動,需要消除 1 次解鎖

- **石頭** 🪨:超硬障礙物,需要消除 3 次(生命值 3)

**示例:**

```

[紅][紅][紅]  →  消除紅色  →  [🟫] 受到 1 點傷害

[🟫][藍][綠]                  木磚被摧毀!

```

### 🔥 連擊系統(新功能!)

- 連續消除會累積連擊數

- 連擊越高,分數加成越多

- 顯示即時連擊提示

- 記錄最高連擊數

### 🎯 遊戲模式(新功能!)

點擊「切換模式」按鈕體驗不同玩法:

1. **普通模式**:經典的步數限制玩法

2. **限時模式**:60 秒內完成目標

3. **收集模式**:收集特定數量的方塊

### 🏆 成就系統(新功能!)

- 🏆 首次連擊:達成 3 連擊

- 🏆 超級連擊大師:達成 5 連擊

- 🏆 強化道具大師:使用道具組合技

- 🏆 障礙物破壞者:摧毀所有障礙物

### ✨ 視覺效果(新功能!)

- 💫 粒子特效系統

- 🎨 流暢的動畫效果

- 🌟 連擊提示動畫

- 💥 組合技特效

## 🎯 如何遊玩

1. 用瀏覽器打開 `index.html`

2. 點擊相鄰的兩個方塊進行交換

3. 連成 3 個或以上相同顏色即可消除

4. 製造 4-5 個連線創造強化道具

5. 交換兩個強化道具觸發組合技

6. 在步數用盡前完成所有目標

## 🎮 操作說明

- **點擊方塊**:選擇/交換方塊

- **重新開始**:重置當前關卡

- **提示**:顯示可能的移動

- **切換模式**:在不同遊戲模式間切換


## 🎓 進階技巧

1. **優先製造強化道具**:4-5 個連線比 3 個更有價值

2. **善用組合技**:兩個道具組合威力倍增

3. **規劃連擊**:一次移動觸發多次連鎖消除

4. **先處理障礙物**:被鎖定的方塊會限制你的選擇

5. **保存光球**:光球是最強道具,與其他道具組合效果驚人

## 📊 技術架構

```

├── index.html       # 主頁面

├── css/

│   └── style.css   # 樣式設計 + 動畫效果

├── js/

│   ├── tile.js     # 方塊類別(含障礙物系統)

│   ├── board.js    # 棋盤管理(含障礙物傷害)

│   ├── powerups.js # 強化道具系統(含組合技)

│   └── game.js     # 遊戲主邏輯(含連擊、成就、粒子)

└── README.md       # 說明文檔

```

## 🆕 進化版新增內容

### 遊戲機制

- ✅ 強化道具組合技系統

- ✅ 障礙物系統(4 種類型)

- ✅ 連擊系統與分數加成

- ✅ 多種遊戲模式

- ✅ 關卡進度系統

- ✅ 成就系統


### 視覺效果

- ✅ 粒子特效系統

- ✅ 連擊動畫

- ✅ 組合技特效

- ✅ 流暢的過渡動畫


### 遊戲平衡

- ✅ 動態難度調整

- ✅ 關卡目標隨等級增加

- ✅ 障礙物數量隨關卡增加

- ✅ 連擊分數加成系統


## 💡 開發說明

本遊戲使用原生 JavaScript 開發,無需任何框架或構建工具,直接在瀏覽器中運行即可。


### 主要類別

- `Tile`: 方塊類,管理單個方塊的狀態、障礙物和繪製

- `Board`: 棋盤類,管理整個遊戲棋盤和障礙物傷害

- `PowerupSystem`: 強化道具系統,處理道具創建、效果和組合技

- `Game`: 遊戲主控制器,協調所有遊戲邏輯、連擊、成就和粒子效果

## 📝 授權

本項目為教育和學習目的而建立。

留言
avatar-img
Hank吳的沙龍
13會員
157內容數
這不僅僅是一個 Blog,更是一個交流與分享的空間。 期待在這裡與你相遇,一起探索科技、體驗生活、夢想旅行!💖
Hank吳的沙龍的其他內容
2026/02/10
「Agentic Engineering」(代理式工程)這個詞彙主要是由知名 AI 專家、前特斯拉 AI 主管及 OpenAI 共同創辦人 Andrej Karpathy 所推廣並使其流行。 他在 2026 年初(約 2 月初)正式提出了這個詞,用來定義 AI 輔助開發的下一個階段。
Thumbnail
2026/02/10
「Agentic Engineering」(代理式工程)這個詞彙主要是由知名 AI 專家、前特斯拉 AI 主管及 OpenAI 共同創辦人 Andrej Karpathy 所推廣並使其流行。 他在 2026 年初(約 2 月初)正式提出了這個詞,用來定義 AI 輔助開發的下一個階段。
Thumbnail
2026/02/10
目前遵循一日一遊戲目標,今天用快下班前的20分鐘,請出熱騰騰的Claude Opus 4.6模型協助製作,發現他/她 進化到開發小遊戲,幾乎一次完成,過程也不見錯誤。 網頁遊戲已擺放至網站 ( https://iaiguidance.com/BlockBlast/),格友可玩看看。 《Blo
Thumbnail
2026/02/10
目前遵循一日一遊戲目標,今天用快下班前的20分鐘,請出熱騰騰的Claude Opus 4.6模型協助製作,發現他/她 進化到開發小遊戲,幾乎一次完成,過程也不見錯誤。 網頁遊戲已擺放至網站 ( https://iaiguidance.com/BlockBlast/),格友可玩看看。 《Blo
Thumbnail
2026/02/09
在之前的文章提到如何[設定openclaw,讓你的agent機器人在telegram相互對話(互懟)],當設定好後,格友知道會發生甚麼事嗎? 當你在Telegram 請他們兩協力自主開發遊戲,且自我進化程式,只到你喊停,才停止, 一開始他倆可能開工一回兒,就停歇,但當你,數次請它們自我進化程式
Thumbnail
2026/02/09
在之前的文章提到如何[設定openclaw,讓你的agent機器人在telegram相互對話(互懟)],當設定好後,格友知道會發生甚麼事嗎? 當你在Telegram 請他們兩協力自主開發遊戲,且自我進化程式,只到你喊停,才停止, 一開始他倆可能開工一回兒,就停歇,但當你,數次請它們自我進化程式
Thumbnail
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
The Keeper of Royal Academy of Arts highly praised Master Wan Ko Yee (H.H. Dorje Chang Buddha III) at the dinner banquet.
Thumbnail
The Keeper of Royal Academy of Arts highly praised Master Wan Ko Yee (H.H. Dorje Chang Buddha III) at the dinner banquet.
Thumbnail
Royal Piano Exam (ABRSM) FAQ | A Comprehensive Guide from Grade 1 to Grade 8 🎹 The ABRSM (Associated Board of the Royal Schools of Music) Piano Exam
Thumbnail
Royal Piano Exam (ABRSM) FAQ | A Comprehensive Guide from Grade 1 to Grade 8 🎹 The ABRSM (Associated Board of the Royal Schools of Music) Piano Exam
Thumbnail
Master Yee is a world famous artist,a great Chinese painting artist, and the founder of Yun sculptures which are beyond natural beauty.
Thumbnail
Master Yee is a world famous artist,a great Chinese painting artist, and the founder of Yun sculptures which are beyond natural beauty.
Thumbnail
The Keeper of Royal Academy of Arts highly praised Master Wan Ko Yee at the dinner banquet. He admired very much the talents and art of Master yee.
Thumbnail
The Keeper of Royal Academy of Arts highly praised Master Wan Ko Yee at the dinner banquet. He admired very much the talents and art of Master yee.
Thumbnail
疫情逐漸緩和,民眾逐漸落實「防疫新生活」。日本連鎖「Royal Host樂雅樂家庭餐廳」針對已習慣外帶回家用餐的消費者,推出多達20款餐盒,從牛排、義大利麵到日式御膳等店內暢銷餐點,即日起至7月31日於線上預訂外帶餐盒,即享買3送1優惠。
Thumbnail
疫情逐漸緩和,民眾逐漸落實「防疫新生活」。日本連鎖「Royal Host樂雅樂家庭餐廳」針對已習慣外帶回家用餐的消費者,推出多達20款餐盒,從牛排、義大利麵到日式御膳等店內暢銷餐點,即日起至7月31日於線上預訂外帶餐盒,即享買3送1優惠。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News