这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下。
本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下:
实现效果如下

实现思路:
ps:这个只是思路,详细可看代码注释
一、先把蛇画出来
定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇头(红)和蛇身(灰)。
画蛇(初始状态)
二、蛇能动(重点)
蛇移动方式:自始至终都只有蛇头在动
画一个灰色的方块,位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格
需要一个保存方向的变量(direction)
根据方向进行移动,一次移动一个格
根据按键改方向
三、随机投放食物
需要随机食物的位置
需要判断食物在不在蛇身上。
四、吃食物
判断食物是否与蛇头重叠
数组加一个元素(少删除一个元素就是加一个元素)
生成新的食物
五、gameover
撞墙判定
装自己判定
Document
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:










