?? 前言

龍年到來(lái)，祥瑞滿天。愿您如龍般矯健，事業(yè)騰飛；如龍鱗閃耀，生活美滿。祝您龍年大吉，萬(wàn)事如意！

龍年伊始，我給各位設(shè)計(jì)了一款原創(chuàng)的小游戲，話不多說(shuō)，直接進(jìn)入正題，只求各位一個(gè)小贊??

?? 游戲體驗(yàn)

游戲靈感

靈感來(lái)源于一個(gè)成語(yǔ)“望子成龍”，我把它具象化，把成語(yǔ)的意思字面化。即看到孩子變成龍，從而我聯(lián)想到如果看到孩子變成龍，即闖關(guān)成功，如果看到孩子變成了其他動(dòng)物，則闖關(guān)失敗。

順藤摸瓜，據(jù)此思路我想到了1，2，3木頭人這款游戲，類似的規(guī)則進(jìn)行二創(chuàng)，最終想到了我這款小游戲。

具體游戲介紹可以看游戲首頁(yè)簡(jiǎn)介。

游戲背景

背景故事：有一天你被一條惡龍捉回了老巢，你發(fā)現(xiàn)它守著幾顆蛋，盼望著它的孩子出生。你可憐巴巴的乞求惡龍放了你，惡龍說(shuō)：“如果一會(huì)兒我的孩子出生成為猛龍，我一開心或許會(huì)放了你”。你聽到這，暗暗想辦法如何能找到真正的龍蛋孵化成龍，于是，一場(chǎng)集眼力、反應(yīng)、手速的較量開始了。。。

游戲規(guī)則

1. 找到真正的龍蛋（考驗(yàn)眼力和專注力）

頁(yè)面中有n顆蛋，在開始游戲時(shí)，會(huì)有n個(gè)光點(diǎn)隨機(jī)進(jìn)入這幾個(gè)蛋。其中開始閃爍藍(lán)光的光點(diǎn)即“龍魂”，“龍魂”進(jìn)入的蛋即可孵化成龍。你需要盯緊藍(lán)色光點(diǎn)的運(yùn)動(dòng)軌跡，不要“跟丟了”，找到真正的龍蛋！

龍魂通過(guò)旋轉(zhuǎn)隨機(jī)打亂：

2. 快速點(diǎn)擊蛋幫其破殼（考驗(yàn)手速）

在光點(diǎn)進(jìn)入蛋之后，即游戲正式開始，進(jìn)入倒計(jì)時(shí)階段。你需要快速點(diǎn)擊“龍蛋”幫助其孵化。每顆蛋上都寫了距離破殼剩余的點(diǎn)擊次數(shù)。你需要在倒計(jì)時(shí)結(jié)束前敲碎“龍蛋”，孵化成龍。

成功孵化龍蛋即挑戰(zhàn)成功：

孵化出了其他動(dòng)物即挑戰(zhàn)失敗：

3. 惡龍睜眼時(shí)不能敲擊龍蛋（考驗(yàn)反應(yīng)力）

在倒計(jì)時(shí)階段，惡龍會(huì)隨機(jī)睜眼，在惡龍睜眼時(shí)，千萬(wàn)不能點(diǎn)集蛋，否則直接挑戰(zhàn)失?。?/p>

4. 游戲共5關(guān)，越來(lái)越難（挑戰(zhàn)極限）

每過(guò)一關(guān)，會(huì)增加蛋的數(shù)量或者提高蛋破殼需要點(diǎn)擊的次數(shù)，過(guò)五關(guān)即可挑戰(zhàn)成功。

在線地址

體驗(yàn)地址：https://code.juejin.cn/pen/7326221741822246927

?? 開發(fā)流程

這款游戲我是用原生js進(jìn)行開發(fā)的，開發(fā)思路如下：
分析游戲場(chǎng)景，需要設(shè)計(jì)三個(gè)class類：游戲管理器、眼睛、蛋。
眼睛和蛋的類負(fù)責(zé)封裝其對(duì)應(yīng)擁有的屬性和方法。具體控制游戲進(jìn)度由游戲管理器類控制。

文章中不對(duì)代碼做過(guò)多闡述，碼上掘金里有全部代碼。

眼睛類

