Vue3 + PlayCanvas 实战：3D 地图自由巡视与多关卡闯关系统

4. 功能解析

多关卡配置与生成

通过 levelConfigs 数组定义每关的参数，generateNewLevel 函数根据当前配置动态重建场景。这样既保证了代码复用，又实现了关卡的差异化展示。

角色移动与碰撞检测

利用方向键输入计算下一步位置，结合 checkCollision 进行纯数学计算判断。这种方式无需引入沉重的物理引擎，性能更优且逻辑可控。

摄像机控制

采用第三人称视角，通过 WASD 调整水平与垂直角度，利用球面坐标公式实时计算摄像机位置，确保视角始终平滑跟随玩家。

小地图实现

基于 2D Canvas 绘制。核心是将 3D 世界坐标映射到 2D 画布中心，分别渲染障碍物、起点、终点及玩家朝向，提供直观的战术视野。

回车键通关重置

解决了键盘事件在不同浏览器或框架下的兼容性问题。通过双重监听（PlayCanvas 内置 + 全局 Window）配合 Canvas 焦点强制聚焦，确保回车键能稳定触发关卡切换。

完整源码结构

App.vue

<template>
  <div id="app">
    <GameCanvas />
  </div>
</template>

<script setup>
import GameCanvas from './components/GameCanvas.vue'
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

components/GameCanvas.vue

<template>
  <div class="game-container">
    <h2>3D 地图巡视游戏 - 第{{ currentLevel }}关</h2>
    <div id="application-container" class="canvas-container">
      <canvas id="pc-canvas" tabindex="1"></canvas>
      <div class="minimap-container">
        <canvas id="minimap-canvas" width="200" height="200"></canvas>
      </div>
    </div>
    <div class="game-info">
      <p>控制方式：↑↓←→ 方向键移动角色 | WASD 键旋转摄像机</p>
      <p>目标：从<span class="start-point">A 点 (红色)</span>走到<span class="end-point">B 点 (绿色)</span></p>
      <p v-if="isWon" class="success">🎉 恭喜过关！按回车键进入下一关</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as pc from 'playcanvas'

// 游戏状态
const currentLevel = ref(1)
const isWon = ref(false)
let app = null
let player = null
let startPoint = null
let endPoint = null
let cameraEntity = null
let moveSpeed = 8
let cameraRotateSpeed = 60
let cameraYaw = 0
let cameraPitch = -30
let cameraDistance = 15

let globalEnterHandler = null

// 多关卡配置
const levelConfigs = [
  {
    groundSize: 20,
    startPos: new pc.Vec3(-8, 0.5, -8),
    endPos: new pc.Vec3(8, 0.5, 8),
    obstacleCount: 3,
    groundColor: [0.3, 0.7, 0.3],
    obstacleColor: [0.5, 0.5, 0.5],
    sceneBgColor: [1, 1, 1]
  },
  {
    groundSize: 25,
    startPos: new pc.Vec3(-10, 0.5, 0),
    endPos: new pc.Vec3(10, 0.5, 0),
    obstacleCount: 5,
    groundColor: [0.3, 0.7, 0.7],
    obstacleColor: [0.6, 0.6, 0.6],
    sceneBgColor: [1, 1, 1]
  },
  {
    groundSize: 30,
    startPos: new pc.Vec3(0, 0.5, -12),
    endPos: new pc.Vec3(0, 0.5, 12),
    obstacleCount: 7,
    groundColor: [0.7, 0.7, 0.3],
    obstacleColor: [0.4, 0.4, 0.4],
    sceneBgColor: [1, 1, 1]
  },
  {
    groundSize: 35,
    startPos: new pc.Vec3(-12, 0.5, 10),
    endPos: new pc.Vec3(12, 0.5, -10),
    obstacleCount: 8,
    groundColor: [0.7, 0.3, 0.7],
    obstacleColor: [0.55, 0.55, 0.55],
    sceneBgColor: [1, 1, 1]
  }
]

let minimapCanvas = null
let minimapCtx = null
let minimapScale = 5
let obstacles = []

const goToNextLevel = () => {
  if (isWon.value) {
    console.log('进入下一关，当前关卡：', currentLevel.value)
    currentLevel.value = currentLevel.value % levelConfigs.length + 1
    isWon.value = false
    generateNewLevel()
    document.getElementById('pc-canvas').focus()
  }
}

