如何用HTML5制作贪吃蛇游戏-创新互联

如何用HTML5制作贪吃蛇游戏？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

本文介绍了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. 装自己判定

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。

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