教你如何一步一步用Canvas写一个贪吃蛇

之前在慕课网看了几集Canvas的视频，一直想着写点东西练练手。感觉贪吃蛇算是比较简单的了，当年大学的时候还写过C语言字符版的，没想到还是遇到了很多问题。

最终效果如下（图太大的话时间太长录制gif的软件有时限…）

Canvas,贪吃蛇

首先定义游戏区域。贪吃蛇的屏幕上只有蛇身和苹果两种元素，而这两个都可以用正方形格子构成。正方形之间添加缝隙。为什么要添加缝隙？你可以想象当你成功填满所有格子的时候，如果没有缝隙，就是一个实心的大正方形……你根本不知道蛇身什么样。

画了一个图。

Canvas,贪吃蛇

格子是左上角的坐标是(0, 0)，向右是横坐标增加，向下是纵坐标增加。这个方向和Canvas相同。

每次画一个格子的时候，要从左上角开始，我们直知道Canvas的左上角坐标是(0, 0)，假设格子的边长是 GRID_WIDTH 缝隙的宽度是 GAP_WIDTH ，可以得到第(i, j)个格子的左上角坐标 (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) 。

假设现在蛇身是由三个蓝色的格子组成的，我们不能只绘制三个格子，两个紫色的空隙也一定要绘制，否则，还是之前说的，你根本不知道蛇身什么样。如下图，不画缝隙虽然也能玩，但是体验肯定不一样。

Canvas,贪吃蛇绘制相邻格子之间间隙不绘制间隙

现在我们可以尝试着画一条蛇了。蛇身其实就是一个格子的集合，每个格子用包含两个位置信息的数组表示，整条蛇可以用二维数组表示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>blog_snack</title>    <style>        #canvas {             background-color: #000;        }    </style></head><body>    <canvas id="canvas"></canvas>    <script>        const GRID_WIDTH = 10;  // 格子的边长        const GAP_WIDTH = 2;    // 空隙的边长        const ROW = 10;         // 一共有多少行格子&每行有多少个格子        let canvas = document.getElementById('canvas');        canvas.height = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1);        canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1);        let ctx = canvas.getContext('2d');        let snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // 初始化一条
注：相关教程知识阅读请移步到HTML教程频道。

上一篇：HTML高亮关键字的实现代码

下一篇：详解rem 适配布局

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注