Vue怎么實現Chrome小恐龍游戲

本篇內容主要講解“Vue怎么實現Chrome小恐龍游戲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue怎么實現Chrome小恐龍游戲”吧!

前言

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

許多人可能覺得這只恐龍只是一個可愛的小圖標，在斷網的時候陪伴用戶。但是后來有人按下空格鍵，小恐龍開始奔跑！

這只可愛的小恐龍是設計師 Sebastien Gabriel 的作品。他在一次訪談中說，他覺得沒有 wifi 的年代就像是史前時代，很多人都已經忘記那個只能在公司、學校或者網吧才能上網的年代，所以他就以史前時代的代表——恐龍，作為斷網的圖標。

本文的主要內容就是如何使用Vue實現這個小彩蛋游戲，感興趣的同學可以直接看下效果：游戲地址

復刻畫面

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

• 恐龍

• 路面

• 云彩

• 障礙物

• 積分

主要就是這些內容，我們通過css將其放在合適的位置即可

動畫效果

路面動畫

在初步將小游戲的畫面復刻了之后，我們需要把畫面動起來，可以看出，其實在游戲過程中，小恐龍水平方向是不動的，只是路面一直在平移，看起來小恐龍在移動了，因此我們需要給路面添加動畫效果

  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;
    //...
  }

可以看出，主要是通過setInterval啟動一個定時任務，然后在其中修改roadTranslate即可

障礙物動畫

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

  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;
      }
    });
  }

同樣是定時在updateGameStatus中修改障礙物的treeTranslateX，不同之處在于障礙物還需要通過隨機樹設置寬度與backgroundPosition。
同時當treeTranslateX < 0時，說明障礙物已經運行過去了，這時還需要重置狀態

恐龍動畫

除了路面背景在移動之外，為了讓恐龍看起來在移動，我們還需要給恐龍添加動畫效果，其實就是通過切換圖片，讓恐龍看起來在跑步，這也是通過雪碧圖實現的。
除此之外，還有就是當我們按下空格鍵時，恐龍需要做一個跳躍動畫

  updateGameStatus() {
    if (this.rexItem.isInJump) {
      //跳躍動畫	
      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 {
      //跳步動畫	
      if (this.rexItem.rexBackgroundPostion <= -220) {
        this.rexItem.rexBackgroundPostion = 0;
      } else {
        this.rexItem.rexBackgroundPostion -= 44;
      }
    }

  }

如上，主要就是跑步與跳躍動畫，其中跳躍動畫在達到最大高度后，需要修改速度的方向

響應事件

在這個小游戲中，我們還需要響應鍵盤事件

• 游戲未開始時，按空格鍵開始

• 游戲中，按空格鍵跳躍

• 游戲結束后，按空格鍵重新開始

  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;
          }
        }
      }
    }
  }

碰撞檢測

在完成畫面復刻與讓畫面動起來之后，接下來要做的就是恐龍與障礙物的碰撞檢測了，這其實就是判斷兩個矩形有沒有相交。我們可以通過判斷不重疊的情況，然后取反就可以

  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
    );
  }

部署

通過以上步驟，我們的小游戲就基本開發完成了，接下來就是部署了，在沒有自己的服務器的情況下，我們可以利用GitHub Pages來部署我們的項目
我們將打包出來的dist目錄作為Github Pages的根目錄，從而實現發布與部署。

到此，相信大家對“Vue怎么實現Chrome小恐龍游戲”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！