JS+CSS練習 - 米蘭數位官網HTML版本

持續的玩CSS及JS中。

因此拿了米蘭的官網來練習。
米蘭官網連結在這ㄦ - http://medialand.com.tw/home.htm
練習結果在這ㄦ - http://labs.medialand.com.tw/jason/html/ml/

比官網少了一些單元，因為跟資料庫要資料的部份我(目前)懶得去寫…。
一開始我傻傻的，想說在畫面上轉來轉去的那些球，「搞不好」可以直接用dom來跑就好，畢竟只是scale的縮放，沒有複雜的變形，只要把透視給算好就ok了。
於是就試寫了第一版，下場就是效能十分之慘。
苗頭不對之下，只好乖乖的用canvas來處理這些轉圈圈，效能果然好很多了。但由於老IE不支援canvas，所以我仍然保留原本的dom版本，只要判斷瀏覽器不支援canvas，就會把dom拿出來跑…。

練習的作品我是盡量把它寫得很像原本flash版本的效果，我也是用像寫AS的概念一樣去安排配置畫面上的東西，但只能盡量，多少還是有一點點的差異，不過畢竟是練習作，練習中學到的經驗比較重要。
主要的一些(奇怪的)心得就是：
1. 把div當成DisplayContainer來用XD…。
2. 空白的div可以拿來當按鈕感應區…。
3. 還沒找到很好用的tween(好啦，我自己也沒很用心的去找)，現在只能自己用setInterval去跑，或是簡單的就交由JQuery的animate去跑。
4. Canvas要判斷滑鼠是否over到某顆球上的這件事，小麻煩啊…，尤其是兩顆球如果疊在一起就更討厭了，現在只是球狀還好，之後如果寫到複雜圖案的時候，就會又點傷腦。
5. 除了canvas以外，其它的東西其實一熟練的話處理起來還算快，反正遇到困難的結構就是二話不說多加幾個div來當DisplayContainer!!(但我先說，這可能不是很正統的做法XD)

Javascript用prototype進行繼承會發生的奇怪現象

這問題真的很奇怪，而且很難理解。
測試網址如下(code很簡短，可直接看原始碼)：
http://labs.medialand.com.tw/jason/html/inheritance/test1.html

狀況是，
1. 建立一個Test的類別，在建構子時宣告並初始化一個陣列testValue。
2. 在Test類別建立一個function addValue，用來將傳入的值push到testValue裡。
3. 在Test類別建立一個function destroy，用來將testValue清空。
4. 建立一個AA類別繼承Test類別。
5. 實體化一個AA類別，變數名稱a1，呼叫a1.addValue(123)將123這個值push到a1.testValue裡。
6. 呼叫a1.destroy()來清空a1.testValue。
7. 目前看起來都正常，怪的來了。
8. 實體化另外一個AA類別，變數名稱a2。
9. 直接取得a2.testValue，居然不是空值，而是123!!!
照道理說，testValue裡有123這個值，不管怎樣也是屬於a1這個instance的，不應該會出現在新new出來的instance裡。更何況在a1的時候已經執行過一次destroy來清掉testValue了。
無法理解。
這種情況目前測試，只發生在testValue非一般常數型態的變數上，數字跟字串不會發生這種情況，在array或object上就會發生這種異常的狀況。

解決方法應該有很多，目前我覺得我自己最喜歡的方式，就是在AA類別的建構子裡再一次強制呼叫父類別Test的建構子，就像AS3裡的super();一樣。
再測過一次後這個問題就會被解決。
修正過後的測試網址如下(差別只在於AA的建構子裡多了一行)：
http://labs.medialand.com.tw/jason/html/inheritance/test2.html

用CSS取消上層dom物件的滑鼠感應

因為之前寫ZooKeeper的關係，其實有一個地方有點困擾，就是html的dom沒有辦法像flash的movieclip一樣改變滑鼠感應區，所以導致z-index在較高的dom會擋到下方的dom讓它無法被點擊到。
這兩天想到了這個問題又繼續在google上找解法。

找來找去好像並沒有找到太有用的解，倒是找到了一個CSS語法可以將整個dom的滑鼠感應區取消掉。
pointer-events:none;
把這一行加到要被取消的dom元件裡的CSS就好了。
這個東西好像是SVG的東東，所以目前只有FF/Chrome/Safari有支援，IE很杯具的7/8/9都不適用。所以並不是很好的解，但目前為只大概也只能先這樣(攤手)。

CSS+JQuery練習ZooKeeper(寶石方塊)

好久沒動這個Blog了，草都長得跟人一樣高了。

最近在玩CSS跟JQuery，玩一玩覺得挺有趣的，JQuery果然十分的強大，用JQuery來寫js真的可以省下很多事。CSS的position有時雖然有點惱人，但是把它當成一整個display container的話，其實也沒有想像中的麻煩，加上JQuery的話甚至可以把它當成flash來寫…。

所以就給自己一個練習，寫了一個ZooKeeper(我習慣叫這種遊戲叫「寶石方塊」XD，圖案是直接拿ZooKeeper來用)，沒有加入GameOver及分數的判斷，因為那純粹只是邏輯，跟練習CSS+JQuery無關。效能上也沒有tune過，就是用陣列一直掃就對了。

有興趣的可以點過去玩玩，Code都在原始碼裡
CSS+JQuery練習ZooKeeper

A*尋路法 (AS3)

前一陣子想寫個遊戲來玩，所以難免一定會遇到在地圖上的人物怎麼找路走的問題，所以看了一下A*。
參考資料是這一篇：
http://www.lihuasoft.net/article/show.php?id=3523
原文是：
http://www.policyalmanac.org/games/aStarTutorial.htm

其實在上面的文章裡面已經把這個演算法說明得很清楚了，所以似乎不太需要再多做說明。
基本上的原則就是：
1. 每次抓取一個點，計算該點附近接鄰點的F值，這個F值是G(移動到該點要花費的移動點數)+H(該點到終點的垂直距離+水平距離總合)。
2. 將被計算的點放到一個open list陣列裡，並將那些點的父節點指向到目前的節點，然後將目前的節點放到close list裡(表示已經走過並計算完成)。
3. 從所有的open list裡抓取F值最小的一個節點出來，重覆1~2步驟，直到計算到終點為止。
4. 取得終點的父節點，再取得父節點的父節點(依此類推)，這些被取出的父節點list就是路徑。

我寫了一個AS3的版本，如下(點圖開啟swf)：

黑色框框是不可經過的點，點選空白的方框可以設定起始點，再點選另一個方框後就是設定終點，勾選DebugMode之後，一次按一下NextStep來觀看每次尋找路徑的計算過程。點New Map會隨機產生新地圖。
原始檔可在此下載：下載

心得：其實這版的A*似乎是很簡易版的，尋找出來的路徑有時在人類的眼中看起來似乎有點怪異(ex:會繞路)，但是基本上對於簡易遊戲來說應該已經很足夠。如果需要更符合自己遊戲的話可以依這個演算法的邏輯去加一些判斷或變數。

FB.Event.subscribe事件沒有被觸發

無法查看此摘要。請 按這裡查看文章。

Google Image Search自己弄api

最近常被企劃問到可不可以直接在活動網站上直接Google圖片，然後拿那些圖片來玩耍。
我想應該就是前一陣子一個日本網站害的，所以搔搔頭說聲我不確定我study一下，就上google code上面去翻。結果當然是沒有提供這個服務。
所以我想了一下，這功能大概又是要土法練鋼了…。