IE9 Hackathon

This content is over 9 years old. It may be obsolete and may not reflect the current opinion of the author.


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.