經過一整天的不懈努力,我們成功晉級進入了最後的前五名。這次比賽非常有趣,基本上我們從第一天中午一直玩到晚上,然後第二天回來又繼續享受了美食。雖然最終未能獲得獎金,但我們在比賽中學到了許多寶貴的知識,例如如何解決安裝 npm 套件的問題和更新 npm 套件的技巧。
第一天中午的時候已經把 Demo 做出來了,但是不知道為什麼刪除node_modules
之後,Expo 就直接崩潰了。這是因為package.json
裡面根本就沒有把完整的dependencies
寫出來,當我輸入npm install
的時候就不能順利安裝。於是我只能在 CodePen 裡面開一個 Pen 用來做控制器。
技術細節
這個控制器利用window.addEventListener('deviceorientation', handleOrientation);
來監聽 Android 裝置的方向。當加速規偵測到裝置方向的變化,它就會調用handleOrientation
方法。
而handleOrientation
方法有兩個目的:
- 獲取
event
裡面的alpha
,beta
,gamma
數值,它們分別代表裝置的 z 軸, x 軸, y 軸動向。
z 軸介乎於 0 ~ 360 度之間,x 軸介乎於 -180 ~ 180 度之間,代表裝置的前後動向。y 軸介乎於 -90 ~ 90 度之間,代表裝置的左右動向。
- 發送 event 到服務器。
這個很簡單,利用 socket.io 就可以了。比如說socket.emit('event');
而在展示用戶數據的時候,我們用 C3.js 來做實時渲染數據。利用 C3.js,我們很容易就可以產生 D3 圖表,而不是重寫 D3 代碼。我們也可以修改每一個元素的樣式。感覺再寫下去就變教學文了。
比賽照片
以下是比賽時拍攝的一些照片:
感謝這次一起參賽的三位隊友。
這次主辦單位派發了港幣 120 元的餐券,還有很多零食,飲料。最重要的是,有我最喜歡的忌廉汽水 www。希望以後都可以繼續參加比賽,學習更多的編程知識。