VUE 는 Flappy Bird 게임 의 예제 코드 를 실현 합 니 다.

플 래 피 버드 는 앱 에서 모두 가 해 본 아주 간단 한 작은 게임 이다.간단 한 PC 판 플 래 피 버드 를 VUE 로 구현 해 보 세 요~~~~
이 게임 을 실현 하려 면 먼저 게임 인터페이스 에서 어떤 물건 이 움 직 여야 하 는 지 분석 해 보 세 요.
1.첫째,당연히 위아래 로 움 직 이 는 새 이다.
2.가로로 이동 하 는 배경 그림 으로 작은 새 가 가로로 비행 하 는 것 처럼 보이 게 한다.
3.화면 오른쪽 끝 에서 들 어 오 는 배관.
이렇게 하면 우 리 는 위의 세 가지 내용 을 규칙 에 따라 운동 하 게 한 다음 에 규칙 경계 판단 과 점 수 를 더 하면 완전한 게임 을 얻 을 수 있다.그 러 니까 같이 해결 해.
먼저 상수 와 변 수 를 정의 합 니 다.

let rafId = null; // requestAnimationFrame ID
let startSpeed = 1;
const SPEED = 0.04; //    
const UP = 5.0; //       
const UP_SUM = 30; //         
const BIRD_WIDTH = 50; //      50px
const PIPE_DISTANCE = 350; //          
let id = 0; //     id， 0    
 
...
 
data() {
    return {
      start: false,
      clientWidth: 0,
      clientHeight: 0,
      spaceHeight: [240, 200, 160], //             
      pipeArr: [], //     
      score: 0, //   
      jumpSum: 0, //         
      jumpFlag: false, // true-           ；false-      
      dropBirdImg: require("@/assets/img/bird/bird0_0.png"),
      flyBirdImg: require("@/assets/img/bird/bird0_2.png"),
      gameOver: false, //      flag，       
    };
},

1.위아래 로 움 직 이 는 새
작은 새 와 파이프 의 위 치 를 각각 제어 하기 위해 요소 의 포 지 셔 닝 은 모두 position:absolute 를 사용 합 니 다.
작은 새 자체 가 div+배경 그림 이 고 화면 에 있 는 초기 위 치 를 정의 합 니 다.

<div class="bird" id="bird" ref="bird"></div>
 
 #bird {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      background: url("~assets/img/bird/bird0_1.png") no-repeat center/contain;
      //       
      position: absolute;
      left: 300px;
      top: 300px;
}

그리고 아무것도 조작 하지 않 은 상태 에서 작은 새 는 초기 위치 에서'추락'하기 시작 했다.작은 새 의 추락 은 떨 어 질 수록 빠 른 과정 이다.여기 서 나 는 물리 적 중력 가속도 공식 을 사용 하지 않 고 곡선 가속 과정 을 간단하게 모 의 했다.이것 은 지속 적 인 애니메이션 이기 때문에 이 동작 을 애니메이션 프레임 에 넣 습 니 다.즉,requestAnimationFrame 입 니 다.각 프레임 의 함 수 는 loop()으로 정의 합 니 다.
그래서 loop 함수 에서 offsetTop 과 부모 요소 의 client Height 에 따라 작은 새 가 화면의 상하 경 계 를 건 드 렸 는 지 여 부 를 판단 하면 게임 이 끝 납 니 다.아 닙 니 다.style.top 을 추가 하여 새 를 떨 어 뜨 립 니 다.

loop() {
      let _this = this;
      if (_this.jumpFlag) {
        //     
        _this.jump();
      }
      let top = _this.$refs.bird.offsetTop;
      if (top > _this.clientHeight - BIRD_WIDTH || top <= 0) {
        //     ，    
        _this.resetGame();
      } else if (!_this.jumpFlag) {
        _this.$refs.bird.style.background = `url('${_this.dropBirdImg}') no-repeat center/contain`;
        _this.$refs.bird.style.top = top + startSpeed * startSpeed + "px"; //       
        if (startSpeed < UP) {
          startSpeed += SPEED;
        }
      }
      _this.pipesMove(); //     
}

게임 에서 게이머 들 이 스페이스 바 를 누 르 면 작은 새 는 위로 거 리 를 뛰 어 올 라 this.jumpFlag[true/false]로 이 상 태 를 기록 합 니 다.누 르 면 true 로 설정 하고 loop 함수 에서 작은 새 는 jmp()로 설정 합 니 다.jmp 에서 일정한 거리 가 되면 jmpFlag 은 false 로 설정 하고 작은 새 는 떨 어 지기 시작 합 니 다.
그래서 jmp 함 수 는 쉽게 이 루어 집 니 다.

jump() {
      let _this = this;
      _this.$refs.bird.style.background = `url('${_this.flyBirdImg}') no-repeat center/contain`;
      if (_this.jumpSum > UP_SUM) {
        //       
        _this.jumpFlag = false;
        _this.jumpSum = 0;
        startSpeed = 1;
      } else {
        _this.$refs.bird.style.top = _this.$refs.bird.offsetTop - 8 + "px";
        _this.jumpSum += 8;
      }
}

2.가로 이동 배경 그림
이것 은 비교적 간단 합 니 다.바로 background-position 이 무한 순환 으로 전환 하면 됩 니 다.위 치 는 자신 이 다운로드 한 배경 그림 소재 의 너비 에 따라 결정 합 니 다.

