jQuery写个贪吃蛇-原创手记-慕课网

都说码农都该有自己的博客，我也整个，这是第一次发。
自学JS/JQ半年多，半年前要是听说谁会用JS/JQ做个贪吃蛇我都会觉得他是大神，现在觉得，也就那样了。
最近没项目做，正好想到贪吃蛇我现在应该能做出来了。
说干就干，先不看别人的代码，自己搞，半天的时间搞定了。
偷个懒用JQ写的，也不知道有没有啥问题。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){     var hgn = 15;//横格数     var sgn = 10;//竖格数     var sc = 3;//初始蛇长     var sind = new Array;//蛇索引     var sd = 200;//速度     var fxcur = null;     var inv;     var dan_ind;//胆索引     var stop_onf = true;//暂停          $(".body").css({width:50*hgn+"px"});     $(".msg").css({width:$(".body").css("width")});     for(var i=0;i<hgn;i++){         for(var j=0;j<sgn;j++){             $(".body ul").append("<li></li>");         }     }     for(var i=0;i<sc;i++){         sind[i]=i;     }          dan();     she();     move();                     //绘蛇     function she(){         $("ul li").removeClass("she");         for(var i=0;i<sc;i++){             $("ul li:eq("+sind[i]+")").addClass("she");         }     }          //移动     function move(){         if(inv){             window.clearInterval(inv);         }         inv = window.setInterval(function(){             goway(fxcur);         },sd);     }          //移动开关     function stopmove(){         if(stop_onf){             if(inv){                 window.clearInterval(inv);             }             $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("STOP");         }else{             $(".msg").html("GO").animate({top:"-50px"});             move();         }         stop_onf = !stop_onf;     }          //结束     function gameover(){         if(inv){             window.clearInterval(inv);         }         $(".msg").animate({top:(parseInt($(".body").css("height"))/2-50)+"px"}).html("GAME OVER");     }          //判断撞到自己     function zsf(){         for(var i=0;i<sc-1;i++){             if(sind[sc-1]==sind[i]){                 gameover();                 return true;             }         }         return false;     }          //移动功能     function goway(fx){                  for(var i=0;i<sc-1;i++){             if(sind[sc-1]==sind[i]){                 gameover();                 return;             }         }                           if(fx=="you"){             if(sind[sc-1]+1==dan_ind){//吃胆                 scsc=sc+1;                 sind[sc-1]=dan_ind;                 dan();                 she();                 return;             }else if((sind[sc-1]+1)%hgn==0){//撞墙                 gameover();                 return;             }                          for(var i=0;i<sc;i++){                 if(i==sc-1){                     sind[i]=sind[i]+1;                     she();                     return;                 }                 sind[i]=sind[i+1];             }         }else if(fx=="xia"){             if(sind[sc-1]+hgn==dan_ind){//吃胆                 scsc=sc+1;                 sind[sc-1]=dan_ind;                 dan();                 she();                 return;             }else if(sind[sc-1]>hgn*sgn-hgn){//撞墙                 gameover();                 return;             }             for(var i=0;i<sc;i++){                 if(i==sc-1){                     sind[i]=sind[i]+hgn;                     she();                     return;                 }                 sind[i]=sind[i+1];             }         }else if(fx=="zuo"){             if(sind[sc-1]-1==dan_ind){//吃胆                 scsc=sc+1;                 sind[sc-1]=dan_ind;                 dan();                 she();                 return;             }else if((sind[sc-1])%hgn==0){//撞墙                 gameover();                 return;             }             for(var i=0;i<sc;i++){                 if(i==sc-1){                     sind[i]=sind[i]-1;                     she();                     return;                 }                 sind[i]=sind[i+1];             }         }else if(fx=="shang"){             if(sind[sc-1]-hgn==dan_ind){//吃胆                 scsc=sc+1;                 sind[sc-1]=dan_ind;                 dan();                 she();                 return;             }else if(sind[sc-1]<hgn){//撞墙                 gameover();                 return;             }             for(var i=0;i<sc;i++){                 if(i==sc-1){                     sind[i]=sind[i]-hgn;                     she();                     return;                 }                 sind[i]=sind[i+1];             }         }else{             return;         }                       }                         //判断是否吃到胆     function isdan(num){         if(num==dan_ind){             scsc=sc+1;             sind[sc-1]=num;             dan();         }     }               //按键     $(document).keydown(function(event){         var down_num = event.which;         var fx = null;         if(down_num==37){//左             fx = "zuo";         }else if(down_num==38){//上             fx = "shang";         }else if(down_num==40){//下             fx = "xia";         }else if(down_num==39){//右             fx = "you";         }else if(down_num==32){             stopmove();         }                  //需判断能否点击         if(fxcur=="shang"&&fx=="xia"||fxcur=="xia"&&fx=="shang"||fxcur=="zuo"&&fx=="you"||fxcur=="you"&&fx=="zuo"){             return;         }else{             fxfxcur = fx;         }              });          //绘胆     function dan(){         //需判断生成胆是否在蛇索引上                  dan_ind = parseInt(hgn*sgn*Math.random()-1);         for(var i=0;i<sc;i++){             if(dan_ind==sind[i]){                 dan();                 return;             }         }                  $("ul li").removeClass("dan");         $("ul li:eq("+dan_ind+")").addClass("dan");     }                }) </script> <style> /*整体设置*/ a:active {outline: none;star:expression(thisthis.onFocus=this.blur());} html{ overflow-y:scroll;} *{margin:0;padding:0;list-style:none;outline:none;word-wrap:break-word;} img{border:none} h1,h2,h3,h4,h5,h6,body,small{font-size:12px; font-weight:400; font-family:Arial,"宋体";} table{table-layout:fixed; border-collapse:collapse} a{ text-decoration:none;} body{ background:#fff;}  .body{ overflow:hidden; border:1px solid #666; position:absolute; left:250px; top:0;} li{ width:48px; height:48px; overflow:hidden; float:left; border:1px solid #666; background:#6C9;} li.she{ background:#069;} li.dan{ background:#0CF;} .tel{ font-size:24px;} .msg{ overflow:hidden; font-size:24px; color:#333; text-align:center; position:absolute; left:250px; top:0;} </style> </head>  <body> <div class="tel">方向键控制方向<br />空格键暂停</div> <div class="body"> <ul> </ul> </div> <div class="msg"></div>  </body> </html>