如何使用Vue3及Canvas实现简易的贪吃蛇游戏

发布时间：2023-05-20 14:50:14 作者：iii
来源：亿速云阅读：141

如何使用Vue3及Canvas实现简易的贪吃蛇游戏

引言

贪吃蛇是一款经典的游戏，它的规则简单但玩法有趣。本文将介绍如何使用Vue3和Canvas技术来实现一个简易的贪吃蛇游戏。通过这个项目，你将学习到如何使用Vue3的响应式系统来管理游戏状态，以及如何使用Canvas来绘制游戏界面和处理用户输入。

项目结构

在开始编写代码之前，我们先来规划一下项目的结构。我们将使用Vue3的单文件组件（SFC）来组织代码，项目结构如下：

/snake-game
  /public
    index.html
  /src
    /assets
      styles.css
    /components
      GameCanvas.vue
    App.vue
    main.js

public/index.html：项目的入口HTML文件。
src/assets/styles.css：项目的全局样式文件。
src/components/GameCanvas.vue：游戏的主组件，负责绘制游戏界面和处理游戏逻辑。
src/App.vue：项目的根组件。
src/main.js：项目的入口JavaScript文件。

创建Vue3项目

首先，我们需要创建一个新的Vue3项目。如果你还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，使用Vue CLI创建一个新的项目：

vue create snake-game

在创建项目时，选择Vue3作为项目的版本。

安装依赖

在项目创建完成后，进入项目目录并安装所需的依赖：

cd snake-game
npm install

编写HTML和CSS

在public/index.html中，我们只需要一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

在src/assets/styles.css中，我们可以添加一些基本的样式：

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #282c34;
  color: white;
  font-family: Arial, sans-serif;
}

canvas {
  border: 1px solid white;
}

编写Vue组件

App.vue

在src/App.vue中，我们将引入GameCanvas组件并设置页面的基本布局：

<template>
  <div id="app">
    <h1>Snake Game</h1>
    <GameCanvas />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    GameCanvas
  }
};
</script>

<style scoped>
#app {
  text-align: center;
}
</style>

GameCanvas.vue

GameCanvas.vue是游戏的核心组件，负责绘制游戏界面和处理游戏逻辑。我们将在这个组件中使用Canvas来绘制游戏界面，并使用Vue3的响应式系统来管理游戏状态。

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
</template>

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

export default {
  name: 'GameCanvas',
  setup() {
    const canvas = ref(null);
    const ctx = ref(null);
    const snake = ref([{ x: 10, y: 10 }]);
    const direction = ref({ x: 0, y: 0 });
    const food = ref({ x: 5, y: 5 });
    const gridSize = 20;
    const tileCount = 20;
    const gameSpeed = 100;

    const drawSnake = () => {
      ctx.value.fillStyle = 'lime';
      snake.value.forEach(segment => {
        ctx.value.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
      });
    };

    const drawFood = () => {
      ctx.value.fillStyle = 'red';
      ctx.value.fillRect(food.value.x * gridSize, food.value.y * gridSize, gridSize, gridSize);
    };

    const moveSnake = () => {
      const head = { x: snake.value[0].x + direction.value.x, y: snake.value[0].y + direction.value.y };

      if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.value.some(segment => segment.x === head.x && segment.y === head.y)) {
        resetGame();
        return;
      }

      snake.value.unshift(head);

      if (head.x === food.value.x && head.y === food.value.y) {
        placeFood();
      } else {
        snake.value.pop();
      }
    };

    const placeFood = () => {
      food.value.x = Math.floor(Math.random() * tileCount);
      food.value.y = Math.floor(Math.random() * tileCount);

      if (snake.value.some(segment => segment.x === food.value.x && segment.y === food.value.y)) {
        placeFood();
      }
    };

    const resetGame = () => {
      snake.value = [{ x: 10, y: 10 }];
      direction.value = { x: 0, y: 0 };
      placeFood();
    };

    const gameLoop = () => {
      ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
      drawSnake();
      drawFood();
      moveSnake();
    };

    const handleKeyDown = (event) => {
      switch (event.key) {
        case 'ArrowUp':
          if (direction.value.y === 0) direction.value = { x: 0, y: -1 };
          break;
        case 'ArrowDown':
          if (direction.value.y === 0) direction.value = { x: 0, y: 1 };
          break;
        case 'ArrowLeft':
          if (direction.value.x === 0) direction.value = { x: -1, y: 0 };
          break;
        case 'ArrowRight':
          if (direction.value.x === 0) direction.value = { x: 1, y: 0 };
          break;
      }
    };

    onMounted(() => {
      ctx.value = canvas.value.getContext('2d');
      placeFood();
      const interval = setInterval(gameLoop, gameSpeed);
      window.addEventListener('keydown', handleKeyDown);

      onUnmounted(() => {
        clearInterval(interval);
        window.removeEventListener('keydown', handleKeyDown);
      });
    });

    return {
      canvas
    };
  }
};
</script>

<style scoped>
canvas {
  display: block;
  margin: 0 auto;
}
</style>

main.js

在src/main.js中，我们将创建Vue实例并挂载到DOM中：

import { createApp } from 'vue';
import App from './App.vue';
import './assets/styles.css';

createApp(App).mount('#app');

运行项目

在完成代码编写后，我们可以通过以下命令来运行项目：

npm run serve

打开浏览器并访问http://localhost:8080，你将看到一个简易的贪吃蛇游戏。你可以使用方向键来控制蛇的移动。

总结

通过这个项目，我们学习了如何使用Vue3和Canvas来实现一个简易的贪吃蛇游戏。我们使用了Vue3的响应式系统来管理游戏状态，并使用Canvas来绘制游戏界面和处理用户输入。这个项目不仅帮助你理解Vue3的基本概念，还让你掌握了Canvas的基本用法。希望你能通过这个项目获得更多的启发，继续探索前端开发的无限可能。

如何使用Vue3及Canvas实现简易的贪吃蛇游戏

如何使用Vue3及Canvas实现简易的贪吃蛇游戏

引言

项目结构

创建Vue3项目

安装依赖

编写HTML和CSS

编写Vue组件

App.vue

GameCanvas.vue

main.js

运行项目

总结

相关阅读