IE9 Hackathon

Skip to IE9toss demo, source code and explanation.

星期六去了 IE9 黑客松,算是一場輕鬆的寫程式、認識其他 Web Developer 的比賽。滿錯愕的,因為以為是個 50/60 人以上,類似 Yahoo! Open Hack Day 一樣的大型活動,結果簽到簿只有少少 20 人,超緊張的,本來想說如果人多,做不出來可以打混… XD。到的時候有點晚,感謝 josephj 收留讓他坐他旁邊的位子。食物果然如活動介紹上面寫的一樣相當誇張,早上麥當勞,中午吃了海壽司,下午有星巴克,最後外面的零食跟雞排就 pass 了。

回到活動本身。上官大大出的比賽題目是寫出 2D 迷宮遊戲,或是 Paper Toss 遊戲。我選了 Paper Toss,因為感覺動態遊戲效果比較好,而且迷宮遊戲要求的滑鼠、鍵盤控制我比較不會。後來把握時間把 spec (XD)要求的功能都寫進去了,也盡量用了想到用的到的 IE9 新的 HTML5 技術。也因為不會做 Art,剛好為了搞笑,所以我就做了個把 IE9 Logo 丟進 HTML5 標誌的遊戲:

DemoSource

用到的技術可以在 Github 上面的 README 看到。寫一些感想:

  • 大部分的同好都是選迷宮,原因是因為不知怎麼處理丟東西的物理。其實 free fall 不需要真的解方程式來套或是像強者如 whsienc 把 box2D 拿來用,只要跑 loop,假設 loop 每次執行的時間為單位時間(要不用這個假設,實際量瀏覽器跑 setInterval/setTimeout的時間也可以,jQuery animation 就是這樣),每次執行位移的變化量就是速度乘單位時間、速度的變化量就是加速度(重力)乘單位時間。而且自由落體是各方向獨立的,X/Y 可以分開計算。
  • 風阻力用高中物理的近似,造成的加速度和速度成正比,所以每個 loop 再把加速度減掉設定的係數乘上目前的速度。不過這就沒有各方向獨立了,但我在程式還是把他當成方向獨立,因為這是黑客送不是物理模擬 XD。寫這些計算程式大概花了 1/3 的時間。
  • 知道可以這樣寫是因為大一物理系計概 … 這個運動不難,解出來其實是二元偏微分方程組,把方程式丟進程式也可以把動畫套出來(以我現在的工數能力可能解不出來就是orz)。但也是因為計概才會知道運動模擬應該要這樣寫,因為真實世界有方程式解的運動相當有限。說來也滿好笑的,雖然很喜歡寫程式,但當時其實很討厭那門課。
  • 在跑的動的情況下,東西上 canvas 滿方便的。而且預設的底是透明的,所以可以浮在任何背景的前面,裡面的東西只要 clearRect 就可以清掉。
  • Webkit 的 drawImage 對 SVG 的原生大小判斷是有錯誤的(所以上面的 screenshot 裡 HTML5 logo 才會比例錯誤),同樣的程式碼在 IE9 是對的,所以就保持那樣
  • Firefox 因為不明原因會 JavaScript Error,無法執行遊戲,我還沒 trace (大概也不會管了。Pull Request anyone?)
  • 撞到了 jQuery 這個 Issue:jQuery.camelCase() & jQuery.css() incompatible with IE prefixed properties。後來寫的 Wordaround 是 josephj 教我的。
  • 寫完 -ms-text-shadow: 發現沒效之後問了 ericsk 才發現 IE9 沒有XD text-shadow 本來就沒有 vender prefix,IE 也沒有支援就是。

再來,講一下主角,IE9,其實活動前後我的看法沒有什麼變化:

  • IE9 還是可以套進原本的開發流程:用 Webkit Nightly + 文字編輯器,全部寫好上 feature detection 之後再到其他瀏覽器調 style 和小的 JS 錯誤。但好處是相較於其他 IE,因為它更接近標準而且終於有堪用的開發者工具,所以調起來又更輕鬆了一點,終於不是為了支援 IE 程式碼要增加 50% 這樣。我猜是參考了很多 Webkit 的行為。
  • 但是呢,HTML5 DocType 沒有正確的在 ddsakura 的電腦上觸發 IE9 模式,於是就壞掉了。不知道是之前有設定 overwrite 掉還是真的有問題。
  • 另外,雖然效能終於趕上了其他瀏覽器(明天正式推出,正式版一字排開 Fx 就要被比下去了),但是還是少了一些功能,所以功能偵測和 fallback 還是不能少(至少我上兩個星期寫的兩個程式都不能用,我想要 Web Workers 和 FormData Interface 啊啊啊)
  • 還有一個不幸的事實是,因為 WinXP 不能裝 IE9,故 IE6 很有可能再活個一兩年…

一直都認為一群人組成的團體是沒有靈魂的;一家公司為股東追求利益天經地義,所做決定無關善惡道德。某家公司做了和我們相信的理念相同或是相反的事情,都只是剛好而已。如果 MS 往符合理念的方向移動,該給的肯定還是要給啦。上官大大主辦的開發者的活動真的不錯,大家有空真的可以把握機會投投看。我也是在那天才真的認識了 josephj,經由他和 hlb 聊天開釋才真的搞懂最近那些 JS Loader 和 AMD Spec 在幹嘛。啊,還有在同一間學校 ID 看很久但是都不認識的 grassboy

嗯,以上絕對不是因為拿了 peer vote 第三名抱了 XBox 360 + Kinect 回家才這樣說的 XD 你看我沒有都講好話嘛。

6 thoughts on “IE9 Hackathon

  1. 我其實不太同意「因為 WinXP 不能裝 IE9,故 IE6 很有可能再活個一兩年」這件事,真的會升級的都在 IE8 了,還停在 IE6 必然有神奇的理由。

  2. @BobChao, 我們家總務就是 WinXP 使用者,但在「害怕把 IE6 升成 IE8 以後財會相關系統會有問題」的前提下,拒絕升級到 IE7/IE8,不知道這算不算是神奇的理由?私以為不想裝的人可以介紹給你許多怪誕的理由,但歸結出唯一結論就是:俺不想裝。

  3. hello
    能否請問你
    我有一各網頁程式利用html5讀取iphone4加速度感應計的值
    但是safari縮小到背景後此程式就無法執行
    請問可以用worker讓這各網頁程式在背景執行嗎
    謝謝

  4. Pingback: ie9 - 104-1111 網頁熱搜“ie9”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.