async function initPlayCanvas() {
  try {
    await nextTick()
    const canvas = document.getElementById('pc-canvas')
    if (!canvas) {
      console.error('Canvas 元素未找到！')
      return
    }
    canvas.focus()
    canvas.addEventListener('click', () => canvas.focus())
    initMinimap()

    const graphicsDevice = new pc.WebglGraphicsDevice(canvas, {
      antialias: true,
      powerPreference: 'high-performance'
    })
    graphicsDevice.maxPixelRatio = window.devicePixelRatio

    app = new pc.Application(canvas, {
      graphicsDevice: graphicsDevice,
      mouse: new pc.Mouse(canvas),
      keyboard: new pc.Keyboard(window),
      createCanvas: false,
      physics: false
    })

    await app.start()

    if (!app.scene) {
      app.scene = new pc.Scene(app.graphicsDevice)
    }
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW)
    app.setCanvasResolution(pc.RESOLUTION_AUTO)

    generateNewLevel()
    app.on('update', update)

    app.keyboard.off(pc.KEY_ENTER, goToNextLevel)
    app.keyboard.on(pc.KEY_ENTER, goToNextLevel)
    app.keyboard.off(13, goToNextLevel)
    app.keyboard.on(13, goToNextLevel)

    globalEnterHandler = (e) => {
      if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault()
        goToNextLevel()
      }
    }
    window.addEventListener('keydown', globalEnterHandler)

    window.addEventListener('resize', () => {
      if (app && app.graphicsDevice) {
        app.resizeCanvas(window.innerWidth, window.innerHeight)
        app.graphicsDevice.resize(window.innerWidth, window.innerHeight)
      }
    })
    app.resizeCanvas(window.innerWidth, window.innerHeight)
  } catch (error) {
    console.error('PlayCanvas 初始化失败:', error)
  }
}

function initMinimap() {
  minimapCanvas = document.getElementById('minimap-canvas')
  minimapCtx = minimapCanvas.getContext('2d')
}

function drawMinimap() {
  if (!minimapCtx || !player || !startPoint || !endPoint) return
  minimapCtx.clearRect(0, 0, minimapCanvas.width, minimapCanvas.height)
  minimapCtx.fillStyle = '#222'
  minimapCtx.fillRect(0, 0, minimapCanvas.width, minimapCanvas.height)

  const centerX = minimapCanvas.width / 2
  const centerY = minimapCanvas.height / 2

  minimapCtx.fillStyle = '#666'
  obstacles.forEach(obs => {
    const x = centerX + obs.pos.x * minimapScale
    const y = centerY + obs.pos.z * minimapScale
    const w = obs.scale.x * minimapScale
    const h = obs.scale.z * minimapScale
    minimapCtx.fillRect(x - w / 2, y - h / 2, w, h)
  })

  minimapCtx.fillStyle = '#ff0000'
  const startX = centerX + startPoint.getPosition().x * minimapScale
  const startY = centerY + startPoint.getPosition().z * minimapScale
  minimapCtx.beginPath()
  minimapCtx.arc(startX, startY, 4, 0, Math.PI * 2)
  minimapCtx.fill()

  minimapCtx.fillStyle = '#00ff00'
  const endX = centerX + endPoint.getPosition().x * minimapScale
  const endY = centerY + endPoint.getPosition().z * minimapScale
  minimapCtx.beginPath()
  minimapCtx.arc(endX, endY, 4, 0, Math.PI * 2)
  minimapCtx.fill()

  minimapCtx.fillStyle = '#0000ff'
  const playerX = centerX + player.getPosition().x * minimapScale
  const playerY = centerY + player.getPosition().z * minimapScale
  minimapCtx.beginPath()
  minimapCtx.arc(playerX, playerY, 5, 0, Math.PI * 2)
  minimapCtx.fill()

  minimapCtx.strokeStyle = '#ffffff'
  minimapCtx.lineWidth = 2
  minimapCtx.beginPath()
  minimapCtx.moveTo(playerX, playerY)
  minimapCtx.lineTo(
    playerX + Math.sin(player.getEulerAngles().y * Math.PI / 180) * 8,
    playerY + Math.cos(player.getEulerAngles().y * Math.PI / 180) * 8
  )
  minimapCtx.stroke()
}

