当前位置：首页 > VUE

vue实现打砖块

2026-01-15 02:42:58VUE

Vue 实现打砖块游戏

以下是一个基于 Vue 3 的打砖块游戏实现方案，涵盖核心逻辑和代码示例。

vue实现打砖块

游戏核心组件结构

<template>
  <div class="game-container">
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const canvas = ref(null)
const ctx = ref(null)
const ball = ref({ x: 400, y: 300, dx: 4, dy: -4, radius: 10 })
const paddle = ref({ x: 350, y: 550, width: 100, height: 15 })
const bricks = ref([])
const score = ref(0)
const gameRunning = ref(false)
</script>

初始化游戏元素

function initBricks() {
  const brickRowCount = 3
  const brickColumnCount = 5
  const brickWidth = 75
  const brickHeight = 20
  const brickPadding = 10
  const brickOffsetTop = 30
  const brickOffsetLeft = 30

  bricks.value = []
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      bricks.value.push({
        x: c * (brickWidth + brickPadding) + brickOffsetLeft,
        y: r * (brickHeight + brickPadding) + brickOffsetTop,
        width: brickWidth,
        height: brickHeight,
        status: 1
      })
    }
  }
}

游戏主循环

function draw() {
  if (!gameRunning.value) return

  ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height)
  drawBall()
  drawPaddle()
  drawBricks()
  collisionDetection()

  if (ball.value.x + ball.value.dx > canvas.value.width - ball.value.radius || 
      ball.value.x + ball.value.dx < ball.value.radius) {
    ball.value.dx = -ball.value.dx
  }

  if (ball.value.y + ball.value.dy < ball.value.radius) {
    ball.value.dy = -ball.value.dy
  } else if (ball.value.y + ball.value.dy > canvas.value.height - ball.value.radius) {
    if (ball.value.x > paddle.value.x && ball.value.x < paddle.value.x + paddle.value.width) {
      ball.value.dy = -ball.value.dy
    } else {
      gameOver()
    }
  }

  ball.value.x += ball.value.dx
  ball.value.y += ball.value.dy

  requestAnimationFrame(draw)
}

碰撞检测逻辑

function collisionDetection() {
  for (let i = 0; i < bricks.value.length; i++) {
    const brick = bricks.value[i]
    if (
      brick.status === 1 &&
      ball.value.x > brick.x &&
      ball.value.x < brick.x + brick.width &&
      ball.value.y > brick.y &&
      ball.value.y < brick.y + brick.height
    ) {
      ball.value.dy = -ball.value.dy
      brick.status = 0
      score.value++
      if (score.value === brickRowCount * brickColumnCount) {
        alert('恭喜你赢了!')
        resetGame()
      }
    }
  }
}

控制板移动

function setupControls() {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Right' || e.key === 'ArrowRight') {
      paddle.value.x = Math.min(
        paddle.value.x + 20,
        canvas.value.width - paddle.value.width
      )
    } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
      paddle.value.x = Math.max(paddle.value.x - 20, 0)
    }
  })
}

游戏状态管理

function startGame() {
  gameRunning.value = true
  initBricks()
  ball.value = { x: 400, y: 300, dx: 4, dy: -4, radius: 10 }
  score.value = 0
  draw()
}

function gameOver() {
  gameRunning.value = false
  alert('游戏结束')
}

function resetGame() {
  gameRunning.value = false
  initBricks()
  ball.value = { x: 400, y: 300, dx: 4, dy: -4, radius: 10 }
  paddle.value = { x: 350, y: 550, width: 100, height: 15 }
  score.value = 0
}

样式设置

.game-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

canvas {
  background: #eee;
  display: block;
  border: 1px solid #ccc;
}