用Html做一個(gè)“快樂鳥”小游戲

時(shí)間：2023-07-25 03:36:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-25 03:36:02 來源：網(wǎng)站運(yùn)營

用Html做一個(gè)“快樂鳥”小游戲：本文同步發(fā)表在我的個(gè)人博客中：

---

這個(gè)小玩意最近學(xué)習(xí)cocos creator于是又重構(gòu)了一下，體驗(yàn)請(qǐng)戳：

之前的HTML版鏈接：

入門學(xué)習(xí)前端的時(shí)候做了這么一個(gè)簡單的小游戲，為了將自己所學(xué)到的知識(shí)運(yùn)用起來。

做這個(gè)小游戲用到了：

• html
• css
• jQuery

然后這個(gè)小游戲的圖片素材用到了：

其實(shí)用原生的js也是可以完成的，但是為什么要用jQuery？因?yàn)槲抑苯犹^了原生JS的學(xué)習(xí)...只有等空余的時(shí)候，好好的找本書研究一下原生的js。

下面是這個(gè)小游戲的大致流程：

其中鳥和管道應(yīng)該用面向?qū)ο髞碜?，但是我原生JS只學(xué)習(xí)了最基礎(chǔ)的部分，而且JS在ES5的時(shí)候還沒有類的概念，只能使用構(gòu)造函數(shù)來模擬一個(gè)類，在ES6的時(shí)候才加入了class這個(gè)關(guān)鍵字，但是我知道ES6的時(shí)候，已經(jīng)是在完成這個(gè)小游戲之后了。

從上面的素材圖片只有4張可以看得出來，html和CSS的搭建是沒有太大難度的。所以本文著重講解JS的部分。

這里值得一說的是，我CSS上面是用的子絕父相的定律，來擺放鳥和管道，其中管道的代碼如下所示：

/* 上邊的管道 */.tubeTop { width: 90px; height: 420px; background: url(../image/bird/ColumnSprite.png) no-repeat 0 0; background-size: cover; transform: rotate(180deg);}/* 下邊的管道 */.tubebotton { width: 90px; height: 420px; background: url(../image/bird/ColumnSprite.png) no-repeat 0 0; background-size: cover; margin-top: 100px;}.tube { position: absolute; top: 0;}可以看得出來，其實(shí)上下管道用的是一張圖片，只是將它旋轉(zhuǎn)了180度，然后包含在一個(gè)div中，這樣只要設(shè)置父盒子的位置，上下的兩根管道的位置就不需要再去設(shè)置。

模型控制：

其實(shí)整個(gè)游戲，鳥是沒有動(dòng)的，我是讓背景向前移動(dòng)，這里有一點(diǎn)需要注意背景我并不是拼接了很多張圖，而是僅僅用了兩張圖，一張?jiān)诳梢暦秶鷥?nèi)，一張?jiān)诳梢暦秶?，?dāng)前面的那張移出可視范圍的時(shí)候，再用JS將它放置到后面那張背景的后面，這樣反復(fù)，就可以變成一個(gè)無限背景。

當(dāng)管道移除可視范圍外的時(shí)候，我并沒有將它進(jìn)行銷毀，而是用JS重新設(shè)置它的位置，因?yàn)楫a(chǎn)生和銷毀一個(gè)物體的時(shí)候，是非常的耗費(fèi)性能的，如果一個(gè)物件能夠復(fù)用，就需要想辦法進(jìn)行復(fù)用。

控制管道和背景的代碼，管道的位置控制都是通過css設(shè)置它們position：

當(dāng)管道已經(jīng)移出可視范圍的時(shí)候，給它一個(gè)隨機(jī)數(shù)重新設(shè)置它的位置：

控制鳥的方式我是一直讓它向下走：

然后鳥的動(dòng)畫部分就是讓圖片來回切換就可以達(dá)到動(dòng)起來的效果，但是開篇的BUG也是在這里產(chǎn)生的，因?yàn)檫@個(gè)切換圖片設(shè)置了延遲，所以在鳥死亡的時(shí)候，可能這個(gè)圖片還沒有進(jìn)行切換：

我在怎么判斷鳥是否撞到管道然后觸發(fā)死亡狀態(tài)的地方卡了一會(huì)，最后我是通過鳥的盒子的上下左右的坐標(biāo)因?yàn)樗麄兌际墙^對(duì)定位，而我給了整個(gè)可視窗口相對(duì)定位，所以當(dāng)它們的坐標(biāo)相同時(shí)，它們之間就會(huì)重疊，然后和管道的坐標(biāo)進(jìn)行一個(gè)判斷：

為了保證分?jǐn)?shù)和死亡只有一個(gè)，所以我將他們?cè)O(shè)置為全局變量window.die和window.playScroe，如果撞到地板和管道，就調(diào)用death()函數(shù)，同時(shí)將die設(shè)置為true：

最后是重新開始函數(shù)，將管道背景鳥的位置復(fù)位：

整個(gè)小游戲大致的思路就是這樣了，如果有什么疑問或者有什么錯(cuò)誤的地方歡迎在評(píng)論指出~