从零用Vue实现Chrome小恐龙游戏：原理、代码与优化全解析

一、游戏机制与核心逻辑

Chrome小恐龙游戏（T-Rex Runner）的核心玩法是：玩家控制小恐龙跳跃躲避障碍物（仙人掌和飞鸟），通过持续奔跑获得分数。其物理系统包含重力模拟、跳跃抛物线、碰撞检测等要素。在Vue实现中，需将游戏状态（如分数、速度、游戏状态）抽象为响应式数据，通过方法控制恐龙动作和障碍物生成。

1.1 游戏状态管理

使用Vue的reactive或ref定义游戏核心状态：

import { reactive } from 'vue';
const gameState = reactive({
  score: 0,
  speed: 5, // 基础移动速度
  isRunning: false,
  isJumping: false,
  gravity: 0.6,
  jumpForce: -12, // 初始跳跃力
  dinoY: 0,       // 恐龙垂直位置
  obstacles: []   // 障碍物数组
});

通过watch监听isRunning状态，控制游戏循环的启动/暂停。

1.2 物理引擎实现

重力与跳跃的模拟需在requestAnimationFrame中持续更新：

function updatePhysics() {
  if (gameState.isJumping) {
    gameState.dinoY += gameState.jumpForce;
    gameState.jumpForce += gameState.gravity; // 重力累积
    if (gameState.dinoY >= 0) { // 落地检测
      gameState.dinoY = 0;
      gameState.isJumping = false;
      gameState.jumpForce = -12;
    }
  }
}

二、Vue组件化设计

将游戏拆分为可复用的Vue组件，提升代码可维护性。

2.1 恐龙组件（Dino.vue）

<template>
  <div 
    class="dino" 
    :style="{ transform: `translateY(${dinoY}px)` }"
    @click="handleJump"
  ></div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps(['gameState']);
const emit = defineEmits(['jump']);
const handleJump = () => {
  if (!props.gameState.isJumping && props.gameState.isRunning) {
    emit('jump');
  }
};
</script>

通过emit触发父组件的跳跃逻辑，实现单向数据流。

2.2 障碍物组件（Obstacle.vue）

<template>
  <div 
    class="obstacle" 
    :class="{ 'cactus': type === 'cactus', 'bird': type === 'bird' }"
    :style="{ left: `${x}px` }"
  ></div>
</template>
<script setup>
defineProps(['type', 'x']);
</script>

通过type区分仙人掌和飞鸟，动态计算水平位置。

三、碰撞检测算法

碰撞检测是游戏逻辑的核心，需精确判断恐龙与障碍物的重叠区域。

3.1 矩形碰撞检测

假设恐龙和障碍物均为矩形，检测逻辑如下：

function checkCollision(dinoRect, obstacleRect) {
  return (
    dinoRect.x < obstacleRect.x + obstacleRect.width &&
    dinoRect.x + dinoRect.width > obstacleRect.x &&
    dinoRect.y < obstacleRect.y + obstacleRect.height &&
    dinoRect.y + dinoRect.height > obstacleRect.y
  );
}

在Vue中，需将恐龙和障碍物的坐标（x, y, width, height）作为响应式数据传递。

3.2 性能优化

• 空间分区：将游戏区域划分为网格，仅检测相邻区域的障碍物。
• 提前终止：一旦发现碰撞立即停止检测，减少计算量。

四、游戏循环与动画

使用requestAnimationFrame实现平滑动画，结合Vue的响应式更新。

4.1 游戏主循环

let animationId;
function gameLoop() {
  updatePhysics();
  moveObstacles();
  checkCollisions();
  animationId = requestAnimationFrame(gameLoop);
}
// 在Vue中通过watch启动/暂停
watch(() => gameState.isRunning, (running) => {
  if (running) {
    gameLoop();
  } else {
    cancelAnimationFrame(animationId);
  }
});

4.2 障碍物生成逻辑

随机生成仙人掌或飞鸟，并控制生成频率：

function spawnObstacle() {
  const types = ['cactus', 'cactus', 'bird']; // 飞鸟概率较低
  const type = types[Math.floor(Math.random() * types.length)];
  const x = window.innerWidth; // 从屏幕右侧生成
  gameState.obstacles.push({ type, x });
}
// 每2秒生成一个障碍物
setInterval(spawnObstacle, 2000 / gameState.speed);

五、响应式设计与适配

5.1 视口适配

通过CSS变量动态调整游戏尺寸：

:root {
  --game-width: 600px;
  --game-height: 150px;
}
.game-container {
  width: var(--game-width);
  height: var(--game-height);
  overflow: hidden;
}

在Vue中监听窗口大小变化，动态调整--game-width。

5.2 触摸事件支持

为移动端添加触摸控制：

function handleTouchStart() {
  if (gameState.isRunning) {
    triggerJump();
  } else {
    startGame();
  }
}
// 在mounted中添加事件监听
onMounted(() => {
  window.addEventListener('touchstart', handleTouchStart);
});

六、性能优化实践

6.1 对象池技术

复用障碍物DOM元素，避免频繁创建/销毁：

const obstaclePool = [];
function getObstacle() {
  return obstaclePool.length ? 
    obstaclePool.pop() : 
    document.createElement('div');
}
function recycleObstacle(el) {
  el.style.left = '-100px'; // 移出屏幕
  obstaclePool.push(el);
}

6.2 节流与防抖

对高频事件（如滚动、调整大小）进行节流：

import { throttle } from 'lodash-es';
const throttledResize = throttle(() => {
  adjustGameSize();
}, 100);
window.addEventListener('resize', throttledResize);

七、完整代码示例

<template>
  <div class="game-container" @click="handleJump">
    <Dino 
      :gameState="gameState" 
      @jump="handleJump"
    />
    <Obstacle 
      v-for="obs in gameState.obstacles" 
      :key="obs.id"
      :type="obs.type"
      :x="obs.x"
    />
    <div class="score">{{ gameState.score }}</div>
    <button @click="toggleGame">
      {{ gameState.isRunning ? '暂停' : '开始' }}
    </button>
  </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import Dino from './Dino.vue';
import Obstacle from './Obstacle.vue';
const gameState = reactive({
  score: 0,
  isRunning: false,
  dinoY: 0,
  obstacles: []
});
let animationId;
function gameLoop() {
  // 更新逻辑...
  animationId = requestAnimationFrame(gameLoop);
}
function toggleGame() {
  gameState.isRunning = !gameState.isRunning;
}
onMounted(() => {
  // 初始化游戏...
});
</script>

八、总结与扩展

通过Vue实现Chrome小恐龙游戏，开发者可以掌握：

1. 游戏状态管理：利用Vue响应式系统管理复杂状态。
2. 组件化设计：将游戏拆分为可复用的UI组件。
3. 性能优化：应用对象池、节流等技术提升性能。

扩展方向包括：

• 添加音效和粒子效果。
• 实现多人联机模式。
• 集成排行榜功能。

此实现不仅复现了经典游戏的玩法，更展示了Vue在复杂交互场景中的潜力，适合作为学习Vue高级特性的实践项目。