H5画布实现贪吃蛇游戏

本文介绍了H5画布实现的贪吃蛇游戏，并与大家分享，如下所示：

执行结果如下
实现这个想法：

ps：这只是一种思考方式，您可以详细地看到代码注释。

首先，先把蛇拔出来。

定义蛇的结构，用一个包含蛇（红色）和蛇（灰）的数组来保存一组矩形。
绘制蛇（初始状态）
两。蛇能量（钥匙）

蛇移动：只有从第一移动到最后。

画一个灰色方块，头位置和重叠。
这个盒子将被插入到一个数组中的位置arrar.splice头后面（0,1，矩形）
切成块的array.pop结束（）
蛇设置移动网格的方向
需要一个变量（方向）来保存方向。
朝一个方向移动，一次移动一个格子。
按键改变方向
三。随机交货

随意食物的位置
不需要在蛇身上决定食物。
四。吃的食物

判断食物和蛇是否重叠
元素数组（在元素中添加一个元素）
产生新的食物
五、结束

确定墙
假装法官

文件

#帆布{
阴影：0 5px 40px黑盒；
}

VaR的画布document.getelementbyid（'canvas）；
VaR上下文= canvas.getcontext（二维的）；

构建对象框
函数（x，Y，W的矩形，H，颜色）{
这个；
这个，y = y；
这个；
这个；
this.color =颜色；
}
绘画盒的方法
（rect.prototype.draw =功能）{
Context.beginPath（）；
context.fillstyle = this.color；
（这context.rect。X，Y，W，这，这，H）；
Context.fill（）；
context.stroke（）；
}

构建对象蛇
函数蛇（）{

定义一个空数组存储框，包含整个蛇对象。
无功snakearray = { }；

将4个盒子装成灰色
对于（var i = 0；i < 4；i + +）{
VaR矩形=新矩形（我20,0,20,20，灰色）；
拼接的原因是向前的，而不是推（后面加），是让蛇出现在第一个位置数组中。
SnakeArray.splice（0,0，矩形）；
}

第一个数组是一个头部，一条红色的蛇
VaR的头= snakearray { 0 }；
head.color =红色；

这两个背后的共同财产作为财产，方便回电话。
this.head = snakearray { 0 }； / /。
this.snakearray = snakearray； / /蛇整个阵列

给予正确的初始位置（键码右箭头）
this.direction = 39；
}
方法{画一条蛇}
（snake.prototype.draw =功能）{
对于（var i = 0；i < this.snakearray.length；i++）{
这个snakearray {我}画（）；
}
}
蛇移动/方法
（snake.prototype.move =功能）{

这是移动蛇的核心部分。
1，灰色框，头位置和重叠
2，数组中位置后面的插头盒。
3，切到正方形的末端
4，将指向一个方向。
VaR矩形=新矩形（这个头。X，这个头。Y，这个头。W，这个头。H，灰色）；
this.snakearray.splice（1,0，矩形）；

/ /是否要吃的食物，写在iseat决策函数结束
吃食物要给/位置，不要切到最后一段，即蛇长。
不要在一天结束时吃/切，也就是蛇的长度。
如果（iseat（））{
食物=新getrandomfood（）；
其他{ }
This.snakeArray.pop（）；
}

/移动方向，设置头38, 37左，右39，40。
开关（这个方向）{
案例37：
这个。头。
打破；
案例38：
这个。头。y =这个。头。h。
打破；
案例39：
这个。头。
打破；
案例40：
这个。头。y =这个。头。h。
打破；
违约:
打破；
}

确定 / /结束
/墙
如果（这个头。X canvas.width这个头。X canvas.height这个头。Y | | | | > < 0）{
ClearInterval（定时器）；
}

打自己，周期从1年初开始，与蛇蛇回避。
对于（var i = 1；i < this.snakearray.length；i++）{
如果（这。snakearray {我}，x = =这个头。X本。snakearray {我}，y = =这个头。Y）{
ClearInterval（定时器）；
}
}
}

绘制/初始蛇
新毒蛇（）
Snake.draw（）；

绘制初始食物
VaR食物=新getrandomfood（）

定时器
VaR定时器= setInterval（）函数（）{
context.clearrect（0,0，canvas.width，帆布，高度）；
food.draw（）；
Snake.move（）；
Snake.draw（）；
}，100）

键盘事件，如果决定是让蛇不能直接转
document.onkeydown =功能（e）{
VaR EV = E | | window.event；
开关（EV。键码）{
案例37：{
如果（snake.direction！= 39）{
snake.direction = 37；
}
打破；
}
案例38：{
If (snake.direction! = 40）{
snake.direction = 38；
}
打破；
}
案例39：{
如果（snake.direction！= 37）{
snake.direction = 39；
}
打破；
}
案例40：{
如果（snake.direction！= 38）{
snake.direction = 40；
}
打破；
}
}
Ev.preventDefault（）；
}

随机函数，{最小，最大}范围
功能getnumberinrange（min，max）{
var范围=最大分钟；
VAR r = Math.random（）；
返回math.round（R *范围+分钟）
}

/食物对象构造
功能getrandomfood（）{

确定食物是否出现在蛇身上，如果是巧合的话，再重新生成。
无功isonsnake =真；

食物/随机位置设置
而（isonsnake）{
执行第一个标准设置为false后，如果判断不一致，则不执行以下语句
isonsnake = false；
无功indexx = getnumberinrange（0，画布宽度/ 20-1）；
无功indexy = getnumberinrange（0，帆布，身高 / 20-1）；
VaR矩形=新矩形（indexx×20，indexy×20, 20, 20，绿色）；
对于（var i = 0；i < snake.snakearray.length；i++）{
如果（蛇。snakearray {我}，x = =如果X的蛇。snakearray {我}，y = =如果y）{
如果将该值设为true，则为
isonsnake =真；
打破；
}
}
}
/ /返回Rect，食品绘制方法实例化对象
返回Rect；
}

确定吃的食物，坐标和坐标相一致的贪吃蛇食物。
功能iseat（）{
如果（蛇，头= X =食物= X蛇。头部。=食物= Y）{
返回true；
{人}
返回false；
}
}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。