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

[廣告] 米蘭創意種子(實習生)招募中!!

實習不只為了學分，更為了灌溉自己
這次的實習生招募，不限於寒暑假，希望是更深入的培育

米蘭期待找到這樣的種子↓
數位向陽性；
內含許多有趣的idea成分；
對新事物能產生一連串化學變化；
並有努力想成長茁壯的積極熱血。

1.實習需求

創意企劃實習 1~2名

內容說明:　
米蘭的創意企劃工作範疇，著重在創意發展，也講究細節規劃
如果你很積極，你可以學習到
如何發展一個網路廣告或病毒影片的腳本
如何規劃一個網站或網路活動的玩法、單元內容、頁面文案撰寫、動線思考…
如何思考一個數位行銷的創意
甚至　更多!!

評估依據 
創意 (30%)：作品的策略思考、創意概念、文案與畫面的整體表現
認知 (30%)：平常對於網路生態、廣告傳播的觀察和了解
熱忱 (30% ) ：對創意與數位的熱忱
反應能力(10%)：臨場表現和清楚的表達能力

聯絡與收件窗口：Carol　電話：27390000轉131
carol@mail.medialand.com.tw 
信件主旨：[應徵米蘭創意種子-企劃實習，我是<<你的姓名>>]

設計實習 1~2名

內容說明:　
米蘭設計師工作範疇，著重在設計執行及視覺創意表現
如果你很積極，你可以學習到
如何完成一個高質感與創意兼具的作品
如何執行一個完整專案從創意發想、動線思考、單元頁面到完成上線
如何整合設計資源做最有效的發揮
甚至　更多!!

評估依據 
技術 (30%) :軟體熟悉度及呈現的質感
創意 (30%) :個人作品呈現的方式與內容
熱忱 (30% ):對於設計的用心與堅持
表現度(10% ): 臨場表現，應對之間表現的談吐及態度

聯絡與收件窗口：Cheney 　電話：27390000轉162
cheney@mail.medialand.com.tw 
信件主旨：[應徵米蘭創意種子-設計實習，我是<<你的姓名>>]

2.報名期間： 11/25(四)~01/17(一) 24:00止
3.面試期間： 01/18(二)~01/26(三)，錄取通知：1/27(四)
4.實習時間： 02/14 Start，預計至6月底結束，每周至少來三天
5.應徵文件：參與應徵者請務必提供以下內容
A.個人基本資料 
姓名、生日、聯絡方式、學經歷、待修學分list、並附上近期清晰照片乙張
B.我的網路履歷表 
i.使用網路的年資
ii.使用或造訪過哪些網站，其中最喜歡哪個網站？為什麼？
iii.你的個人平台連結與介紹 (例如：Blog、Plurk、twitter、FunP、facebook、flickr、delicious、黑米…)
iv.你在虛擬的網路中，有哪些傲人的身分或成績？
(例如：線上遊戲團長或幹部、巴哈姆特Lv3等級以上、噗浪的Karma超高、擔任過批踢踢小天使或版主、在youtube或blog上的作品曾經被廣為傳閱…)
C.個人作品集(或作品網站、部落格)
D.我的熱情宣言
i. 你所認知的米蘭，以及想來米蘭實習的原因
ii. 你最喜歡米蘭的作品及原因

本次的實習期間屬於學期中實習，也請報名者先考量課業loading喔 ^^

HTML5 Canvas初試玩心得

前一陣子試玩了一下HTML5的Canvas，有一點心得。

基本上Canvas讓我感覺有點像flash的graphic加上matrix的配合畫出一張bitmapdata，Canvas的東西畫上去就是畫上去了，沒辦法只單獨針對裡面的某個物件進行控制，也就是說如果Canvas裡有個東西的座標或狀態改變的話，需要整張Canvas清空再重繪一次。
而且因為Canvas裡的東西是『畫上去的』，所以不像flash的display tree一樣可以給予裡面物件一些事件(ex:滑鼠事件)，因此如果需要跟user互動的話，可能需要隨時算出該物件理論上該存在的座標，然後在Canvas上面疊一個透明的dom上去充當按鈕感應區吧!? 不確定，不過這是我目前想到的solution。

如果沒有寫成類別的話，要純粹用Canvas來玩一些東西其實還挺累的哩…。