作者Alimen (狂人)
看板GameDesign
標題[分享] 自製HTML5小遊戲 - NP Lab之著色問題
時間Tue May 7 20:45:20 2013
感謝板主的認可，那我就把拙作貼過來了～
這個遊戲比較特別的地方是我為了練習，
全部用HTML5寫成，
不過都是很基本的語法、也沒用library，
還請各位多多指教 ^_^;
遊戲名稱: NP Lab : Coloring Problem / NP Lab之著色問題
遊戲類型: 自製 / 益智 / 對奕 / 搶三十
遊戲截圖:
http://ppt.cc/7Ee-
遊戲載點:
http://alimencave.blogspot.tw/2013/05/np-lab.html
(推薦使用Google Chrome或Mozilla Firefox瀏覽器，
ie或pcman可能沒辦法執行)
在計算複雜度理論的領域中，圖著色問題(Graph Coloring Problem)是一個著名
的NP-Complete問題，並可簡述如下：給定一無向圖，其中相連的點必須被塗上不同
顏色，試問至少需要多少種顏色，才能把圖上所有的點都上色？
有點頭暈了嗎？麻煩撐住一下，或是實際玩玩看吧？
「NP Lab之著色問題」是一個由圖著色問題發想的雙人對奕小遊戲，規則如下：
1. 輪到你時，你必須選擇一個區域(region)來著色
2. 相鄰(adjacent)的區域不能是相同的顏色
3. 當一個區域沒有可塗的顏色時，會自動變成黑色
4. 如果輪到你時，沒有區域可以上色，你就輸了
幾個小提示：
1. 第一次玩的玩家：保持「我塗完後還剩下偶數個區域」的步調，就有一定
的勝率
2. 單人模式中，困難度「簡單」從Level 1開始打，「普通」從Level 5，而
「困難」從Level 9 開始
3. AI的核心是簡單的貪婪演算法，最多預測兩步；在Level 13之前，AI有一
定的機率放水，優先選擇能讓玩家獲勝的區域/顏色
4. Level 11 之後，玩家先手優勢取消
Omake：
Source code：
https://github.com/Alimen/ColoringProblem
Commit 次數：151次
最長Commit間隔：2013.Feb.19 ~ 2013.Mar.10
Code size：4984行、120KBytes (壓縮後43.9KBytes)
圖檔數量：24張
這款「NP Lab之著色問題」的點子浮上我心頭，是在我剛上研究所沒多久的時候。
那時候沒事就窩到咖啡館喝咖啡吃paper，某天，閒著發慌在公用的留言本裡塗鴉，底
下墊著的論文給了我靈感，在紙上畫了幾條切割線就和朋友玩了起來。
那時的規則就和現在的差不多了，主要只有end game條件不同吧。
那時本來想做成flash小遊戲的，不過actionscript實在是本人的弱項之一，後來
整個點子就被無限期擱置了。直到去年接觸到HTML5 canvas，想找個題材練習的情況
下，才又回憶起當年有想過這個遊戲。
HTML5的優點不少，包括強大的單一舞台(single stage)讓我不用再跟奇奇怪怪的
Flash MovieClip object打交道，點陣圖的取用也相對直覺，API的模式也和OpenGL有
異曲同工之妙；但是它也有很大的缺點，例如要自己做double buffering、低效的
pixel access、缺乏向量動畫的支援等。尤其是向量動畫這一塊，現階段似乎可以引
入svg來解，不過這就是之後的功課了。
希望大家會喜歡～
(謎之聲：究竟有沒有人能夠突破Level 15呢？ XD)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.85.209.161
推 poshboy:HTML5遊戲推～ 05/08 00:33
推 cuteclare:挺厲害的Q_Q/膜拜 05/08 01:32
推 feng79624:厲害@@ 05/08 05:06
推 s0300453:推~ 05/08 11:29
感謝各位的厚愛^_^
推 gpmm:html5 的話可以直接開 gh-pages branch 用 Github Pages :P 05/09 08:55
→ gpmm:直接 hosting 在 Github 推廣給大家玩 05/09 08:56
好主意！ 待我來試試看......
2013.May.09 update: 原下載連結改到gh-pages上，現可開新視窗來玩
(感謝gpmm的建議！)
※ 編輯: Alimen 來自: 219.84.209.188 (05/09 14:32)
推 cowbaying:看了你的文 讓我也想要把遊戲移植到HTML5了 05/09 14:39
^_^
推 cmcer:還有人在用ie6的情況下，flash反而是比較單純的solution... 05/09 20:55
這是一個值得討論的議題，
但現階段我能夠想到的最佳解是在不支援的瀏覽器中顯示：
"Your browser does not support HTML5 Canvas. Try Google Chrome (下載連結)"
推 yoco315:用 opera 跟 firefox 都只能讀取到 88% 就停住了 05/10 20:50
→ yoco315:chrome 也是 /_\ 05/10 20:51
我東西放在Google Site，應該是連線的問題 我有一次在外面用中華電信也有碰到
(家裡用So-Net沒碰過)
loader那段還有很多可以改進的，不過沒那麼快
在那之前就只能請你多重新整理幾次了......
※ 編輯: Alimen 來自: 219.85.212.155 (05/10 21:48)
推 xxxholic:題外話 問題應該是 「至少要多少顏色」...否則給「點數」 05/12 01:51
→ xxxholic:種顏色必可著色 05/12 01:52
已修改，謝謝指正！
推 xluds24805:為什麼我第十一關贏了只能選擇restart...? 05/13 01:25
這個我沒試出來過......我再看看，謝謝！
推 yoco315:已經重新整理九千多次了 qq 05/15 08:10
我把檔案全部移到gh-pages上了，麻煩再試試看囉^_^;
如果還是不行的話，可能要麻煩你先到github上下載，原始碼裡有附執行檔可以玩
※ 編輯: Alimen 來自: 219.84.210.9 (05/16 15:49)
推 yoco315:挖哈哈，用 fx 終於可以玩了～輸了，很生氣 05/28 15:31
總算可以讓你正常玩了 (淚目推
※ 編輯: Alimen 來自: 219.85.248.139 (05/30 09:53)