快捷導(dǎo)航

Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼

更新時(shí)間：2022年04月18日 16:26:45 作者：程序員江同學(xué)

Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋，本文就詳細(xì)的介紹一下Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價(jià)值，感興趣的可以了解一下

前言

幾年前，Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋：如果你在未聯(lián)網(wǎng)的情況下訪問(wèn)網(wǎng)頁(yè)，會(huì)看到 “Unable to connect to the Internet” 或 “No internet” 的提示，旁邊是一只像素恐龍。

許多人可能覺(jué)得這只恐龍只是一個(gè)可愛(ài)的小圖標(biāo)，在斷網(wǎng)的時(shí)候陪伴用戶。但是后來(lái)有人按下空格鍵，小恐龍開(kāi)始奔跑！

這只可愛(ài)的小恐龍是設(shè)計(jì)師 Sebastien Gabriel 的作品。他在一次訪談中說(shuō)，他覺(jué)得沒(méi)有 wifi 的年代就像是史前時(shí)代，很多人都已經(jīng)忘記那個(gè)只能在公司、學(xué)校或者網(wǎng)吧才能上網(wǎng)的年代，所以他就以史前時(shí)代的代表——恐龍，作為斷網(wǎng)的圖標(biāo)。

本文的主要內(nèi)容就是如何使用Vue實(shí)現(xiàn)這個(gè)小彩蛋游戲，感興趣的同學(xué)可以直接看下效果：游戲地址

復(fù)刻畫(huà)面

我們首先把這個(gè)小游戲的樣式擺出來(lái)，可以看出，主要包括下面幾種元素

恐龍
路面
云彩
障礙物
積分

主要就是這些內(nèi)容，我們通過(guò)css將其放在合適的位置即可

動(dòng)畫(huà)效果

路面動(dòng)畫(huà)

在初步將小游戲的畫(huà)面復(fù)刻了之后，我們需要把畫(huà)面動(dòng)起來(lái)，可以看出，其實(shí)在游戲過(guò)程中，小恐龍水平方向是不動(dòng)的，只是路面一直在平移，看起來(lái)小恐龍?jiān)谝苿?dòng)了，因此我們需要給路面添加動(dòng)畫(huà)效果

  get roadStyle() {
    return { transform: `translateX(${this.roadTranslate}px)` };
  }

  startGamerInterval() {
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      if (this.gameStatus === GameStatus.RUNNING) {
        this.updateGameStatus();
      }
    }, 100);
  }

  updateGameStatus() {
    if (this.roadTranslate <= -600) {
      this.roadTranslate = 0;
    }
    this.roadTranslate -= GameConfig.ROAD_VELOCITY;
    //...
  }

可以看出，主要是通過(guò)setInterval啟動(dòng)一個(gè)定時(shí)任務(wù)，然后在其中修改roadTranslate即可

障礙物動(dòng)畫(huà)

障硬物同樣會(huì)隨著路面一起做水平移動(dòng)，這部分跟路面的動(dòng)畫(huà)部分基本一樣，不同的部分在于，障礙物可能有1棵樹(shù)或者多棵樹(shù)，這其實(shí)是通過(guò)雪碧圖和background-position實(shí)現(xiàn)的，通過(guò)雪碧圖可以有效的減少我們的切圖數(shù)量

  updateGameStatus() {
    this.treeItems.forEach((item) => {
      if (item.treeTranslateX < 0) {
        const isBigTree = GetRandomNum(0, 100) % 2 ? true : false;
        const itemWidth = isBigTree ? 25 : 17;
        const itemHeight = isBigTree ? 50 : 35;
        const itemCount = GetRandomNum(1, 3);
        const offsetPosition = GetRandomNum(0, 2);
        item.treeTranslateX = GetRandomNum(600, 1200);
        item.isBigTree = isBigTree;
        item.width = itemWidth * itemCount;
        item.height = itemHeight;
        item.backgroundPosition = -itemWidth * offsetPosition;
      } else {
        item.treeTranslateX -= GameConfig.TREE_VELOCITY;
      }
    });
  }

同樣是定時(shí)在updateGameStatus中修改障礙物的treeTranslateX，不同之處在于障礙物還需要通過(guò)隨機(jī)樹(shù)設(shè)置寬度與backgroundPosition。
同時(shí)當(dāng)treeTranslateX < 0時(shí)，說(shuō)明障礙物已經(jīng)運(yùn)行過(guò)去了，這時(shí)還需要重置狀態(tài)

