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

相信看了本文案例你已经掌握了方法，更多精彩请关注 第一PHP社区 其它相关文章！

推荐阅读：

H5拖放API进行拖放排序

html5新增加的标签有哪些

以上就是H5的canvas实现贪吃蛇小游戏的详细内容，更多请关注 第一PHP社区 其它相关文章！