原生js+canvas实现贪吃蛇效果

本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： 页面布局展示：worm.html &lt;!DOCTYPE html> &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;贪吃蛇&lt;/title&gt; &lt;style type="text/css"&gt; canvas{ border: 1px solid black; } div{ width: 50px; height: 50px; border: 1px solid black; cursor: pointer; text-align: 在本文中，我们将探讨如何使用原生JavaScript和HTML5的Canvas API实现经典的“贪吃蛇”游戏。这个项目主要涉及到以下几个关键知识点： 1. **HTML布局**： 页面的HTML结构包括一个`<canvas>`元素，用于绘制游戏场景，以及一个`<table>`元素包含四个方向键（上下左右），供玩家控制蛇的移动。 2. **CSS样式**： CSS用来设置`<canvas>`的边框和`<div>`（方向键）的样式，确保它们具有合适的尺寸、边框和光标形状。 3. **JavaScript**： - **事件监听**：通过`onclick`属性为每个方向键的`<div>`添加点击事件，触发`changeDir()`函数改变蛇的移动方向。 - **全局变量**：包括`stage`（舞台对象）、`ctx`（Canvas绘图上下文）、`task`（定时器引用）以及`DIR`（蛇的当前方向）。 - **函数定义**： - `load()`：页面加载完成后执行，初始化舞台，获取Canvas的绘图上下文，并启动游戏循环。 - `changeDir(dir)`：接收用户输入的方向，更新蛇的移动方向。 - `startPrint()`：设置定时器，每帧调用`step()`和`print()`方法来更新游戏状态并绘制屏幕。 - `endPrint()`：清除定时器，停止游戏循环。 4. **自定义类**： - **Node.js**： - `Node`类表示游戏中的一个节点，具有`x`和`y`坐标，以及`equals()`方法用于比较两个节点是否相同。 - **Stage.js**： - `Stage`类表示游戏舞台，包含舞台的宽高，以及一个`Worm`对象。`print()`方法负责在Canvas上绘制游戏状态，包括蛇的身体、食物和背景色。 - `contains()`方法检测指定位置是否在蛇身上，`food`属性表示食物的位置。 5. **Canvas绘图**： 使用Canvas API的`fillRect()`绘制不同颜色的方块代表蛇的身体、食物和背景。同时，`fillStyle`属性用于设置填充颜色，`font`和`fillText()`用于在舞台上显示分数。 6. **游戏逻辑**： - **蛇的移动**：`Worm`类负责蛇的移动逻辑，`step()`方法更新蛇的位置并处理碰撞检测。 - **食物生成**：游戏中可能需要实现一个机制来随机生成食物，供蛇食用以增长。 - **得分系统**：当蛇吃到食物时，分数增加并在屏幕上显示。 7. **事件处理**： - **边界检测**：防止蛇移动出画布范围，否则游戏结束。 - **自我碰撞检测**：如果蛇头与自身身体的任何部分重叠，游戏同样结束。 通过上述技术的组合，我们可以构建一个基本的“贪吃蛇”游戏。开发者可以在此基础上进行扩展，例如增加难度、添加音效、优化动画效果等，让游戏更有趣。这是一个很好的学习原生JavaScript、Canvas绘图和游戏开发基础的好例子。