星期四, 4月 28, 2011

IE9黑客爽賽車激盪出XBOX360 Kinect 同捆包

上周六再度去到了上官的場子參加IE黑客爽(hackathon, 顧名思義是駭客馬拉松,其實就是寫程式、吃東西、程式員交流的活動),參加上官辦的活動已經不是新聞了,但是這次參加的是M$的場子,一場宣揚IE9火力有多強大的活動。這次的目的除了大家吃爽爽,用HTML5寫一下在IE9上可以跑的程式之外就是前三名有可以拿XBOX(不是KKBOX....Orz)+Kinect和大冒險遊戲一片,這次的題目是有兩個。
  1. 用canvas做出圖形驗證碼,越有效果越好!!!並且在原始碼中不能看出驗證碼的內容。

  2. 做出賽車遊戲,要有終點!
對我來說這兩個題目都很有難度,第一個圖片處理的視覺我太弱了,再加上加密的技巧又不強,想了想,只能硬著頭皮做了2D的賽車遊戲,沒錯!是2D,因為像是馬力歐賽車那樣的
3D式的賽車我做不來,自動產生彎曲的賽道更不用提了....在開始做之前就先研究一下別人做的賽車遊戲大概是如何,第一個就想到馬力歐賽車,就找到了下面這個遊戲:http://www.bigmoneyarcade.com/index.php?action=playgame&gameid=201

扯了那麼多還沒到正題,先秀一下我做的賽車遊戲,裡面的圖都是透過google 圖片搜尋賽車遊戲來的墊檔物,經過參考上面的遊戲,弄了一個可以換車子的選單,也順便做了換地圖的功能。程式的部分為了東西的產出大部分都利用現有的libary,利用jquery和EaselJS完成了canvas的操作,jquery ui 只用到一開始的選單。車子移動的原理則利用速度乘上,當時的角度算出xy軸應該移動的值。

最後承蒙大家喜歡我弄出來的東西,這個小作品被票選為當日的第二名(感謝每位給我高分的參加者Orz...),而我的同事Egist弄了一個更酷炫的圖形驗證碼加上賽車的遊戲,也拿到了一台,也是大豐收!!!從他的文章中可以看到當天食物的盛況!

再來就是快樂XBOX360 Kinect開箱圖....沒有文了


沉重的一大盒




開箱...



XBOX站起來了




所有的配件



經過多次的更新再加上無數次的kinect校正終於有的遊戲畫面!房間太小真的不太適合~