形狀消消樂網頁版 Shape Clear - HTML

形狀消消樂網頁版是一個消消樂遊戲，使用 Phaser 遊戲引擎和 HTML5 規格

目前還沒有完成，但是可以來玩一下： https://stdio2016.github.io/shapeclear-html

如果想要正常的版本，可以玩 Scratch 版(註：這個版本的原始碼不在這個代碼庫)。 網址： https://scratch.mit.edu/projects/17206808/。 手機、平板請用 https://phosphorus.github.io/#17206808

玩法

用滑鼠或手指交換 2 個形狀，讓 3 個一樣的形狀，連成一條線，就可以消除。

若是 4 個或 5 個連成線，或是呈 T/L 字形，就會產生道具

• 4 個連成線: 變出條紋
• T/L 字形: 變出包裝形狀
• 5 個連成線: 變出電擊器

把兩個道具交換會有意想不到的效果喔～

動機

我設計這個遊戲，只是想要模擬 Candy Crush，因為 Candy Crush 的關卡好難，又有生命限制，每 30 分鐘只能玩一次，想說來自己重做一個 Candy Crush 來玩，順便統計過關機率。

本來形狀消消樂是用 Scratch 做的，但是後來發現，Scratch 的效能太差，而且不支援手機、平板，為了支持攜帶型裝置，我必須重寫遊戲。

後來嘗試用 LibGDX 來重寫遊戲，想說來做 App，不過老師跟我說，App 的平台是專有的，做成 App 就限制了能夠使用的地方。老師推薦我寫成網頁，所以就來做 HTML5 版形狀消消樂，順便來學習怎麼用別人的函式庫

已完成功能

1. 可以交換形狀 (2017/2/17完成)
2. 3個形狀連在一起可以消 (2017/3/11終於處理好T字形和L字形的問題)
3. 形狀可以天降 (2017/4/1完成)
4. 計分、計時功能 (2017/6/20完成)
5. 得分時會跳出分數文字 (2017/6/20完成)
6. 形狀可以斜向掉落 (2017/7/20完成)
7. 中文化 (2019/2/2達成)
8. 4 個以上連成線會製造道具 (2019/2/10完成)
9. 消掉道具會發動效果 (2019/2/25完成)
10. 把兩個道具交換會有意想不到的效果 (2019/3/27完成)
11. 提示可交換的位置 (2020/1/25完成)
12. 沒有辦法再交換時，會重排所有形狀 (2020/3/31完成)

未完成功能

有很多，列都列不完

由於網頁的大小可以變動，因此網頁版還需要能依照畫面大小重新排列各個元件

未來展望

• 更多關卡
• 更多的遊戲要素，例如障礙物、傳送門、特殊道具……等
• 製作關卡編輯器
• 聲音和音樂 (其實現在就有音樂了)
• 好一點的美工 (我的美工爛死了，我知道)
• 可以分享關卡
• 統計分數分布、過關機率、消掉形狀數、……等
• 高分榜

作者

• 程式：陳羿豐(就是 stdio2016 啦)
• 圖片：陳羿豐(不，我畫的圖連小學生都會畫，而且超像用「小畫家」畫的)
• 音樂：還是陳羿豐。也許你覺得音樂是 8bit 的，但其實，我是做 16bit 的音樂。 好啦，我承認我做的就是 8bit 音樂，因為隨便寫個程式就能生了。XD