作者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)
推 LFking: 07/23 14:27