function checkCollision(nextPos) {
  if (!player || obstacles.length === 0) return false
  const playerRadius = 0.5

  for (let i = 0; i < obstacles.length; i++) {
    const obs = obstacles[i]
    const obsMinX = obs.pos.x - obs.scale.x / 2
    const obsMaxX = obs.pos.x + obs.scale.x / 2
    const obsMinZ = obs.pos.z - obs.scale.z / 2
    const obsMaxZ = obs.pos.z + obs.scale.z / 2
    const playerMinX = nextPos.x - playerRadius
    const playerMaxX = nextPos.x + playerRadius
    const playerMinZ = nextPos.z - playerRadius
    const playerMaxZ = nextPos.z + playerRadius

    const xOverlap = playerMaxX > obsMinX && playerMinX < obsMaxX
    const zOverlap = playerMaxZ > obsMinZ && playerMinZ < obsMaxZ

    if (xOverlap && zOverlap) return true
  }

  const currentConfig = levelConfigs[currentLevel.value - 1]
  const mapHalfSize = currentConfig.groundSize / 2
  if (Math.abs(nextPos.x) > mapHalfSize - 1 || Math.abs(nextPos.z) > mapHalfSize - 1) {
    return true
  }
  return false
}

function generateNewLevel() {
  obstacles = []
  if (app && app.root && app.root.children.length > 0) {
    const children = [...app.root.children]
    children.forEach(child => child.destroy())
  }

  const config = levelConfigs[currentLevel.value - 1] || levelConfigs[0]
  app.scene.background = new pc.Color(...config.sceneBgColor)

  const ground = new pc.Entity('ground')
  ground.addComponent('model', { type: 'box', castShadows: true })
  ground.setLocalScale(config.groundSize, 0.1, config.groundSize)
  ground.setLocalPosition(0, 0, 0)
  ground.model.material = createMaterial(...config.groundColor)
  app.root.addChild(ground)

  for (let i = 0; i < config.obstacleCount; i++) {
    let posX, posZ
    let validPos = false
    while (!validPos) {
      posX = getRandomNum(-config.groundSize / 2 + 2, config.groundSize / 2 - 2)
      posZ = getRandomNum(-config.groundSize / 2 + 2, config.groundSize / 2 - 2)
      const distToStart = Math.hypot(posX - config.startPos.x, posZ - config.startPos.z)
      const distToEnd = Math.hypot(posX - config.endPos.x, posZ - config.endPos.z)
      if (distToStart > 3 && distToEnd > 3) validPos = true
    }

    const scaleX = getRandomNum(1, 4)
    const scaleZ = getRandomNum(1, 4)
    const obstacle = new pc.Entity(`obstacle-${i}`)
    obstacle.addComponent('model', { type: 'box', castShadows: true })
    obstacle.setLocalPosition(posX, scaleX / 2, posZ)
    obstacle.setLocalScale(scaleX, scaleX, scaleZ)
    obstacle.model.material = createMaterial(...config.obstacleColor)
    app.root.addChild(obstacle)
    obstacles.push({
      pos: { x: posX, z: posZ },
      scale: { x: scaleX, z: scaleZ }
    })
  }

  startPoint = new pc.Entity('start-point')
  startPoint.addComponent('model', { type: 'sphere', castShadows: true })
  startPoint.setLocalPosition(config.startPos)
  startPoint.setLocalScale(0.5, 0.5, 0.5)
  startPoint.model.material = createMaterial(1, 0, 0)
  app.root.addChild(startPoint)

  endPoint = new pc.Entity('end-point')
  endPoint.addComponent('model', { type: 'sphere', castShadows: true })
  endPoint.setLocalPosition(config.endPos)
  endPoint.setLocalScale(0.5, 0.5, 0.5)
  endPoint.model.material = createMaterial(0, 1, 0)
  app.root.addChild(endPoint)

  player = new pc.Entity('player')
  player.addComponent('model', { type: 'capsule', castShadows: true })
  player.setLocalPosition(config.startPos)
  player.setLocalScale(0.5, 1, 0.5)
  player.model.material = createMaterial(0, 0, 1)
  app.root.addChild(player)

  cameraEntity = new pc.Entity('camera')
  cameraEntity.addComponent('camera', {
    clearColor: new pc.Color(...config.sceneBgColor),
    gammaCorrection: pc.GAMMA_SRGB,
    toneMapping: pc.TONEMAP_LINEAR
  })
  updateCameraPosition()
  cameraEntity.lookAt(player.getPosition())
  app.root.addChild(cameraEntity)

  drawMinimap()
}

