话不多说，请看代码：

！doctype html lang=' en ' Head meta charset=' utf-8 ' title snake/title link rel='样式表' href=' style . CSS ' script src=' http 3360 style . js '/script/Head body div id=' container '/div/body/html步骤1:初始化地图并创建一个snake圆。第二步：制造蛇，随机生产食物。第三步：让蛇移动。第四步：通过js绑定键盘事件，控制蛇的移动方向。

var box={width:50，height :50 }；//每一个方块的高度var snake=[]；//保存蛇每一节身体对应的spanvar DIR={ DIR_RIGHT:1，DIR_LEFT:2，DIR_TOP:3，DIR _ bottom :4 }；var dir=DIR .DIR _ BOOTHvar food=null/始终记录当前的食物window.onload=function(){ //1 .初始化地图initMap()；//2.创建蛇//2.5随机显示食物展示食物()；create Nake()；//3.让蛇动起来setInterval(蛇形移动，100);//4.控制蛇移动文件。on key up=function(e){ switch(e . key code){ case 37: DIR=DIR .目录_左打破；案例38:dir=DIR .目录顶部打破；案例39:dir=DIR .目录_右打破；案例40:dir=DIR .DIR _ BOOTH打破；} }};函数isInSnakeBody(左，上){ for(var I=0；isnake.length如果offsetTop==topsnake[i].offsetLeft==left){ 0返回true} }}//这种随机生成食物的方法效率低-随着蛇身体的增长，随机生成食物的时间会变慢函数show food(){ var con=document。getelementbyid(“容器”)；食物=文件。创建元素(“span”)；食物；食物。风格。宽度=盒子。宽度' px '；食物。风格。高度=盒子。高度“px”；定义变量左侧，顶部；做{ left=数学。楼层((2-2)门外)/包厢。宽度*数学。random())*框。宽度；top=数学。地板((重心偏移-2)/箱。身高*数学。random())*框。身高；} while(isisergebody(左，上));食物。风格。left=left ' pxfood . style . top=top ' pxcon . appendchild(食物);}函数initMap(){ var con=document。getelementbyid(“容器”)；var row=数学。地板(与/框的偏移量。宽度)；var rol=数学。地板(偏置灯/盒。高度)；var num=row * rol var newsan=null for(var I=1；i=numI){ NewSan=document。create element(' span ')；纽森。风格。宽度=盒子。宽度' px '；纽森。风格。高度=盒子。高度“px”；con . append child(NewSan)；} }函数create nake(){ var new body=null；var con=文档。getelementbyid(“容器”)；for(var I=1；I=5；I){新正文=文档。创建元素(“span”)；新身体。风格。宽度=盒子。宽度' px '；新身体。风格。高度=盒子。高度“px”；新身体。风格。左=(I-1)*框。宽度' px '；新身体。风格。top=' 0px新身体。类名='蛇'；con . appendchild(新身体)；蛇。push(new body)；} }函数蛇形移动(){ var con=document。getelementbyid(“容器”)；//蛇头移动var head=snake[蛇。长度-1]；var newTop=head.offsetTop，newLeft=head.offsetLeft开关(目录){ 0大小写目录.DIR _ left : newleft-=box。宽度；打破；案例目录DIR _ right : newleft=box。宽度；打破；案例目录DIR _ top : newtop-=box。身高；打破；案例目录DIR _ bottom :牛顿=箱。身高；打破；default:break} //如果超出边界，计算蛇头下一个位置的坐标if(newleftcon。offsetwithts-2-1){ NewLeft=0；} if(NewLeft 0){ NewLeft=con . offset with-2-box。宽度；} if(newtonp 0){ newtonp=con . offset light-2-box。身高；} if(NewTopcon。偏移ThEight-2-1){ NewTop=0；} //判断新蛇头的位置是不是在蛇身体里面//for(var I=0；是阿克。长度-1；i ){ //if(snake[i]).offsetLeft==new left take[I].offsetTop==newTop){ //alert('游戏结束！');//窗口。位置。href=窗口。位置。href//} //} //1.如果吃到食物if(newLeft==food。offsetleftnetwtop==食物。食物。类名='蛇'；推（食物);展示食物()；返回；} //2.如果没吃到//除蛇头外身体移动for(var I=0；是阿克。长度-1；蛇。风格。顶部=蛇[I 1]。偏移顶部“px”；蛇[i].offsetLeft ' px}头。风格。left=NewLeft ' px头部。风格。顶部=牛顿=牛顿px '；} * { padding:0margin:0 } html，正文{宽度：100%；高度：100%;} body { position : relative } div #容器{ position : absolutetop :0底部：0;左：0右：0右：0自动宽度宽度：800像素高度：500 pxborder:1px纯黑；font-size :0 px} span { display : inline-block；border:1px纯黑；盒子大小：边框盒子；} span。snake {位置：绝对；背景色：红色；} span。食物{位置：绝对；背景-颜色：蓝色；}最后的效果图如下：

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！