[分享] 自製HTML5小遊戲 - NP Lab之著色問題
感謝板主的認可，那我就把拙作貼過來了～
這個遊戲比較特別的地方是我為了練習，
全部用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
推
05/08 00:33, , 1F
05/08 00:33, 1F
推
05/08 01:32, , 2F
05/08 01:32, 2F
推
05/08 05:06, , 3F
05/08 05:06, 3F
推
05/08 11:29, , 4F
05/08 11:29, 4F
感謝各位的厚愛^_^
推
05/09 08:55, , 5F
05/09 08:55, 5F
→
05/09 08:56, , 6F
05/09 08:56, 6F
好主意！ 待我來試試看......
2013.May.09 update: 原下載連結改到gh-pages上，現可開新視窗來玩
(感謝gpmm的建議！)
※ 編輯: Alimen 來自: 219.84.209.188 (05/09 14:32)
推
05/09 14:39, , 7F
05/09 14:39, 7F
^_^
推
05/09 20:55, , 8F
05/09 20:55, 8F
這是一個值得討論的議題，
但現階段我能夠想到的最佳解是在不支援的瀏覽器中顯示：
"Your browser does not support HTML5 Canvas. Try Google Chrome (下載連結)"
推
05/10 20:50, , 9F
05/10 20:50, 9F
→
05/10 20:51, , 10F
05/10 20:51, 10F
我東西放在Google Site，應該是連線的問題 我有一次在外面用中華電信也有碰到
(家裡用So-Net沒碰過)
loader那段還有很多可以改進的，不過沒那麼快
在那之前就只能請你多重新整理幾次了......
※ 編輯: Alimen 來自: 219.85.212.155 (05/10 21:48)
推
05/12 01:51, , 11F
05/12 01:51, 11F
→
05/12 01:52, , 12F
05/12 01:52, 12F
已修改，謝謝指正！
推
05/13 01:25, , 13F
05/13 01:25, 13F
這個我沒試出來過......我再看看，謝謝！
推
05/15 08:10, , 14F
05/15 08:10, 14F
我把檔案全部移到gh-pages上了，麻煩再試試看囉^_^;
如果還是不行的話，可能要麻煩你先到github上下載，原始碼裡有附執行檔可以玩
※ 編輯: Alimen 來自: 219.84.210.9 (05/16 15:49)
推
05/28 15:31, , 15F
05/28 15:31, 15F
總算可以讓你正常玩了 (淚目推
※ 編輯: Alimen 來自: 219.85.248.139 (05/30 09:53)
推
07/23 14:27, , 16F
07/23 14:27, 16F