如何用HTML5制作贪吃蛇游戏
发布时间：2020-07-09 15:09:59
来源：亿速云
阅读：122
作者：Leah
如何用HTML5制作贪吃蛇游戏？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
本文介绍了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 &#
