很讚的遊戲編輯器

[ PLAY ] 這個遊戲是較早期的作品，所以使用的技術是以當時自己較熟悉的 Win32 相關技術製作。遊戲核心部份一開始就己分離出來，但還不是100%跨平台。畫面部份是以Win32 GDI呈現，以及透過Windows視窗機制處理輸入。本次目標是將遊戲移植到 HTML5 ，主要的工作有三個部份。 將遊戲核心Gameplay確實作到跨平台。 將畫圖及輸入部份抽離作到跨平台。 將遊戲移植為HTML5可以在Browser上執行。 第一部份己幾乎完成了，只需再作點小修改就能達成。主要的移植工作在於第二和第三部份，以下是這部份工作的重點記錄。 抽離繪圖層 因為867和Win32 GDI緊密結合，一時無法輕易的將繪圖層抽離出來。萬事起頭難，可以先從最簡單的改良開始，一次一小步逐步重整。首先增加一個Renderer類別，只包含一個很大略的一個render函數。而render函數的實作，是根據當前遊戲狀態透過renderTitle和renderGame二個函數實作遊戲的全部繪圖。 class Renderer { public: void render(const Game &game, CDCHandle& dc) { switch (game.iStage) { case Game::STAGE_TITLE: renderTitle(dc); break; case Game::STAGE_GAME: renderGame(dc, Game::MENU_NONE); break; case Game::STAGE_MENU: renderGame(dc, Game::MENU_GAME); break; case Game::STAGE_DIE: renderGame(dc, Game::MENU_NONE); break; case Game::STAGE_OVER: renderGame(dc, Game::MENU_OVER); break; case Game::STAGE_WIN: renderGame(dc, Game::MENU_NONE); ...

有一次去看診的時候，因為等了好久等到有點快失去耐性，看完診花了不少時間。在回家的路上有感而發，想說不知道有沒有什麼可以訓練或培養耐性的方法。如果沒有的話，或者我自己可以作個APP來達到這個目的，最後就作了這個APP。 < 玩 玩 > < Android > 一開始想到的不是烏龜，而是主畫面是一個泡泡。這個泡泡會愈來愈大，但很容易就破掉。比如不小心點了畫面、程式進入背景、有來電或收到訊息通知等等，都會讓泡泡破掉。程式的目的就是想辨法讓泡泡持續變大，也就是你愈有耐心的保護它，就愈成功。可能可以顯示一個存活時間，用來表示耐心度。 後來一邊考慮程式內容時，一邊把泡泡改成了烏龜。同時考慮到，如果這隻烏龜很容易就死掉，要用這種方式來訓練耐心似乎很難，甚至會有反效果。考慮到一次性的遊戲方式，以存活度來評價耐心度有難度，改變為養成性質的作法。現在不會死掉了，存活時間是累計制的。這樣子應該會比較容易讓人持續的去作這作事，長期下來應該就能提高點耐心吧。 改成養成性質的作法後，其它的設計就能對應調整。首先除了存活度(存活時間)之外，再加上一個等級。這個等級的定義，只是簡單的每次烏龜從左走到右就升級一次。等級每升一級，烏龜就長大1個pixel。同時等級也對應烏龜移動速度，LV10表示每10秒烏龜走1個pixel。以上是核心功能，其它還設計了幾個裝飾畫面的功能。如上方背景日夜變化、月相變化及顯示12星座等。 以下作重點說明。 背景連續山脈圖 背景的山是先建好一個div元素，以CSS設定背景水平重複。   // CSS.   #mountains {     background-repeat:repeat-x;     background-position:bottom;     text-align:     right;font-size:48px;   }   // HTML.   <div style="mountains">   </div> 重複的圖片則以一記憶體canvas畫了一個山型emoji後產生。 var mountains = document.getElementById('moun...

這個遊戲的靈感是源自兒子的學校課本裡面，有個叫不插電程式課的書本裡面得到的。書裡面有一類型的題目就是把圖畫裡的數字填上對應的色塊，全部填滿後就能夠得到一張馬賽克風格的圖案。 利用這個概念，再結合之前製作的 繪文字刮刮樂 的分類資料，使用emoji製作了一個馬賽克像素風的填圖小遊戲。 玩 / Android 底下是這個小遊戲的製作技術重點。 圖片馬賽克化 把圖片馬賽克化的原理很簡單，簡單的講就是： 先把整張圖片根據馬賽克大小作切割。 對每一塊切割下來的馬賽克圖塊裡面的所有像素的顏色計算平均值。 使用計算出來的平均顏色填滿馬賽克圖塊。 對所有馬賽克圖塊作同樣處理，這樣就完成了把一張圖片馬賽克化了，接下來底下說明一些實作細節。 1、繪文字填圖的馬賽克分為大中小三種尺寸，為了在手機上最後呈現的畫面尺寸大小適中，把canvas的大小設定為400x400px。為了方便計算，三種馬賽克方塊的大小分別為：16x16、25x25及40x40，16、25及40正好都可以整除400。在遊戲主選單最下方選擇馬賽克尺寸後，就會以這個大小對400x400尺寸的原圖作馬賽克化的切割。如果選擇最小尺寸的馬賽克，則原圖被切割成25x25個圖塊。如果選擇中等尺寸的馬賽克，則原圖被切割成16x16個圖塊。若選擇最大尺寸的馬賽克，則原圖被切割成10x10個圖塊。 2、計算每個馬賽克圖塊的平均顏色的方法很直接，就是對圖塊中每一個Pixel加總後，再除以Pixel總數得到平均值。需注意的是，加總再求平均的計算是要對顏色的RGB值各別作。最後把得到的平均的RGB值，再組成一個新的顏色作為整個馬賽克圖塊的顏色。 function sumRgb(data, x, y, cw, ch) {   var rgb = [0, 0, 0];   for (var i = 0; i < cw; i++) {     for (var j = 0; j < ch; j++) {       var idx = 4 * ((x + i) + (y + j) * canvas.width);       rgb[0] += data[idx];       rgb[1] += data[id...

勇者小白是一個簡單的冒險小遊戲，主要由三大系統構成：任務系統、對話系統和背包系統。由小遊戲和過場劇情對話把遊戲故事串連起來，目前小遊戲數量己經有30個，還在持續增加中。這些小遊戲和故事，大部份由我設計製作，有些是和兒子一起設計由我製作。 從我兒子幼兒園開始就就只會讓小孩玩勇者小白，後來女兒也開始玩了。其間也試著引導小孩幫忙設計內容，雖然效果還不明顯，不過多少也為生活增加點樂趣。遊戲裡面的資源儘量都是網路上的免費資料，而有些是自己簡單製作的，但也有些就是借用的，那天有問題時再作更換。 總之，勇者小白會持續不斷的增加內容。 試玩  / Source ;----- 很久之前我就想要製作一個冒險類的小遊戲，所以某天靈感來了很快的寫了幾頁的故事大綱。 早上起床的時候發現小白不見了 一出門外星人巨大的太空船蓋住整個天空，廣播說要你們好看 跟爺爺說明，爺爺說出一段古老的傳說，需要3把神兵利器才能把外星人打跑，分別是(xx,yy,zz-要命名) 突然發現爺爺用來抓癢的手牌不求人是其中一把神兵(布)-獲得(布) 爺爺說張媽媽家有另一把神兵，於是去找張媽媽 張媽媽在她家門口曬衣服，她說她家的傳家之寶封印在洞穴內，被祖先保管著要通過考驗才能取得 到洞穴，用手牌不求人解開封印，進去後通過考驗(倉庫番)，和祖先對話取得寶箱，打開是空的... 回去找張媽媽說明-原來她把傳家之寶拿來當曬衣杆-獲得(石頭) 從張媽媽得知另一把神兵是由小香家保管的 小香正在作美勞作業，(取得布和石頭前她只會在門口玩)，發現她桌上有一把美勞用的剪刀，不過要拿棒棒糖來換 跑到雜貨店去，結果沒有錢，回去找爺爺要5塊再到雜貨店買棒棒糖(要今天的零用 錢) 拿著棒棒糖去和小香換到剪刀，但是沒有神力不能用 此時小香爸爸出現，他說他的傳家之寶是一段咒語，可以附與剪刀神力變成神之剪刀，不過還缺少桿子的部份 到搖滾阿凱家去，向他借打鼓棒，不過要先幫他找回偷跑的小烏龜 找小香爸爸但少了烏龜的眼淚才能施咒，回去找阿凱的小烏龜 需要一個瓶子到雜貨店玩轉蛋取得(找爺爺要但今天給過了，雜貨店老闆給一個 打工機會賺5塊) 親了小烏龜一下讓他大哭，趕快用瓶子裝獲得烏龜眼淚 再回去找小香爸爸,組合成神之剪刀-獲得(剪刀) 到飛碟處，用猜拳打倒魔王 警報響起,飛碟要爆了，趕快進到機艙，解除爆炸裝置(解謎) 魔王：謝謝你，小白。你真是個勇者！ ...