对于javascript语言，经过一段时间努力，有些入门，所以捣鼓一些小游戏练手。和之前的canvas相比，只能说有些进步，对于游戏图层分布渐渐有了模糊的认知。
对于设计模式，编程开发，算法之类的，任重而道远了。
贪吃蛇小游戏代码有点乱，不过还是写了详细注释，希望对你们有帮助，高手勿喷，我是小白。
游戏设计思路：
1.开始 加速 重来三个按钮，分别触发不同事件
2.贪吃蛇运动，吃食物，碰到边界，路障，咬到自己身体
3.用div展示出来
其中主要是第二步，贪吃蛇运动逻辑。开始时候随机分配座标xy，然后分配运动方向，根据运动方向对x或者y座标进行叠加，那么就需要一个数组body来保存相对应的座标和颜色数据，但贪吃蛇要运动，所以需要setInterval计时器不断刷新数据并且保存进body中。
其次xy数据不断更新时候，就要判断贪吃蛇进行下一步碰到的是什么？空地？障碍物？食物？自己身体？所以就需要第二组障碍数组（多个div表示），一个食物对象{x:x,y:y,color:color}。有了三个数据，就可以根据他们的xy座标进行比对，相同就返回对应值。
最后，就是接收贪吃蛇xy座标，颜色等数据动态生成div，为了动起来，每次生成都要先进行界面刷新，删除之前的div，我使用的是removeChild直接删除div节点。
js代码
function $(id){return document.getElementById(id);}
window.οnlοad=function(){
//开始游戏
$('start_pause').οnclick=function(){
game();
this.disabled='true';
this.style.background='#4E85FC';
this.style.cursor='default';
this.style.color='#eee';
}
$('speed').οnclick=function(){
if(snake.speed<=40){return;}
snake.speed-=30;
clearInterval(snake.timer);
snake.move();
}
$('restart').οnclick=function(){
window.location.reload();
}
}
//游戏入口
function game(){
snake.init();
snake.move();
}
//贪吃蛇类
var snake={
food:{},//食物
hin:[],//障碍
body:[],//贪吃蛇身体数组
direction:1,//方向
speed:200,//速度
timer:null,//计时器
row:35,//行
col:35,//列
color:['red','blue','#888'],//颜色
pause:true,//暂停
board_div:function(i,j,color,f){
if(f){var fdiv=$('food');}
else{var odiv=$('content');}
var el=document.createElement('div');
el.id=i+j;
el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+color+';position:absolute;top:0;left:0;';
el.style.marginTop=j*10+'px';
el.style.marginLeft=i*10+'px';
if(f){fdiv.appendChild(el);}
else{odiv.appendChild(el);}
},
scDiv:function(){
for(var i=0;i<this.body.length;i++){
var sc=$(this.body[i].x+this.body[i].y);
var odiv=$('content');
odiv.removeChild(sc);
}
},
sfDiv:function(){
var sc=$(this.food.x+this.food.y);
var odiv=$('food');
odiv.removeChild(sc);
},
//初始化
init:function(){
this.hinder();//障碍物
//产生食物
var x=Math.floor(Math.random()*35);
var y=Math.floor(Math.random()*35);
//蛇头
var sx=Math.floor(Math.random()*25);
var sy=Math.floor(Math.random()*25);
for(var i=0;i<this.hin.length;i++){
if((sx==x&&sy==y)||(sx==this.hin[i].x&&sy==this.hin[i].y)||(x==this.hin[i].x&&y==this.hin[i].y)){
sx=Math.floor(Math.random()*25);
sy=Math.floor(Math.random()*25);
x=Math.floor(Math.random()*35);
y=Math.floor(Math.random()*35);
this.food={x:x,y:y};
}
}
this.body.push({x:sx,y:sy,color:this.color[0]});
this.board_div(x,y,this.color[1],true);//食物
this.board_div(this.body[0].x,this.body[0].y,this.body[0].color);
document.οnkeydοwn=function(){
//按键事件
e=event||window.event;
switch(e.keyCode){
case 38://up
if(snake.direction==2){break;}
snake.direction=0;
break;
case 39://right
if(snake.direction==3){break;}
snake.direction=1;
break;
case 40://down
if(snake.direction==0){break;}
snake.direction=2;
break;
case 37://left
if(snake.direction==1){break;}
snake.direction=3;
break;
}
}
},
move:function(){//移动
this.timer=setInterval(function(){
if(snake.canMove()==-1){clearInterval(snake.timer);alert('game over!!!');}
else{
snake.scDiv();//清除蛇
var _x=snake.nextPos().x;
var _y=snake.nextPos().y;
if(snake.canMove()==1){//食物
var _color=snake.color[0];
snake.body.unshift({x:_x,y:_y,color:_color});
snake.sfDiv();//清除食物
var x=Math.floor(Math.random()*35);
var y=Math.floor(Math.random()*35);
snake.food={x:x,y:y};
snake.board_div(x,y,snake.color[1],true);
}
else{
var _color=snake.nextPos().color;
}
snake.body.pop();//擦除蛇数组最后元素
snake.body.unshift({x:_x,y:_y,color:_color});
for(var i=0;i<snake.body.length;i++){
snake.board_div(snake.body[i].x, snake.body[i].y, snake.body[i].color);
}
}
},this.speed);
},
nextPos:function(){//移动下一步xy值
var x=this.body[0].x;
var y=this.body[0].y;
switch(this.direction){
case 0:y--;break;//up
case 1:x++;break;//right
case 2:y++;break;//down
case 3:x--;break;//left
}
return {x:x,y:y,color:this.body[0].color};
},
canMove:function(){//检查下一步
var x=this.nextPos().x;
var y=this.nextPos().y;//蛇头座标
if(x>=this.row||x<0||y>=this.col||y<0){return -1;}//边界
//头碰身体
for(var i=0;i<this.body.length;i++){
if(this.body[i].x==x&&this.body[i].y==y){
return -1;
}
}
//食物
if(this.food.x==x&&this.food.y==y){return 1;}
//障碍物
for (var i =0;i<this.hin.length;i++) {
if(this.hin[i].x==x&&this.hin[i].y==y){return -1;}
}
return 0;//空地
},
hinder:function(){//障碍
var hj=Math.floor(Math.random()*10+4);
var hi=Math.floor(Math.random()*10);
for(var i=hi;i<20;i++){
var hdiv=$('hinder');
var el=document.createElement('div');
el.id=i;
el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
el.style.marginTop=hj*10+'px';
el.style.marginLeft=i*10+'px';
hdiv.appendChild(el);
this.hin.push({x:i,y:hj,color:this.color[2]});
}
for(var i=hj;i<20;i++){
var hdiv=$('hinder');
var el=document.createElement('div');
el.id=i;
el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
el.style.marginTop=i*10+'px';
el.style.marginLeft=hj*10+'px';
hdiv.appendChild(el);
this.hin.push({x:hj,y:i,color:this.color[2]});
}
}
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>贪吃蛇javascript版本</title>
<script type="text/javascript" src="js/snake.js"></script>
<style type="text/css">
#main{width:400px;height: 420px; margin:0 auto;}
#content,#food,#hinder{width: 350px;height: 350px;margin-left: 25px;margin-top: 10px;position: relative;border:1px solid red;}
#food{margin-top: -352px;}
#hinder{margin-top: -352px;}
#inp{text-align: center;margin-top: 10px;}
input{width: 100px;height: 30px;outline: none;border:0;color: #fff;background: #4E85FC;font-size: 14px;cursor: pointer;}
input:hover{background: #0D58FC;}
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
<div id="food"></div>
<div id="hinder"></div>
<div id="inp">
<input type="button" id="start_pause" value="开始">
<input type="button" id="speed" value="速度">
<input type="button" id="restart" value="重新开始">
</div>
</div>
</body>
</html>