用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上面去翻。結果當然是沒有提供這個服務。
所以我想了一下，這功能大概又是要土法練鋼了…。