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. 装自己判定

感谢你能够认真阅读完这篇文章，希望小编分享H5中canvas如何实现贪吃蛇小游戏内容对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，遇到问题就找创新互联成都网站设计公司，详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。