【前端】使用html+css+js實現的乞丐版跳一跳

• 前言
• 設計
• 一些比較有趣的小細節
• 總結

前言

有一年夏天在家無所事事，就在w3school上自學了前端的一些基本內容。那段時間微信跳一跳很火，師兄說我可以試試在網頁上寫一個跳一跳。說干就干。對于這種小游戲，比較好的設計思路是：前臺動畫與后臺邏輯分離以及面向對象的設計。這對于當時的我來說還是比較抽象的，好在編寫這么一個小程序的過程中稍微理解了其中的含義。整個游戲相比微信跳一跳有以下不同：

• 由于并沒有接觸過webgl，以我的水平無法做出和微信跳一跳一樣的炫酷3D效果，所以就只能用2D的方法做一個乞丐版的跳一跳了；
• 由于不是觸摸屏，所以用按壓空格鍵代替長按屏幕實現蓄力；
• 有一些細節上的效果比較不太好實現，例如：小人沒有跳到方塊上的跌倒動畫；
• 沒有任何音頻效果；

效果圖，gif比較粗糙，實際的動畫效果會更加流暢：

設計

仔細分析一下跳一跳的游戲，其實可以將游戲拆分成，可變化顏色的背景、有兩個方向隨機掉落的方塊、以及一個基本上大部分時間都呆在視角中心點的小人。因此面向對象相對比較好理解，可以拆分成如下的幾個對象：
1.小人一定是一個獨立的個體，它有很多只屬于自己的屬性，例如當前自己的坐標，當前自己所處的狀態（跳躍中，落在方塊上等）
2.每一個方塊也是如此
3.游戲中一個非常重要的對象就是camera對象。在這個游戲中，視角的移動是很重要的。
4.得分管理

動畫與后臺邏輯分離，現在在我看來是，游戲一旦開始運行就應當進入一個循環，以一個確定的周期去更新整個游戲，例如上面提到的所有的狀態參數，而前臺玩家看到的畫面僅僅是在每一次刷新時提取后臺邏輯提供的參數更新自身而已。

曾經看到過一本講如何用HTML5制作一個游戲的書，其中講到的一個機制比較類似于C#中的composite_targetrendering事件，將屏幕刷新事件作為整個系統的時基，又有點像使用ucos時的滴答定時器事件。可惜后來沒試成功，所以就直接使用一個定時器來驅動整個游戲的刷新了。

function start() {if(isOver){isOver=false;game=setInterval(Jump,roundTime); //設置周期執行Jump函數 } } function Jump() { gameLoop(); //邏輯surfaceLoop(); //可視化 }

后臺邏輯

function gameLoop() //邏輯循環 {Init();switch(state){ case 0: getNewCube();break;case 1: player1.accumulation(currIndex);break;case 2: //恢復方塊緩動后的參數player1.isAccumulated=false;cubes[currIndex].coordinateY=cubes[currIndex].restorecoordinateY; //恢復currIndex方塊的縱坐標cubes[currIndex].cubeBoardHeight=40; //恢復currIndex方塊的側板高度cubes[currIndex].QT=0.2; //恢復currIndex方塊的Q彈系數player1.judge( );break;case 3: gameOver();break; case 4://跳躍動畫——完成后再進入2判斷player1.parabola();player1.bright(currIndex);break; } }

前臺界面

function surfaceLoop() {drawBackground();fraction1.drawScore();switch(state){case 0: //空閑camera1.cameraAdjusting(); //空閑狀態時的視點平移drawCube();player1.drawPlayer(player1.coordinateX,player1.coordinateY);break;case 1://蓄力camera1.cameraAdjusting(); //確保在蓄力時仍能夠正常視點平移player1.drawPlayer(player1.coordinateX,player1.coordinateY);drawCube(); //蓄力時偷換所有方塊//document.getElementById("des").innerHTML="蓄力中……";break;case 2://判斷canvasClear("boardLayer"); //落地后清除“臟塊”drawCube(); //繪制新狀態下的方塊break;case 3://失敗break; case 4://跳躍 camera1.cameraAdjusting(); //確保在視點調節時，若發生由按鍵松開導致進入跳躍環節的情況仍能繼續調節視點drawCube(); //繪制方塊Q彈效果player1.drawPlayer(player1.preCoordinateX,player1.preCoordinateY);break; } }

其實有了上述基本框架整個游戲的編寫就已經成功了一半了，后面主要是關于以下幾個要點的考慮：
1.坐標系的確定，這個確定了才可以去確定小人、方塊、camera的坐標；
2.小人跳躍后的坐標計算問題；
3.完成一次彈跳從開始前到結束后的整體邏輯流程；

一些比較有趣的小細節

1.小人落在方塊上時會需要判斷距離方塊中心的距離，以此來計算獎勵加成；
2.方塊初次出現的時候是一個掉落的過程，并且落地時會有一個Q彈的效果，此外在小人蓄力的時候，可以很明顯的看到方塊也有一個壓縮的過程并且在小人離開的時候也會有一個Q彈的效果；
3.小人最開始落在方塊上時同樣有一個Q彈的效果；
這種落地的Q彈效果我使用如下的一個函數：

function falling() {this.factor=1-(-1)/2*Math.pow(Math.E,((-1)*6*this.fallingT))*((-1)*2*Math.pow(Math.E,6*this.fallingT)+Math.sin(12*this.fallingT)+2*Math.cos(12*this.fallingT));if(this.factor<=0){this.factor*=(-1);}this.altitude=200*this.factor;this.fallingT+=0.05;}

4.在圖片上作弊，盡可能實現3D效果，小人增加了一些陰影效果，方塊則是為了實現壓縮而在蓄力的時候偷換成如下的組成：

總結

其實最后整個程序寫下來也沒有很多內容，只要一個.htm文件加一堆圖片素材，還有就是一個chrome就可以運行了。

總的來說算是我第一次嘗試做一個小項目，的確最開始的機制設計是最耗時間的，機制和架構設計好后接下來就是細節的完善和補充。

總結

以上是生活随笔為你收集整理的【前端】使用html+css+js实现的乞丐版跳一跳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。