javascript怎麼編寫
整理 | 蘇宓
出品 | CSDN（ID：CSDNnews）
有些人玩遊戲，是為了尋求刺激；有些人玩遊戲，是為了休閒安靜地打發時間。二者的感受如何才能兼得，近日，蘇格蘭愛丁堡的一位開發者 Anslo 潛心開發了 16 個月，釋出了一款名為 《Slow Roads》（slowroads。io）的免費、輕鬆的駕駛遊戲，可以讓玩家在電腦上體驗《速度與激情》的感覺，還能欣賞由程式自動生成的優美風景。此外，這款遊戲可以直接在瀏覽器中執行，無需登入或者安裝，對於玩家而言，即開即玩。
玩法
《Slow Roads》一經推出之後，便受到了不少玩家的關注和試玩。和傳統駕駛類遊戲有所不同，這款遊戲在玩法和技術實現上有著巨大的差異。
首先，在遊戲玩法上，它沒有撞車、沒有失敗更沒有輸贏。隨著汽車的行駛，道路會一直在延伸，風景秀麗的景觀在身邊飛馳，最為值得關注無論是春夏秋冬，還是白天、傍晚、黑夜，亦或是森林、沙漠、環山，場景都可以一鍵“無縫切換”。
另外，駕駛的車也可以切換為轎車、長途汽車、腳踏車。
如果你的方向盤偏離了道路，也可以按一下「R」鍵將車重新定位到快速道上，甚至道路也是可以選擇的。當然，如果你願意，還可以駕駛越野車或者體驗一下水下行駛的感覺。
當然，玩累了，還可以開啟自動駕駛模式。
同時，這款遊戲的操作也非常簡單，W 鍵或向上箭頭是加速，S 鍵或向下箭頭是剎車。A 鍵和 D 鍵（或左右箭頭）控制轉向；玩家也可以透過按住 Shift 或雙擊 W 鍵來升級汽車；C 鍵可改變攝像機角度，Q 鍵和 E 鍵在可用的天氣和照明條件下迴圈。如果你不喜歡鍵盤控制，也可以改用基於滑鼠的轉向。
在技術實現上，與使用傳統遊戲引擎開發的遊戲不同，Anslo 表示，《Slow Roads》使用了 three。js 的 3D JavaScript 庫構建，可直接在 Chrome、Firefox、Safari 和 Edge 瀏覽器中執行。與此同時，上述的場景切換都是由程式自動生成，透過技術實現，可以動態生成無限地圖和處理事務。這是一個相當複雜且有趣的技術演示。用開發者 Anslo 自己的話來形容，「該遊戲的實驗正在挑戰瀏覽器遊戲的合理邊界」。
接下來，我們不妨一起來看一下具體的技術原理。
技術實現
事實上，這一款遊戲的製作不僅需要深厚的開發功底，也需要有設計、物理學等知識儲備。在《Slow Roads》中，作者首先透過生成一個高度圖，採用了類似於 Perlin 噪聲的演算法，並進行了修改最佳化，從而實現更真實的山丘景觀。
繼而使用一個 npm 包 Alea（https：//www。npmjs。com/package/alea）用作 PRNG（偽隨機數生成器，Preudo Random Number Generator），用於複製和貼上實現。
當完成第一步開發之後，第二步便是進行車子行駛的道路規劃。Anslo 選擇採用了以下步驟：
選擇地圖中一個不太陡峭、不太深的地方，作為行駛的起點。同時，這也是道路中線的第一個點。
進而選擇一個方向，並測量周圍的高度圖，以此評估橫向和縱向的坡度。
然後，道路中線最好是能向坡度下滑的方向移動 10 米。點被編碼在一個雙向連結串列中，每個點都使用元資料（如坡度、道路寬度和曲率）註釋。
上面這個過程是會一直重複的（以從車輛位置開始的 15 公里的地平線為界），但注意行駛的車道不要有自相交的情況，這也是遊戲中道路規劃最難的地方。
中線點的高度用一個 9 個點的視窗進行追溯平滑，以避免海拔的突然急劇變化。
在一個較短的地平線上，大概 10 米的中線被用二次貝塞爾曲線以 1 米的解析度進行平滑點的註釋。
當道路規劃完成之後，第三步便是渲染環境。這裡可以使用一個 5x5 的大粗網格（這款遊戲中，作者採用的是 10 米的解析度和 1 公里的最大視距）來渲染大型場景。這被稱之為“遠網格”。
在靠近道路的地方，是一個由更細的 5x5 網格組成的，每個網格拼接到一起，沿著道路中線行進，形成一個連續的 “走廊”。這就是 “近網格”，從車輛的位置向前生成一個固定的水平線。
同時，遠處網格現在重疊的頂點被粗略地 “隱藏 ”起來，把它們沉到幾米以下。
然後離道路中線接近的地方，在道路的高度和底層環境的高度之間插值，以實現無縫過渡。
除了以上，Anslo 還採用了一個額外的 3x3 網格，渲染離道路中線更近的地方，最佳化細節，實現更精細的體驗。
在圖形細節中，這名開發者在遊戲中的地面紋理使用世界座標的 UV，並與 perlin 噪聲混合，以改變草的顏色。另外，在樹葉地圖下應用了一個暗色的紋理，用來產生樹影的感官。
正如上文所述，這款遊戲還採用了一些物理學的基礎知識，如汽車每個輪子的動力學都是獨立計算的，使用圍繞重力、表面摩擦力和地面法線的常規運動學方程式。
最後
目前這款遊戲已經基本完成，不過，Anslo 認為也還有不少需要最佳化的地方，後續可能會改善天氣效果、更多的車輛型別和控制器支援。
作為一款沒有使用如 Unity、UE5 等遊戲引擎，而僅是使用了 JavaScript 實現的遊戲而言，它的輕量級獲得了不少好評：
火星地圖很有趣。另外，我發現汽車在倒擋時候可以同樣快！
如果能教會自動駕駛漂移會很酷。
現在的我沒有駕照，但是也能透過瀏覽器獲得駕駛通訊證了，榮譽！
期待後續可以加上背景音樂！
也有不少網友感嘆似乎回到了高中時期玩《Geep Simulator》的年代。不過，目前《Slow Roads》暫時還沒有開源版本的計劃，但作者表示將來不排除有這種可能性。同時根據遊戲的頁面顯示，Anslo 稱正在致力於保持《Slow Roads》免費提供且沒有廣告，「享受這作為逃離資本主義的喘息之機」。
試玩地址：slowroads。io
參考資料：
https：//anslo。medium。com/slow-roads-tl-dr-a664ac6bce40
https：//twitter。com/anslogen
https：//arstechnica。com/gaming/2022/10/slow-roads-offers-a-chill-endless-driving-experience-in-your-browser/
https：//twitter。com/anslogen/status/1583850492463296517
☞☞