2012年1月16日星期一

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


2011年12月7日星期三

用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都不適用。所以並不是很好的解,但目前為只大概也只能先這樣(攤手)。

2011年11月29日星期二

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

2011年5月17日星期二

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:會繞路),但是基本上對於簡易遊戲來說應該已經很足夠。如果需要更符合自己遊戲的話可以依這個演算法的邏輯去加一些判斷或變數。

2011年5月11日星期三

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


有時(通常是IE),會發生FB.Event.subscribe裡面的事件沒有被觸發的情況。找了一下資料,原來後來Facebook在document裡有多了一個Custom Channel URL。
http://developers.facebook.com/docs/reference/javascript/FB.init/

只要在原本的網站上多放一個叫做channel.html的檔案,裡面就只放一行code:
<script src="http://connect.facebook.net/en_US/all.js"></script>

然後在init的時候指定channelUrl到這個檔案:
FB.init({
appId  : 'APP ID',
channelUrl  : 'http://xxx.com/channel.html'  // custom channel
});


就解決了。(至少我的電腦上測試是解決了)

2011年1月26日星期三

Google Image Search自己弄api



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

2010年12月9日星期四

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


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

米蘭期待找到這樣的種子↓
數位向陽性;
內含許多有趣的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喔 ^^