眼睛主要控制展示游戲結(jié)果，所以要具備更新眼鏡狀態(tài)的方法，在驗(yàn)證結(jié)果、闖關(guān)成功、闖關(guān)失敗時(shí)都需要修改眼睛的狀態(tài)，以更新頁(yè)面動(dòng)效的展示。另外還需要有一個(gè)眨眼的方法。

其他參數(shù)是用來(lái)控制眼睛動(dòng)效時(shí)長(zhǎng)的，將動(dòng)畫的animation-duration抽離出來(lái)以方便更好的控制動(dòng)畫銜接，其實(shí)也可以用js監(jiān)聽動(dòng)畫進(jìn)度，但是很多地方就得綁定好多事件，所以我決定還是用變量控制。

 class eye {
      constructor() {
        this.delayOpen = 0.5 // 延遲修改狀態(tài)為open的時(shí)間，眨眼時(shí)讓玩家有反應(yīng)時(shí)間
        this.openTime = 1.2; // 睜眼睛的動(dòng)畫時(shí)長(zhǎng)
        this.changeTime = 0.3 // 眼神變化的動(dòng)畫時(shí)長(zhǎng)
        this.status = '' // 眼睛狀態(tài) 默認(rèn)閉眼  open睜眼  smile笑  angry生氣
      }
      // 更新眼的狀態(tài)
      updateEyeStatus(status) {
         ... 控制眼睛狀態(tài)
      }
      // 眨眼
      wink() {
         ... 眼睛狀態(tài)由閉眼-> 睜眼 -> 閉眼
      }
    }

蛋類

蛋類需要具備的主要屬性有：血量（即需要點(diǎn)擊幾次才能破殼）、名稱、孵化狀態(tài)

方法：敲擊蛋、孵化

class egg {
      constructor(name, health) {
        this.name = name;
        this.allHealth = health //總血量
        this.health = health; //實(shí)時(shí)血量
        this.isBorn = false; //是否出生
      }
      // 敲擊蛋破裂次數(shù)減1
      knock() {
         ... 當(dāng)血量變成0時(shí)孵化該蛋
      }
      // 孵化
      incubate() {
        
      }
    }

游戲管理器

游戲管理器是最關(guān)鍵的部分，它負(fù)責(zé)初始化游戲場(chǎng)景、控制游戲進(jìn)度、控制關(guān)卡、實(shí)例化眼睛和蛋并更新他們的狀態(tài)、隨機(jī)打亂蛋的順序、判斷是否闖關(guān)成功、展示結(jié)果。

其中最麻煩的就是如何隨機(jī)打亂蛋的順序，想了很久，最后用了以下辦法：

n個(gè)光點(diǎn)隨機(jī)旋轉(zhuǎn)，每個(gè)光點(diǎn)對(duì)應(yīng)一個(gè)蛋，在旋轉(zhuǎn)結(jié)束后，根據(jù)他們?cè)谄聊恢械淖鴺?biāo)，x坐標(biāo)從小到大排列，即可做到隨機(jī)將蛋排序?？傊@里很麻煩，但是暫時(shí)沒(méi)想到其他更好的打亂方法。感興趣的可以看碼上掘金的代碼，歡迎給予建議或意見。

另外，判斷游戲輸贏的方式是：如果倒計(jì)時(shí)結(jié)束，所有蛋的實(shí)例中沒(méi)有孵化的，或者孵化的蛋名稱不是“龍”即挑戰(zhàn)失敗。

 class gamer {
      constructor() {
      }
      // 打亂蛋的順序
      async disruptionEggs() {
      }
      // 更新蛋的順序
      updateEggsPosition(nameArr, positions, resolve) {
      }
      // 開始倒計(jì)時(shí)控制游戲進(jìn)度
      countdown() {
      }
      // 判斷是否看到了龍
      judgeSee(eggs) {
      }
      // 展示闖關(guān)結(jié)果
      showResult() {
      }
      // 失敗暫停游戲
      paused() {
      }
      // 開始游戲
      async start() {
      }
      // 再試一次
      async retry() {
      }
      // 下一關(guān)
      async next() {
    }

?? 最后

我是喜歡歸納總結(jié)前端相關(guān)知識(shí)的前端阿彬，盡力持續(xù)輸出原創(chuàng)優(yōu)質(zhì)文章，歡迎點(diǎn)贊關(guān)注??

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836131.html

到了這里，關(guān)于js諧音梗創(chuàng)意小游戲《望子成龍》的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！