扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何用HTML5制作贪吃蛇游戏？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联建站专注于柳北企业网站建设,响应式网站建设,成都做商城网站。柳北网站建设公司,为柳北等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务
本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：
实现效果如下
实现思路：
ps：这个只是思路，详细可看代码注释
一、先把蛇画出来
定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。
画蛇（初始状态）
二、蛇能动（重点）
蛇移动方式：自始至终都只有蛇头在动
画一个灰色的方块，位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格
需要一个保存方向的变量(direction)
根据方向进行移动，一次移动一个格
根据按键改方向
三、随机投放食物
需要随机食物的位置
需要判断食物在不在蛇身上。
四、吃食物
判断食物是否与蛇头重叠
数组加一个元素（少删除一个元素就是加一个元素）
生成新的食物
五、gameover
撞墙判定
装自己判定
Document
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网