VUEはFlappy Birdゲームのサンプルコードを実装します

let rafId = null; // requestAnimationFrame ID
startSpeed ​​= 1とします。
const SPEED = 0.04; // 加速度 const UP = 5.0; // 速度累積の上限 const UP_SUM = 30; // 1回のジャンプの高さ const BIRD_WIDTH = 50; // 鳥の絵の幅 50px
const PIPE_DISTANCE = 350; // パイプ間の水平距離 let id = 0; // パイプの一意の ID。カウントは 0 から始まります...
 
データ（） {
    戻る {
      開始: false、
      クライアント幅: 0,
      クライアントの高さ: 0,
      spaceHeight: [240, 200, 160], // 上部のパイプと下部のパイプの間の距離pipeArr: [], // パイプ配列score: 0, // ScorejumpSum: 0, // 現在のジャンプの相対高さjumpFlag: false, // true-スペースバーを押すと上昇ステージでジャンプします。false-自由落下ステージdropBirdImg: require("@/assets/img/bird/bird0_0.png"),
      flyBirdImg: require("@/assets/img/bird/bird0_2.png"),
      gameOver: false, // ゲームの失敗を示すフラグ。アニメーション フレームを停止するために使用されます};
},

<div class="bird" id="bird" ref="bird"></div>
 
 ＃鳥 {
      高さ: 50px;
      幅: 50px;
      境界線の半径: 50%;
      背景: url("~assets/img/bird/bird0_1.png") 繰り返しなし center/contain;
      // 鳥の初期位置 position: absolute;
      左: 300ピクセル;
      上: 300px;
}

ループ() {
      _this = this とします。
      if (_this.jumpFlag) {
        // 鳥はジャンプします_this.jump();
      }
      top = _this.$refs.bird.offsetTop とします。
      _this.clientHeight がトップ > BIRD_WIDTH の場合、トップ <= 0 になります。
        //境界に達するとゲームが終了します_this.resetGame();
      } それ以外の場合 (!_this.jumpFlag) {
        _this.$refs.bird.style.background = `url('${_this.dropBirdImg}') 繰り返しなし center/contain`;
        _this.$refs.bird.style.top = top + startSpeed ​​* startSpeed ​​+ "px"; // 加速落下をシミュレートする if (startSpeed ​​< UP) {
          開始速度 + = 速度;
        }
      }
      _this.pipesMove(); // パイプラインの移動}

ジャンプ() {
      _this = this とします。
      _this.$refs.bird.style.background = `url('${_this.flyBirdImg}') 繰り返しなしの center/contain`;
      _this.jumpSum > UP_SUMの場合{
        // top_this.jumpFlag に到達すると落下します。false;
        _this.jump合計 = 0;
        開始速度 = 1;
      } それ以外 {
        _this.$refs.bird.style.top = _this.$refs.bird.offsetTop - 8 + "px";
        _this.jump合計+=8;
      }
}

アニメーション: bgMove 8s 線形無限;
      @keyframes bgMove {
        0% {
          背景位置: 805px 0;
        }
        100% {
          背景位置: 0 0;
        }
}

パイプIDを追加します
      obj = {} とします。
      top_num = this.sum(10, 170) とします。
      高さを this.spaceHeight[ とする
        Math.floor(Math.random() * this.spaceHeight.length)
      ]; // ギャップ値をランダムに選択 let bottom_num = height - top_num;
      obj.top = トップ番号;
      obj.id = id;
      obj.right = -(PIPE_DISTANCE / 2);
      obj.bottom = ボトム番号;
      this.pipeArr.push(obj);
},
合計(m,n) {
      // nm 間の乱数 return Math.floor(Math.random() * (m - n) + n);
}

パイプ移動() {
      _this = this とします。
      _this.pipeArr.length === 0 の場合 {
        戻る;
      }
      right0 = _this.pipeArr[0].right;とします。
      右0 > this.clientWidth + 300の場合{
        シフト関数
      }
      right_last = _this.pipeArr[_this.pipeArr.length - 1].right とします。
      （右端 >= PIPE_DISTANCE / 2）の場合{
        id++;
        this.addPipe(id);
      }
      (i = 0 とします; i < _this.pipeArr.length; i++) {
        // 鳥がパイプに触れたかどうかを判定します。鳥は 50*50、左: 300px、パイプの幅は 100px、パイプの進入範囲の右は width-450 から width-300 です。
        もし （
          _this.pipeArr[i].right >= _this.clientWidth - 450 &&
          _this.pipeArr[i].right <= _this.clientWidth - 300
        ）{
          // パイプが鳥の接触範囲に入りました。let bird_top = _this.$refs.bird.offsetTop;
          // 12は、上下に空白がある鳥の画像素材です（
            bird_top <= _this.clientHeight / 2 - _this.pipeArr[i].top - 12 ||
            鳥トップ >=
              _this.clientHeight / 2 + _this.pipeArr[i].bottom - BIRD_WIDTH + 12
          ）{
            // pipe_this.resetGame() を実行します。
            戻る;
          }
        }
        if (_this.pipeArr[i].right === _this.clientWidth - 300 && _this.pipeArr[i].right === _this.clientWidth - 301) { // パイプが鳥のすぐ左側にある場合、鳥はパイプを通過したことがわかります。パイプの ID に基づいて鳥のスコアを計算します _this.score = _this.pipeArr[i].id + 1;
        }
        _this.pipeArr[i].right = _this.pipeArr[i].right + 2; // パイプはフレームごとに2ピクセル移動します
      }
}

<section class="pipes-wrap" ref="パイプ">
          <div
            クラス="パイプアイテム"
            v-for="(item, index) in pipeArr"
            :key="アイテムID"
            :id="'パイプ' + インデックス"
            :style="'right:' + item.right + 'px;'"
          >
            <div
              class="pipe パイプトップ"
              :style="'top:-' + item.top + 'px;'"
            </div>
            <div
              クラス="パイプ パイプ下部"
              :style="'bottom:-' + item.bottom + 'px;'"
            </div>
          </div>
</セクション>
 
.パイプラップ{
        位置: 相対的;
        高さ: 100%;
        オーバーフロー: 非表示;
        .パイプアイテム{
          位置: 絶対;
          高さ: 100%;
          幅: 100ピクセル;
          .パイプ{
            幅: 100%;
            高さ: 50%;
            位置: 相対的;
          }
          .パイプトップ{
            背景: url('"~assets/img/bird/pipe_down.png') 繰り返しなし;
            背景サイズ: 100px;
            背景位置: 下;
          }
          .パイプボトム{
            背景: url('"~assets/img/bird/pipe_up.png') 繰り返しなし;
            背景サイズ: 100px;
            背景の位置: 上;
          }
        }
}