animation: bgMove 8s linear infinite;
      @keyframes bgMove {
        0% {
          background-position: 805px 0;
        }
        100% {
          background-position: 0 0;
        }
}

이 두 단 계 를 통 해 우 리 는 비행 중인 작은 새 를 얻 을 수 있 습 니 다.document.onkeydown 감청 스페이스 바 를 사용 하여 jmpFlag 을 전환 할 수 있 습 니 다.다음 그림:

3.오른쪽 에서 왼쪽으로 이동 하여 파이프 에 들어간다.
파 이 프 는 상하 두 개의 div 로 구성 되 어 있 으 며,각 div 는 서로 다른 top:xx 와 bottom:-yy 를 통 해 중간 에 간격 이 있 습 니 다.
먼저 무 작위 간극 파 이 프 를 만 드 는 함 수 를 실현 합 니 다.파 이 프 는 pipeArr 대상 배열 에 저 장 됩 니 다.

addPipe(id) {
      let obj = {};
      let top_num = this.sum(10, 170);
      let height = this.spaceHeight[
        Math.floor(Math.random() * this.spaceHeight.length)
      ]; //        
      let bottom_num = height - top_num;
      obj.top = top_num;
      obj.id = id;
      obj.right = -(PIPE_DISTANCE / 2);
      obj.bottom = bottom_num;
      this.pipeArr.push(obj);
},
sum(m, n) {
      //   n-m     
      return Math.floor(Math.random() * (m - n) + n);
}

그 다음 에 파 이 프 를 이동 시 켜 야 합 니 다.즉,loop()에서 파이프 이동 함수 pipes Move()입 니 다.전체 함 수 는 다음 과 같 습 니 다.

pipesMove() {
      let _this = this;
      if (_this.pipeArr.length === 0) {
        return;
      }
      let right0 = _this.pipeArr[0].right;
      if (right0 > this.clientWidth + 300) {
        this.pipeArr.shift();
      }
      let right_last = _this.pipeArr[_this.pipeArr.length - 1].right;
      if (right_last >= PIPE_DISTANCE / 2) {
        id++;
        this.addPipe(id);
      }
      for (let i = 0; i < _this.pipeArr.length; i++) {
        //               ，  50*50，left：300px；   100px；      right width-450 width-300
        if (
          _this.pipeArr[i].right >= _this.clientWidth - 450 &&
          _this.pipeArr[i].right <= _this.clientWidth - 300
        ) {
          //             
          let bird_top = _this.$refs.bird.offsetTop;
          // 12              
          if (
            bird_top <= _this.clientHeight / 2 - _this.pipeArr[i].top - 12 ||
            bird_top >=
              _this.clientHeight / 2 + _this.pipeArr[i].bottom - BIRD_WIDTH + 12
          ) {
            //      
            _this.resetGame();
            return;
          }
        }
        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; //       2px
      }
}

여기 서 다섯 가지 일 을 했다.
(1)파이프 가 왼쪽 화면 에서 나 온 후 shift()의 가장 왼쪽 파이프;
(2)가장 오른쪽 파 이 프 는 화면 오른쪽 에서 일정한 거 리 를 두 고 새로운 파 이 프 를 넣는다.
(3)순환 과정 에서 작은 새 가 특정한 파이프 의 범위 에 들 어 갔 는 지 판단 하고 작은 새 top 이 상하 관 로 를 건 드 렸 는 지 판단 하 며 건 드 리 면 진다.
(4)어떤 파이프 가 작은 새 의 왼쪽 에 있 을 때 작은 새 가 성공 적 으로 통과 했다 는 것 을 증명 한다.점수+1;
(5)파이프 마다 2px 픽 셀 을 이동 하고 수 치 는 right 속성 에 기 록 됩 니 다.
DOM 리:style 을 통 해 right 를 설정 하면 파 이 프 를 가로로 이동 시 킬 수 있 습 니 다.

<section class="pipes-wrap" ref="pipes">
          <div
            class="pipe-item"
            v-for="(item, index) in pipeArr"
            :key="item.id"
            :id="'pipe' + index"
            :style="'right:' + item.right + 'px;'"
          >
            <div
              class="pipe pipe-top"
              :style="'top:-' + item.top + 'px;'"
            ></div>
            <div
              class="pipe pipe-bottom"
              :style="'bottom:-' + item.bottom + 'px;'"
            ></div>
          </div>
</section>
 
.pipes-wrap {
        position: relative;
        height: 100%;
        overflow: hidden;
        .pipe-item {
          position: absolute;
          height: 100%;
          width: 100px;
          .pipe {
            width: 100%;
            height: 50%;
            position: relative;
          }
          .pipe-top {
            background: url('"~assets/img/bird/pipe_down.png') no-repeat;
            background-size: 100px;
            background-position: bottom;
          }
          .pipe-bottom {
            background: url('"~assets/img/bird/pipe_up.png') no-repeat;
            background-size: 100px;
            background-position: top;
          }
        }
}

이상 은 vue 가 flappy bird 를 실현 하 는 사고방식 과 핵심 코드 입 니 다.모두 200 여 줄 의 코드 입 니 다.내 가 보기에 난점 은 주로 파이프 의 이동,터치 판정 과 점수 계산 에 집중 되 어 있다.물론 코드 에 최적화 할 수 있 는 부족 한 점 이 많 습 니 다.함께 노력 하 세 요~~