用vue写一个小恐龙游戏代码

### 回答1：
好的，下面是一个用 Vue 写的小恐龙游戏的代码示例：

<template>
  <div>
    <div class="game-container">
      <div class="dinosaur" :style="{ bottom: dinosaurBottom + 'px' }">
        <img src="dinosaur.png" alt="dinosaur" />
      </div>
      <div class="obstacle" v-for="obstacle in obstacles" :style="{ left: obstacle.left + 'px', bottom: obstacle.bottom + 'px' }">
        <img src="obstacle.png" alt="obstacle" />
      </div>
    </div>
    <div class="score">{{ score }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dinosaurBottom: 0,
      score: 0,
      obstacles: [],
      gameInterval: null
    };
  },
  mounted() {
    this.startGame();
  },
  methods: {
    startGame() {
      this.gameInterval = setInterval(() => {
        this.moveDinosaur();
        this.moveObstacles();
        this.checkCollision();
      }, 20);
    },
    moveDinosaur() {
      this.dinosaurBottom += 5;
    },
    moveObstacles() {
      for (let i = 0; i < this.obstacles.length; i++) {
        this.obstacles[i].left -= 10;
      }
      if (Math.random() < 0.1) {
        this.obstacles.push({
          left: 500,
          bottom: Math.floor(Math.random() * 200)
        });
      }
    },
    checkCollision() {
      for (let i = 0; i < this.obstacles.length; i++) {
        if (
          this.obstacles[i].left < 50 &&
          this.obstacles[i].left > 0 &&
          this.obstacles[i].bottom < this.dinosaurBottom + 50 &&
          this.obstacles[i].bottom > this.dinosaurBottom
        ) {
          this.endGame();
        }
      }
    },
    endGame() {
      clearInterval(this.gameInterval);
      alert("Game Over! Your score is " + this.score);
    }
  }
};
</script>

<style>
.game-container {
  width: 500px;
  height: 300px;
  position: relative;
  border: 1px solid black;
}

.dinosaur {
  position: absolute;
  left: 20px;
  width: 50px;
  height: 50px;
}

.obstacle {
  position: absolute;
  width: 50px;
  height: 50px;
}

.score {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

这

### 回答2：
Vue 是一个用于构建用户界面的渐进式框架，结合了声明式渲染、组件化开发和响应式数据绑定的优势。下面是一个用 Vue 构建的小恐龙游戏的代码示例：

<template>
  <div>
    <div class="dinosaur" :style="{ bottom: dinosaurBottom + 'px'}">
      🦖
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dinosaurBottom: 0, // 恐龙底部距离
      isJumping: false // 是否正在跳跃
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeyDown)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeyDown)
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'ArrowUp' && !this.isJumping) {
        this.jump()
      }
    },
    jump() {
      this.isJumping = true
      let jumpHeight = 100 // 跳跃高度
      let jumpDuration = 500 // 跳跃时间
      let speed = jumpHeight / jumpDuration // 恐龙上升速度

      let timer = setInterval(() => {
        if (this.dinosaurBottom >= jumpHeight) {
          clearInterval(timer)
          this.fall()
          return
        }

        this.dinosaurBottom += speed
      }, 10)
    },
    fall() {
      let timer = setInterval(() => {
        if (this.dinosaurBottom <= 0) {
          clearInterval(timer)
          this.isJumping = false
          return
        }

        this.dinosaurBottom -= 5
      }, 10)
    }
  }
}
</script>

<style>
.dinosaur {
  position: absolute;
  left: 50px;
  font-size: 30px;
}
</style>

该示例中，使用 Vue 组件化的思想，将恐龙视图用 div 标签表示，并使用动态绑定样式的方式实现恐龙的上升和下降。通过监听键盘事件，在接收到向上箭头按键时触发恐龙跳跃，并通过计时器实现恐龙的上升和下降动画效果。在跳跃过程中，禁止重复跳跃，等上一次跳跃完成后才能开始下一次跳跃。

### 回答3：
下面是一个用Vue编写的小恐龙游戏代码示例：

<template>
  <div>
    <div ref="game" class="game">
      <div :style="{top: dino.top + 'px', left: dino.left + 'px'}" class="dino"></div>
    </div>
    <button @click="startGame">开始游戏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dino: {
        top: 200,
        left: 0,
      },
      jumpHeight: 120,
      isJumping: false,
      gameInterval: null,
    };
  },
  mounted() {
    document.addEventListener("keydown", this.handleJump);
  },
  methods: {
    startGame() {
      this.gameInterval = setInterval(this.updateGame, 16.67);
    },
    handleJump(event) {
      if (event.keyCode === 32 && !this.isJumping) {
        this.isJumping = true;
        const jumpTimer = setInterval(() => {
          if (this.dino.top > this.jumpHeight) {
            clearInterval(jumpTimer);
            this.isJumping = false;
          } else {
            this.dino.top += 5;
          }
        }, 16.67);
      }
    },
    updateGame() {
      if (this.dino.top > 200) {
        this.dino.top = 200;
      } else {
        this.dino.top -= 5;
      }
    },
  },
};
</script>

<style scoped>
.game {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  overflow: hidden;
}

.dino {
  position: absolute;
  top: 200px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #000;
}
</style>

这个代码示例实现了一个简单的小恐龙游戏。游戏中的小恐龙会一直向上跳动，当按下空格键时，小恐龙会开始跳跃到指定高度，然后再回到地面。游戏使用了`setInterval`函数来控制小恐龙的上下移动。