【前端】使用html+css+js實(shí)現(xiàn)的乞丐版跳一跳

• 前言
• 設(shè)計(jì)
• 一些比較有趣的小細(xì)節(jié)
• 總結(jié)

前言

有一年夏天在家無(wú)所事事，就在w3school上自學(xué)了前端的一些基本內(nèi)容。那段時(shí)間微信跳一跳很火，師兄說(shuō)我可以試試在網(wǎng)頁(yè)上寫(xiě)一個(gè)跳一跳。說(shuō)干就干。對(duì)于這種小游戲，比較好的設(shè)計(jì)思路是：前臺(tái)動(dòng)畫(huà)與后臺(tái)邏輯分離以及面向?qū)ο蟮脑O(shè)計(jì)。這對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)還是比較抽象的，好在編寫(xiě)這么一個(gè)小程序的過(guò)程中稍微理解了其中的含義。整個(gè)游戲相比微信跳一跳有以下不同：

• 由于并沒(méi)有接觸過(guò)webgl，以我的水平無(wú)法做出和微信跳一跳一樣的炫酷3D效果，所以就只能用2D的方法做一個(gè)乞丐版的跳一跳了；
• 由于不是觸摸屏，所以用按壓空格鍵代替長(zhǎng)按屏幕實(shí)現(xiàn)蓄力；
• 有一些細(xì)節(jié)上的效果比較不太好實(shí)現(xiàn)，例如：小人沒(méi)有跳到方塊上的跌倒動(dòng)畫(huà)；
• 沒(méi)有任何音頻效果；

效果圖，gif比較粗糙，實(shí)際的動(dòng)畫(huà)效果會(huì)更加流暢：

設(shè)計(jì)

仔細(xì)分析一下跳一跳的游戲，其實(shí)可以將游戲拆分成，可變化顏色的背景、有兩個(gè)方向隨機(jī)掉落的方塊、以及一個(gè)基本上大部分時(shí)間都呆在視角中心點(diǎn)的小人。因此面向?qū)ο笙鄬?duì)比較好理解，可以拆分成如下的幾個(gè)對(duì)象：
1.小人一定是一個(gè)獨(dú)立的個(gè)體，它有很多只屬于自己的屬性，例如當(dāng)前自己的坐標(biāo)，當(dāng)前自己所處的狀態(tài)（跳躍中，落在方塊上等）
2.每一個(gè)方塊也是如此
3.游戲中一個(gè)非常重要的對(duì)象就是camera對(duì)象。在這個(gè)游戲中，視角的移動(dòng)是很重要的。
4.得分管理

動(dòng)畫(huà)與后臺(tái)邏輯分離，現(xiàn)在在我看來(lái)是，游戲一旦開(kāi)始運(yùn)行就應(yīng)當(dāng)進(jìn)入一個(gè)循環(huán)，以一個(gè)確定的周期去更新整個(gè)游戲，例如上面提到的所有的狀態(tài)參數(shù)，而前臺(tái)玩家看到的畫(huà)面僅僅是在每一次刷新時(shí)提取后臺(tái)邏輯提供的參數(shù)更新自身而已。

曾經(jīng)看到過(guò)一本講如何用HTML5制作一個(gè)游戲的書(shū)，其中講到的一個(gè)機(jī)制比較類(lèi)似于C#中的composite_targetrendering事件，將屏幕刷新事件作為整個(gè)系統(tǒng)的時(shí)基，又有點(diǎn)像使用ucos時(shí)的滴答定時(shí)器事件。可惜后來(lái)沒(méi)試成功，所以就直接使用一個(gè)定時(shí)器來(lái)驅(qū)動(dòng)整個(gè)游戲的刷新了。

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

后臺(tái)邏輯

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

前臺(tái)界面

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

其實(shí)有了上述基本框架整個(gè)游戲的編寫(xiě)就已經(jīng)成功了一半了，后面主要是關(guān)于以下幾個(gè)要點(diǎn)的考慮：
1.坐標(biāo)系的確定，這個(gè)確定了才可以去確定小人、方塊、camera的坐標(biāo)；
2.小人跳躍后的坐標(biāo)計(jì)算問(wèn)題；
3.完成一次彈跳從開(kāi)始前到結(jié)束后的整體邏輯流程；

一些比較有趣的小細(xì)節(jié)

1.小人落在方塊上時(shí)會(huì)需要判斷距離方塊中心的距離，以此來(lái)計(jì)算獎(jiǎng)勵(lì)加成；
2.方塊初次出現(xiàn)的時(shí)候是一個(gè)掉落的過(guò)程，并且落地時(shí)會(huì)有一個(gè)Q彈的效果，此外在小人蓄力的時(shí)候，可以很明顯的看到方塊也有一個(gè)壓縮的過(guò)程并且在小人離開(kāi)的時(shí)候也會(huì)有一個(gè)Q彈的效果；
3.小人最開(kāi)始落在方塊上時(shí)同樣有一個(gè)Q彈的效果；
這種落地的Q彈效果我使用如下的一個(gè)函數(shù)：

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.在圖片上作弊，盡可能實(shí)現(xiàn)3D效果，小人增加了一些陰影效果，方塊則是為了實(shí)現(xiàn)壓縮而在蓄力的時(shí)候偷換成如下的組成：

總結(jié)

其實(shí)最后整個(gè)程序?qū)懴聛?lái)也沒(méi)有很多內(nèi)容，只要一個(gè).htm文件加一堆圖片素材，還有就是一個(gè)chrome就可以運(yùn)行了。

總的來(lái)說(shuō)算是我第一次嘗試做一個(gè)小項(xiàng)目，的確最開(kāi)始的機(jī)制設(shè)計(jì)是最耗時(shí)間的，機(jī)制和架構(gòu)設(shè)計(jì)好后接下來(lái)就是細(xì)節(jié)的完善和補(bǔ)充。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。