代码小白也能秒懂！用 Vue3 + Canvas 畅玩经典贪吃蛇游戏

2023-12-31 00:17:43

在繁忙的业务代码开发之余，让我们来放松一下，用 Vue3 和 Canvas 技术打造一款经典的贪吃蛇游戏。只需 200 行代码，即使是编程新手也能轻松上手，体验编程的乐趣！

代码架构概览

我们的贪吃蛇游戏将由三个主要部分组成：

Vue3 组件： 负责管理游戏状态，处理用户输入和更新游戏画面。
Canvas 画布： 用于绘制游戏画面，包括蛇身、食物和背景。
游戏逻辑： 负责处理蛇的移动、食物的生成和游戏结束条件。

实现步骤

1. 创建 Vue3 组件

<template>
  <canvas id="game-canvas"></canvas>
</template>

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

export default {
  setup() {
    const game = ref(null)

    onMounted(() => {
      game.value = new Game(document.getElementById('game-canvas'))
      game.value.start()
    })

    onUnmounted(() => {
      game.value.stop()
    })

    return {
      game
    }
  }
}
</script>

2. 初始化 Canvas

class Game {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.gridSize = 20
    this.snake = [{ x: 10, y: 10 }]
    this.food = { x: 5, y: 5 }
    this.direction = 'right'
    this.score = 0
    this.gameOver = false
    this.intervalId = null
  }

  // ... 省略其他方法
}

3. 游戏循环

start() {
  this.intervalId = setInterval(() => {
    if (!this.gameOver) {
      this.update()
      this.draw()
    }
  }, 100)
}

4. 绘制游戏画面

draw() {
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

  this.ctx.fillStyle = 'black'
  this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

  this.ctx.fillStyle = 'green'
  this.snake.forEach((segment) => {
    this.ctx.fillRect(segment.x * this.gridSize, segment.y * this.gridSize, this.gridSize, this.gridSize)
  })

  this.ctx.fillStyle = 'red'
  this.ctx.fillRect(this.food.x * this.gridSize, this.food.y * this.gridSize, this.gridSize, this.gridSize)
}

5. 处理用户输入

onkeydown(e) {
  switch (e.key) {
    case 'ArrowUp':
      if (this.direction !== 'down') this.direction = 'up'
      break
    case 'ArrowDown':
      if (this.direction !== 'up') this.direction = 'down'
      break
    case 'ArrowLeft':
      if (this.direction !== 'right') this.direction = 'left'
      break
    case 'ArrowRight':
      if (this.direction !== 'left') this.direction = 'right'
      break
  }
}