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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持潘少俊衡。