本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：
实现效果如下
实现思路：
ps：这个只是思路，详细可看代码注释
一、先把蛇画出来
定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。
画蛇（初始状态）
二、蛇能动（重点）
蛇移动方式：自始至终都只有蛇头在动
画一个灰色的方块，位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格
需要一个保存方向的变量(direction)
根据方向进行移动，一次移动一个格
根据按键改方向
三、随机投放食物
需要随机食物的位置
需要判断食物在不在蛇身上。
四、吃食物
判断食物是否与蛇头重叠
数组加一个元素（少删除一个元素就是加一个元素）
生成新的食物
五、gameover
撞墙判定
装自己判定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#canvas{
box-shadow: 0 5px 40px black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); //构造对象方块
function Rect (x,y,w,h,color) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
//画方块的方法
Rect.prototype.draw = function () {
context.beginPath();
context.fillStyle = this.color;
context.rect(this.x,this.y,this.w,this.h);
context.fill();
context.stroke();
}
//构造对象蛇
function Snake () {
//定义一个空数组存放组成整蛇的方块对象
var snakeArray = [];
//画出4个方块，设置成灰色
for (var i = 0; i < 4; i++) {
var rect = new Rect(i*20,0,20,20,"gray");
//之所以用splice（往前加）而不是用push（往后加），是为了让蛇头出现在数组第一个位置
snakeArray.splice(0,0,rect);
}
//把数组第一个作为蛇头，蛇头设成红色
var head = snakeArray[0];
head.color = "red";
//此处将两个后面常用的东西定为属性，方便后面调用
this.head = snakeArray[0]; //蛇头
