Vue实现Chrome小恐龙游戏的示例代码

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

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