H5如何使用canvas实现贪吃蛇小游戏-创新互联

小编给大家分享一下H5如何使用canvas实现贪吃蛇小游戏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

实现效果如下

实现思路：

ps：这个只是思路，详细可看代码注释

一、先把蛇画出来

1. 定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。

2. 画蛇（初始状态）

二、蛇能动（重点）

1. 蛇移动方式：自始至终都只有蛇头在动

1. 画一个灰色的方块，位置与蛇头重叠

2. 将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)

3. 砍去末尾的方块array.pop()

4. 将蛇头向设定方向移动一格

2. 需要一个保存方向的变量(direction)

3. 根据方向进行移动，一次移动一个格

4. 根据按键改方向

三、随机投放食物

1. 需要随机食物的位置

2. 需要判断食物在不在蛇身上。

四、吃食物

1. 判断食物是否与蛇头重叠

2. 数组加一个元素（少删除一个元素就是加一个元素）

3. 生成新的食物

五、gameover

1. 撞墙判定

2. 装自己判定

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。  3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

以上是“H5如何使用canvas实现贪吃蛇小游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！