html5贪吃蛇小游戏设计与实现,HTML贪吃蛇代码
游戏操作说明
通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。游戏具体实现
游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制每个方块的移动呢？ 如果观察蛇的移动，可以发现，从蛇的头部到尾部，每个方块在下一时刻的位置就是它的前一个方块在当前时刻
的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。另外一个值得注意的问题是
贪吃蛇吃下食物之后，新增加的方块应该放在哪个位置。
答案就是在下一时刻，新增加的方块应该出现在当前时刻的尾部位置。
因此，在吃下食物之后应该在更新蛇的每个位置之前，增加一个方块，并且将其位置设定在当前时刻的尾部位置。
然后在当前时刻更新出了新增方块之外的所有方块的位置
index.html
snake.js复制代码代码如下：
定义变量画布；
var ctx
定义变量定时器；
//度量值
var x _ cnt=15
var y _ cnt=15
定义变量单位=48;
var box _ x=0；
var box _ y=0；
var box_width=15 *单位；
var box_height=15 *单位；
var bound _ left=box _ x；
var bound _ right=box _ x box _ width
var bound _ up=box _ y；
var bound _ down=box _ y box _ height
//图像
var图像_精灵
//对象
定义变量蛇；
定义变量食物；
var food _ x；
var food _ y；
//函数
功能角色(sx，sy，sw，sh，方向、状态、速度、图像、旗帜)
{
this.x=sx
this.y=sy
this.w=sw
this.h=sh
this.direction=方向；
this.status=状态
this.speed=速度；
this.image=图像
this.flag=flag
}
功能转移（键码)
{
开关（键码)
{
案例37:
返回1;
案例38:
返回3;
案例39:
return 2；
案例40:
返回0;
}
}
函数添加食物()
{
//food _ x=box _ x math。地板(数学。random()*(box _ width-unit))；
//food _ y=box _ y数学。地板(数学。random()*(box _ height-unit))；
food _ x=单位*数学。地板(数学。random()* x _ CNT)；
food _ y=单位*数学。地板(数学。random()* y _ CNT)；
食物=新角色(food_x，food_y，unit，unit，0，0，0，image_sprite，true)；
}
功能播放（事件)
{
定义变量键码；
if (event==null)
{
键码=窗口。事件。关键代码；
窗户。事件。防止默认()；
}
其他
{
键码=事件。关键代码；
事件。防止默认()；
}
var cur _ direction=transfer(键码)；
蛇[0]。方向=当前方向
}
功能更新()
{
//在移动蛇之前向蛇添加新的部分
if (snake[0].x==food.x snake[0].y==food.y)
{
定义变量长度=蛇.长度
var tail _ x=snake[长度- 1]。x；
var tail _ y=snake[长度- 1]。y；
var tail=新角色(tail_x，tail_y，unit，unit，snake[length - 1]).方向，0，0，image_sprite，true)；
蛇.推(尾巴);
添加食物()；
}
//修改属性
//移动头部
开关(蛇[0]).方向)
{
案例0://向下
蛇[0]。y=单位；
if (snake[0].y上界_下单位)
蛇[0]。y=bound _ down-unit；
打破；
案例1://左
蛇[0]。x -=单位；
if (snake[0].x界_左)
蛇[0]。x=向左绑定
打破；
案例2://对
蛇[0]。x=单位；
if (snake[0].x界_右单位)
蛇[0]。x=bound _ right-unit；
打破；
案例3://上
蛇[0]。y -=单位；
if (snake[0].y bound_up)
蛇[0]。y=绑定_绑定
打破；
}
//移动蛇的其他部分
for(var I=snake。长度-1；I=0；我-)
{
如果(i 0)
//snake[i].方向=蛇[i-1].方向；
{
蛇[我]。x=snake[i - 1].x；
蛇[我]。y=snake[i - 1].y；
}
}
}
函数绘图场景()
{
ctx.clearRect(box_x，box_y，box_width，box _ height)；
ctx.strokeStyle=rgb(0，0，0 ；
ctx.strokeRect(box_x，box_y，box_width，box _ height)；
//检测冲突
//绘制图像
for(var I=0；我蛇。长度；我)
{
ctx.drawImage(image_sprite，snake[i]).x，蛇[我]。y)；
}
ctx.drawImage(image_sprite，food.x，food。y)；
}
函数初始化()
{
画布=文档。getelementbyid(“scene”)；
CTX=画布。获取上下文(“2d”)；
//图像
Image _ sprite=new Image()；
图像_精灵。src=图像/精灵。png ；
image_sprite.onLoad=function()
{}
//对象
snake=new Array()；
var head=新角色(0 *单位，0 *单位，单位，单位，5，0，1，image_sprite，true)；
蛇.推(头);
窗户。addevent侦听器( keydown ，play，false)；
添加食物()；
设置间隔(更新，300);//注意
setInterval(drawScene，30)；
}
相关阅读：html5贪吃蛇游戏使用63行代码完美实现
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。