不曉得大家在使用 Chrome 瀏覽器時(shí)，有沒有玩過這么個(gè)恐龍小游戲：

這款 404 小游戲于 2014 年，由谷歌 Chrome UX 團(tuán)隊(duì)開發(fā)。游戲嵌入谷歌瀏覽器后，大獲用戶好評，每月甚至可有 2.7 億游戲次數(shù)。

小恐龍跑酷游戲的畫面簡潔，游戲簡單。玩家只需要操作小恐龍躍過沙漠中隨機(jī)出現(xiàn)的仙人掌即可，而當(dāng)小恐龍失手撞上仙人掌時(shí)，即意味著游戲結(jié)束 GAME OVER。

作為網(wǎng)頁游戲，小恐龍游戲可以在 Lightly 中用 HTML + CSS + JavaScript 實(shí)現(xiàn)。代碼：https://179f55890e-share.lightly.teamcode.com

小恐龍游戲的原理

這款游戲的操作邏輯可能比想象中還要簡單，圖中的小恐龍雖然看著正在跑動(dòng)，但他其實(shí)只是在上下跳躍而已，實(shí)際上移動(dòng)的是帶隨機(jī)仙人掌的畫布，因此操作小恐龍只需上下兩個(gè)按鍵即可。

定位小恐龍與地面

讓小恐龍跑動(dòng)之前，我們需要在游戲畫布中為小恐龍定位，固定小恐龍出現(xiàn)的地方。同時(shí)，我們也需要固定地面的位置，讓程序知道小恐龍究竟要踩在哪塊土地上。

實(shí)現(xiàn)地面移動(dòng)

前面說了，游戲中的小恐龍其實(shí)是在原地跳躍，所以我們只需要通過 update() 函數(shù)將地面無限向左滾動(dòng)即可。

讓小恐龍?zhí)饋?/strong>

setGravityY 會(huì)為小恐龍?jiān)黾又亓?，這里添加的是 5000；如果不設(shè)置 setColliderWorldBounds 的話，小恐龍就會(huì)無視地面，直接掉到畫面外了，誒嘿。


最后增加控制，每當(dāng)我們按下空格鍵時(shí)，小恐龍就會(huì)以每秒 1600 的速度向上，也就是抵消了那一秒中的部分重力，實(shí)現(xiàn)跳躍效果。

最后，自然是再加上億點(diǎn)點(diǎn)細(xì)節(jié)，讓恐龍實(shí)現(xiàn)跑動(dòng)效果，也添加不同種類的仙人掌，讓小恐龍跨越沙漠的過程沒有那么無聊。

查看完整的小恐龍?jiān)创a：https://179f55890e-share.lightly.teamcode.com

標(biāo)簽：