最近業務比較忙，但是我們追求 3D 世界的腳步不能停下來~某天在路上看到一輛輛飛馳而過的汽車，想到要不要弄一個賽車類的游戲
沒有再用原生，而是使用了 threejs，畢竟大點的 3D 項目，再用原生就是自己給自己找麻煩了……
本文從 0 到 1 講解了這個游戲的開發過程，其中沒有專門的介紹 webgl 和 threejs，沒有基礎的同學可以結合 threejs 文檔一起看，或者先學習一下 webgl 的基礎知識~
游戲地址如下：

背景：不知道大家還記不記得上次那個 3D 迷宮游戲，有同事吐槽說游戲中間有一個十字瞄準器，就感覺少了一把槍。好吧，那這次就帶來一款第一人稱射擊游戲。寫 demo 鍛煉，所以依舊用的原生 webgl，這次重點會說一下 webgl 中關于攝像頭相關的知識，點開全文在線試玩~~

背景：前段時間自己居然迷路了，有感而發就想到寫一個可以讓人迷路的小游戲，可以消 (bao) 遣 (fu) 時 (she) 間 (hui)

沒有使用 threejs，就連 glMatrix 也沒有用，純原生 webgl 干，寫起來還是挺累的，不過代碼結構還是挺清晰的，注釋也挺全的，點開全文開始迷宮之旅~

What's AlloyStick

AlloyStick 是一款專為 HTML5 開發的 2D 骨骼動畫引擎?？梢杂糜?HTML5 動畫開發、HTML5 游戲開發。AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成。骨骼動畫編輯器提供強大的骨骼動畫編輯功能，拖拽骨骼組合角色，通過設置動畫關鍵幀，輸出動畫數據。js 動畫庫根據輸出數據，依靠強大的自動補間和骨骼關系，就可以制作出逼真、生動的 Canvas 骨骼動畫，可以暢快的運行在 PC、手機、平板等設備里。

一 .《墻來了》簡介

《墻來了》是一款基于 HTML5 的體感游戲，第三屆騰訊創意馬拉松的一等獎作品，由 騰訊?AlloyTeam?和 HTML5 夢工場聯合出品?！秹砹恕?采用 HTML5、Javascript、CSS3 等全新 Web 技術來構建一個在線的體感游戲，只要有一個瀏覽器和一個攝像頭，就可以通過身體的擺動，體驗穿墻的刺激與快感。

• 運行平臺：Chrome
• 語言支持：中英文

【場景】：

由于 CodeTank 是一個 JS 的編程游戲，所以用戶的代碼都可以在 CodeTank 平臺上執行，從而控制 tank 的個性化行為。

在 CodeTank 設計之初，主要需要實現的目標如下：

1. 自定義的坦克可以調用公用的 API，例如 fire，ahead 等控制坦克行為的 API。
2. 自定義的坦克可以實現自己的事件處理程序，在特定事件觸發時提供自己的響應。
3. 自定義坦克管理屬于自己的狀態隊列。

一、坦克結構組成：

坦克由三個基本部件組成：主體，炮管和雷達。

1. 主體：可進行移動或旋轉動作。
2. 炮管：可進行旋轉和開火動作，開火可控制子彈的能量范圍。
3. 雷達：可進行旋轉和探測敵人的動作。當坦克停止移動時，雷達會被關閉，玩家可以通過手動調用 scan方法開啟雷達。

歡迎來到?CodeTank?的世界，將會帶你進入一個神奇而充滿挑戰的代碼機器人的世界！

CodeTank（代碼坦克）是全世界首個 Javascript 程序員的在線編程對戰游戲，是由?騰訊 AlloyTeam?和 HTML5 夢工場聯合出品的在線坦克仿真游戲平臺，CodeTank 采用 HTML5、Javascript、CSS3、NodeJS、MongoDB 等全新 Web 技術來構建一個基于互聯網的在線智能坦克機器人戰斗仿真引擎（所以需要支持 HTML5 的瀏覽器來運行）。

歡迎來到?CodeTank?的世界，將會帶你進入一個神奇和充滿挑戰的代碼機器人的世界！

相信每一個男人的心中，都有一份對坦克 (Tank) 特殊的情結，那就訪問：

CodeTank 官方網站：http://CodeTank.AlloyTeam.com/

關于 Canvas 中動畫的處理和實現

大致會有三種類型：

• 矢量動畫【No Textures】
• 關鍵幀動畫
• 骨骼動畫