恐龍動(dòng)畫(huà)

除了路面背景在移動(dòng)之外，為了讓恐龍看起來(lái)在移動(dòng)，我們還需要給恐龍?zhí)砑觿?dòng)畫(huà)效果，其實(shí)就是通過(guò)切換圖片，讓恐龍看起來(lái)在跑步，這也是通過(guò)雪碧圖實(shí)現(xiàn)的。
除此之外，還有就是當(dāng)我們按下空格鍵時(shí)，恐龍需要做一個(gè)跳躍動(dòng)畫(huà)

  updateGameStatus() {
    if (this.rexItem.isInJump) {
      //跳躍動(dòng)畫(huà)	
      this.rexItem.rexTranslateY -= this.rexItem.rexVelocity;

      if (this.rexItem.rexTranslateY <= -GameConfig.REX_MAX_JUMP) {
        this.rexItem.rexVelocity = -GameConfig.REX_VELOCITY;
      } else if (this.rexItem.rexTranslateY >= 0) {
        this.rexItem.isInJump = false;
        this.rexItem.rexTranslateY = 0;
        this.rexItem.rexVelocity = 0;
      }
    } else {
      //跳步動(dòng)畫(huà)	
      if (this.rexItem.rexBackgroundPostion <= -220) {
        this.rexItem.rexBackgroundPostion = 0;
      } else {
        this.rexItem.rexBackgroundPostion -= 44;
      }
    }

  }

如上，主要就是跑步與跳躍動(dòng)畫(huà)，其中跳躍動(dòng)畫(huà)在達(dá)到最大高度后，需要修改速度的方向

響應(yīng)事件

在這個(gè)小游戲中，我們還需要響應(yīng)鍵盤事件

游戲未開(kāi)始時(shí)，按空格鍵開(kāi)始
游戲中，按空格鍵跳躍
游戲結(jié)束后，按空格鍵重新開(kāi)始

  created() {
    window.addEventListener("keyup", this.submit);
  }

  submit(event: KeyboardEvent) {
    if (event.code === "Space") {
      if (
        this.gameStatus === GameStatus.WAIT ||
        this.gameStatus === GameStatus.END
      ) {
        this.gameStatus = GameStatus.RUNNING;
        this.initGame();
        this.startGame();
      } else if (this.gameStatus === GameStatus.RUNNING) {
        if (this.rexItem.rexTranslateY === 0) {
          if (this.rexItem.isInJump === false) {
            this.rexItem.isInJump = true;
            this.rexItem.rexVelocity = GameConfig.REX_VELOCITY;
          }
        }
      }
    }
  }

碰撞檢測(cè)

在完成畫(huà)面復(fù)刻與讓畫(huà)面動(dòng)起來(lái)之后，接下來(lái)要做的就是恐龍與障礙物的碰撞檢測(cè)了，這其實(shí)就是判斷兩個(gè)矩形有沒(méi)有相交。我們可以通過(guò)判斷不重疊的情況，然后取反就可以

  isOverlap(rect1: Rect, rect2: Rect) {
    const startX1 = rect1.x;
    const startY1 = rect1.y;
    const endX1 = startX1 + rect1.width;
    const endY1 = startY1 + rect1.height;

    const startX2 = rect2.x;
    const startY2 = rect2.y;
    const endX2 = startX2 + rect2.width;
    const endY2 = startY2 + rect2.height;

    return !(
      endY2 < startY1 ||
      endY1 < startY2 ||
      startX1 > endX2 ||
      startX2 > endX1
    );
  }

部署

通過(guò)以上步驟，我們的小游戲就基本開(kāi)發(fā)完成了，接下來(lái)就是部署了，在沒(méi)有自己的服務(wù)器的情況下，我們可以利用GitHub Pages來(lái)部署我們的項(xiàng)目
我們將打包出來(lái)的dist目錄作為Github Pages的根目錄，從而實(shí)現(xiàn)發(fā)布與部署。關(guān)于Vue項(xiàng)目打包部署到GitHub Pages的具體步驟，可以參考：Vue項(xiàng)目打包部署到GitHub Pages