本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：

实现效果如下

实现思路：

ps：这个只是思路，详细可看代码注释

一、先把蛇画出来

定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头(红)和蛇身(灰)。

画蛇(初始状态)

二、蛇能动(重点)

蛇移动方式：自始至终都只有蛇头在动

画一个灰色的方块，位置与蛇头重叠

将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)

砍去末尾的方块array.pop()

将蛇头向设定方向移动一格

需要一个保存方向的变量(direction)

根据方向进行移动，一次移动一个格

根据按键改方向

三、随机投放食物

需要随机食物的位置

需要判断食物在不在蛇身上。

四、吃食物

判断食物是否与蛇头重叠

数组加一个元素(少删除一个元素就是加一个元素)

生成新的食物

五、gameover

撞墙判定

装自己判定

Document

#canvas{

box-shadow: 0 5px 40px black;

}

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]; //蛇头

this.snakeArray = snakeArray; //整蛇数组

//给定初始位置向右(同keyCode右箭头)

this.direction = 39;

}

//画蛇的方法

Snake.prototype.draw = function () {

for (var i = 0; i < this.snakeArray.length; i++) {

this.snakeArray[i].draw();

}

}

//蛇移动的方法

Snake.prototype.move = function () {

//此处是核心部分，蛇的 移动方式

//1、画一个灰色的方块，位置与蛇头重叠

//2、将这个方块插到数组中蛇头后面一个的位置

//3、砍去末尾的方块

//4、将蛇头向设定方向移动一格

var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");

this.snakeArray.splice(1,0,rect);

//判断是否吃到食物，isEat判定函数写在最后了

//吃到则食物重新给位置，不砍去最后一节，即蛇变长

//没吃到则末尾砍掉一节，即蛇长度不变

if (isEat()){

food = new getRandomFood();

}else{

this.snakeArray.pop();

}

//设置蛇头的运动方向，37 左，38 上，39 右，40 下

switch (this.direction) {

case 37:

this.head.x -= this.head.w

break;

case 38:

this.head.y -= this.head.h

break;

case 39:

this.head.x += this.head.w

break;

case 40:

this.head.y += this.head.h

break;

default:

break;

}

// gameover判定

// 撞墙

if (this.head.x > canvas.width || this.head.x < 0 || this.head.y > canvas.height || this.head.y < 0){

clearInterval(timer);

}

// 撞自己，循环从1开始，避开蛇头与蛇头比较的情况

for (var i = 1; i < this.snakeArray.length; i++) {

if (this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){

clearInterval(timer);

}

}

}

//画出初始的蛇

var snake = new Snake()

snake.draw();

//画出初始的食物

var food = new getRandomFood()

//定时器

var timer = setInterval(function () {

context.clearRect(0,0,canvas.width,canvas.height);

food.draw();

snake.move();

snake.draw();

}, 100)

//键盘事件，其中的if判定是为了让蛇不能直接掉头

document.onkeydown = function (e) {

var ev = e||window.event;

switch(ev.keyCode){

case 37:{

if (snake.direction !== 39){

snake.direction = 37;

}

break;

}

case 38:{

if (snake.direction !== 40){

snake.direction = 38;

}

break;

}

case 39:{

if (snake.direction !== 37){

snake.direction = 39;

}

break;

}

case 40:{

if (snake.direction !== 38){

snake.direction = 40;

}

break;

}

}

ev.preventDefault();

}

//随机函数，获得[min,max]范围的值

function getNumberInRange (min,max) {

var range = max-min;

var r = Math.random();

return Math.round(r*range+min)

}

//构建食物对象

function getRandomFood () {

//判定食物是否出现在蛇身上，如果是重合，则重新生成一遍

var isOnSnake = true;

//设置食物出现的随机位置

while(isOnSnake){

//执行后先将判定条件设置为false，如果判定不重合，则不会再执行下列语句

isOnSnake = false;

var indexX = getNumberInRange(0,canvas.width/20-1);

var indexY = getNumberInRange(0,canvas.height/20-1);

var rect = new Rect(indexX*20, indexY*20, 20, 20, "green");

for (var i = 0; i < snake.snakeArray.length; i++) {

if(snake.snakeArray[i].x == rect.x && snake.snakeArray[i].y == rect.y){

//如果判定重合，将其设置为true，使随机数重给

isOnSnake = true;

break;

}

}

}

//返回rect，使得实例化对象food有draw的方法

return rect;

}

//判定吃到食物，即蛇头坐标与食物坐标重合

function isEat () {

if (snake.head.x == food.x && snake.head.y == food.y){

return true;

} else {

return false;

}

}