本文將分享如何用 js 寫出乙個 3d 賽車，我之前曾在技術交流會上也講過一次（這裡是當時用的 ppt），後來有同學反饋說講得太深奧沒聽懂。其實 ppt 裡說的更多的是三維圖形的基礎知識，實現原理體現的稍微少一些，那麼本文將著重從實現原理這塊做一些補充。
先看賽車的示例：還是半成品狀態，很多功能沒有實現，不過目前也沒有後續的開發計畫。
1) 素材：素材是每乙個網頁遊戲必不可少的，本遊戲中素材涉及到白雲、遠山、n 棵不同的樹、小車、時速表盤、時速表針以及其它一些背景等。為了實現延伸，這裡的白雲及遠山等素材一定要做成首尾相接看起來平滑的，中間不能出現交界痕跡，這樣的可以從網上找到素材，再用 photoshop 進行處理。
2) 向量繪相簿：向量繪畫部分沒有必要自己從頭寫起，我們應該將關注點放在遊戲的業務邏輯部分，可以從網上找個自己用得順手的基礎庫，比如 excanvas、raphael 等，如果不考慮瀏覽器相容的話，也可以使用 html5 提供的 標籤。強力推薦 raphael，raphael 是乙個全瀏覽器監容的繪畫庫，她提供大部分常用基本圖形的繪製方法，以及支援通過 svgpath 語法來描繪任意曲線，更甚的是，每乙個圖形單元都對應乙個 raphael 物件，可以類似 jquery 那樣的鏈式呼叫來對圖形單元進行操作，raphael 的圖形渲染載體是瀏覽器提供的原生 vml 或 svg，ie 下使用 vml，其它瀏覽器使用 svg。
實際上賽車的實現過程中考慮了很多細節的問題，由於篇幅有限，這裡只挑一些重點的來介紹。
1) 白雲及遠山：這兩個都是 的背景實現的，通過控制 樣式中的 backgroundpositionx 屬性來達到移動的目的，注意兩個特點：a、運動方向與小車行駛的方向相反（小車左拐時，雲和山向右移，反之則相反）；b、由於白雲離觀察者的距離比遠山要遠，所以白雲運動的速度比山體要慢（本遊戲用的速度是 1:4）。在 ie6 下，變更 backgroundposition 相關屬性的值會使背景過載，導致介面上看起來閃爍，所以這裡要用 document.execcommand(「backgroundimagecache」, false, true) 命令強制背景快取。
2) 路面：路面最重要的構成是兩條貝賽爾曲線，貝塞爾曲線有幾個重要的引數——起點、控制點
一、控制點二和終點，這樣的四個點即構成一條貝賽爾曲線。svgpath 裡的 c 指令可以完成貝塞爾曲線的繪製。路面變換彎度是如何實現的呢？幸好 vml/svg 節點的 path 屬性是允許動態改變的，可以通過改變它的 path 來完成彎度的變化，這點 raphael 庫提供了很大的便利。如果是 實現的話，需要不斷的重繪路面來達到目的。
3) 樹木：本遊戲中樹木是由 6 張隨機產生的，它們由遠及近地運動來向玩家表達車子向前跑的狀態，運動是通過不斷改變樹木的座標和大小實現的，這裡的座標由路沿的兩條貝塞爾曲線來確定。樹木的運動有三個特點：a、離觀察者越遠的樹越小，所以運動使樹木不斷變大，同時也使相鄰樹木的間距變大；b、由於前面的過程，樹木的 y 座標（top 值）不一定在逐漸增大，有時反而在減小；c、離觀察者近的樹，層次要位於離得遠的樹之上。
4) 車子：車子是由一張集合了 13 個可能出現的方向的組合而成（見上述素材部分），你可能會奇怪這樣的怎麼製作，其實很簡單，我是拿 3dsmax 軟體做成的，從網上找了乙個 3d 車子模型，用 3dsmax 軟體改改樣子，並匯出不同方向的，最終用 photoshop 合成。在網頁上，用這張做為乙個 的背景，仍然是通過控制 樣式的 backgroundpositionx 屬性來達到車子變換方向的目的。本遊戲中車子在改變方向或位置的時候，將受到以下引數的影響：當前車速、人為加減速、自然減速（速度自然衰減）、被迫減速（碰擦路沿時）、彎道係數、左右方向鍵累積係數、離心力大小等，這些引數復合運算後的結果將決定車子當前應該處於的 x 座標位置和方向。由於實現在不同的模組中，這裡就不詳細說明這些運算了。
5) 時速表：時速表由表盤和表針組成，表盤是靜止的，表針是可以轉動的。轉動的原理是改變表針的 rotate 屬性，這點在 raphael 庫也有也對應的方法實現，參見 raphael 文件中的 rotate 方法。為了更加逼真，指標加入了抖動策略，具體為：如果車子處於勻速狀態下，指標將在當前速度附近抖動，你可以將車子開滿 180km/h 看看效果。
6) 速度：這是本遊戲中最重要的引數之一，本遊戲中將速度量化為 0-1，1 為滿速，0 為靜止不動。速度引數將決定網頁上很多物件的移動：除了車子上述複雜過程外，還有白雲和遠山的位移速度、路面改變彎道的快慢程度、樹木運動的快慢、時速表指標旋轉的角度等。
關於實現原理就介紹到這裡，下面說說我原來的一些想法：
1) 小地圖：使路況與小地圖結合起來，模擬真實世界。
2) 起點和終點：這是乙個賽車遊戲必備的。
3) 耗油：起跑時，油箱是滿的，在車子跑動過程中，結合速度、路況、玩家控制、阻力等因素來消耗汽油，在到達終點之前油用完就 game over，考驗玩家的駕駛水平。
4) 敵車：路上不可能只有乙個車子嘛。
5) 複雜路況：可以用草叢、沙地、小石頭、水坑等物體來複雜化路況，增加遊戲的難度和趣味性。
6) 路邊風景：結合小地圖，可以在路邊實現一些河流、建築物等，純樹木還是很單調的。
css3 js實現3D旋轉效果
用css3和js實現3d旋轉的效果，主要使用到css3 transform中的一些屬性 perspective，rotate，translate。下面主要介紹一些transform中的屬性的效果和作用 1.transform style 一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d...
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...
CSS3實現3D盒子效果
近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...