function updateCameraPosition() {
  if (!cameraEntity || !player) return
  const yawRad = cameraYaw * Math.PI / 180
  const pitchRad = cameraPitch * Math.PI / 180
  const x = Math.sin(yawRad) * Math.cos(pitchRad) * cameraDistance
  const z = Math.cos(yawRad) * Math.cos(pitchRad) * cameraDistance
  const y = Math.sin(pitchRad) * cameraDistance + 8
  const playerPos = player.getPosition()
  cameraEntity.setPosition(playerPos.x + x, playerPos.y + y, playerPos.z + z)
  cameraEntity.lookAt(playerPos)
}

function getRandomNum(min, max) {
  return Math.random() * (max - min) + min
}

function createMaterial(r, g, b) {
  const material = new pc.StandardMaterial()
  material.diffuse.set(r, g, b)
  material.emissive.set(r * 0.2, g * 0.2, b * 0.2)
  material.update()
  return material
}

function update(dt) {
  if (isWon.value || !app || !player || !endPoint || !cameraEntity) return
  const keyboard = app.keyboard

  if (keyboard.isPressed(pc.KEY_A)) cameraYaw += cameraRotateSpeed * dt
  if (keyboard.isPressed(pc.KEY_D)) cameraYaw -= cameraRotateSpeed * dt
  if (keyboard.isPressed(pc.KEY_W)) {
    cameraPitch += cameraRotateSpeed * dt
    cameraPitch = Math.min(cameraPitch, 10)
  }
  if (keyboard.isPressed(pc.KEY_S)) {
    cameraPitch -= cameraRotateSpeed * dt
    cameraPitch = Math.max(cameraPitch, -60)
  }
  updateCameraPosition()

  const moveStep = moveSpeed * dt
  const currentPos = player.getPosition()
  let newPos = new pc.Vec3(currentPos.x, currentPos.y, currentPos.z)

  if (keyboard.isPressed(pc.KEY_UP)) newPos.z -= moveStep
  if (keyboard.isPressed(pc.KEY_DOWN)) newPos.z += moveStep
  if (keyboard.isPressed(pc.KEY_LEFT)) newPos.x -= moveStep
  if (keyboard.isPressed(pc.KEY_RIGHT)) newPos.x += moveStep

  if (!checkCollision(newPos)) player.setPosition(newPos)

  drawMinimap()

  const distanceToEnd = Math.hypot(
    player.getPosition().x - endPoint.getPosition().x,
    player.getPosition().z - endPoint.getPosition().z
  )
  if (distanceToEnd < 2.5) {
    isWon.value = true
    console.log('已到达终点，isWon:', isWon.value)
  }
}

onMounted(async () => {
  await initPlayCanvas()
})

onUnmounted(() => {
  if (app) {
    app.off('update', update)
    if (app.keyboard) {
      app.keyboard.off(pc.KEY_ENTER, goToNextLevel)
      app.keyboard.off(13, goToNextLevel)
    }
    window.removeEventListener('resize', () => {})
    app.destroy()
    app = null
  }
  if (globalEnterHandler) {
    window.removeEventListener('keydown', globalEnterHandler)
    globalEnterHandler = null
  }
})
</script>

<style scoped>
.game-container {
  width: 100%;
  height: 100vh;
  position: relative;
  color: #333;
  overflow: hidden;
  font-family: Arial, sans-serif;
}
.canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#pc-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}
.minimap-container {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 200px;
  border: 2px solid #666;
  border-radius: 8px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}
#minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.game-info {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 20px;
  border-radius: 8px;
  z-index: 100;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
}
.start-point {
  color: #e53935;
  font-weight: bold;
}
.end-point {
  color: #43a047;
  font-weight: bold;
}
.success {
  color: #f57c00;
  font-weight: bold;
  font-size: 16px;
  margin: 5px 0 0 0;
}
h2 {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 18px;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D 地图巡视游戏</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
  <script type="module" src="/src/main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>