JS贪吃蛇代码点评（欢迎猛烈批评!）

Question

     经过几个工作闲暇时间的整理和网上各前辈写JS蛇的思路，自己用js写了一个贪吃蛇！
     网上的思路有很多，有的人的思路是建立二唯数组，然后去循环建立表格，然后保存所有活动范围的坐标!而我的思路我是用到了DOM元素的循环遍历，蛇用了p标签,食物用了span标签，希望各位能点评一下，哪些地方需要修改什么的，核心是简化代码和效率！让我的代码更能体现出一些面向对象的思想，欢迎各位严厉批评指正！非常感谢！
     需要补充一个功能那就是在我这个代码基础上如何判断蛇头！这个问题我一直没能想出来！
    
     代码如下：
    <script type="text/javascript">
var snake={
           st:500,//速度初始为0.5秒移动一次,数值越小速度越快！
   num:0,
      start:function(){//初始化,建立外围DIV框架，键盘事件,食物或蛇的初始数量和位置
       div=document.createElement('div');
  div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
       div.id='kj';
   div1=document.createElement('div');
  div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
       document.body.appendChild(div);
   document.body.appendChild(div1);
           div1.innerHTML='键盘上↑↓←→代表方向控制，小键盘上0加速，1减速，空格暂停!';
           document.onkeydown=function(e){snake.dir(e||window.event);}
       this.createshe(0,200);
           this.createshe(20,200);
           this.createfood();
          },
     pause:function(){//游戏暂停
       clearTimeout(this.tt);
      },
createfood:function(){//产生选区内的一个随机坐标的食物(SPAN标签)！
           this.x=Math.round(Math.random()*19)*20;
           this.y=Math.round(Math.random()*19)*20;
           this.p=document.getElementsByTagName("p");//获得所有蛇对象
   
   while(this.checkbody(this.x,this.y))
   {//进行循环判断，让随即生成的食物位置不能和蛇的位置重合，重合就重刷随机数！
           this.x=Math.round(Math.random()*19)*20;
           this.y=Math.round(Math.random()*19)*20;
   }
           this.food=document.createElement("span");
           this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
           this.food.style.left=this.x+"px";
           this.food.style.top=this.y+"px";
           document.getElementById('kj').appendChild(this.food);
          },
createshe:function(a,b){//用P标签创建蛇！
           var sna=document.createElement("p");
       sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
           sna.style.left=parseInt(a)+"px";
           sna.style.top=parseInt(b)+"px";
           this.x1=parseInt(a);
           this.y1=parseInt(b);
           document.getElementById('kj').appendChild(sna);
          },
      dir:function(e){//方向控制
       var edir;
       if(typeof(this.tt)!='undefined'){clearTimeout(this.tt);}//防止方向键多次键入导致速度不断增加!
       if(typeof(direction)!='undefined')
       {edir=Math.abs(direction-e.keyCode)==2?direction:e.keyCode;}//反向无效！
       else
       {edir=e.keyCode;}
           switch(edir)
       {
       case 37:this.gox = -20;this.goy=0;  direction=37; this.move(); break;//左
           case 39:this.gox = 20; this.goy=0;  direction=39; this.move(); break;//右
           case 38:this.gox = 0;  this.goy=-20;direction=38; this.move(); break;//上
           case 40:this.gox = 0;  this.goy=20; direction=40; this.move(); break;//下
           case 32:this.pause(); break;//暂停
           case 96:this.st=this.st-100;this.move();break;//加速
           case 97:this.st=this.st+100;this.move();break;//减速
           }
          },
     move:function(){//响应键盘进行移动的事件
       w=this.x1+this.gox;//每吃一次食物获得一次坐标
           h=this.y1+this.goy;
           if(w<0||w>=400||h<0||h>=400||this.checkbody(w,h))//进行边界检测和自身的碰撞检测
       {
       clearTimeout(this.tt);
       alert("Game over!吃了"+this.num+"个食物!");
       window.location.reload();//游戏结束重新刷新页面！
       }
           if(this.x1==this.x&&this.y1==this.y)
           {//判断蛇头是否遇到食物的位置，如果是就移除食物，重新生成，否则就是删除最开始建立的蛇，也就是蛇尾！
           document.getElementById('kj').removeChild(this.food);
           this.num++;
           this.createfood();
           }
           else
           {
           document.getElementById('kj').removeChild(this.p[0]);
           }
           this.createshe(w,h);
           this.tt=setTimeout("snake.move()",this.st);
      },
 checkbody:function(a,b){//检查蛇是否碰到自身的方法
           this.p=document.getElementsByTagName("p");
           for(var i=0,j=this.p.length;i<j;i++)
           { 
     if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true;
           }
                         }
}
window.onload=function(){
snake.start();
}
</script>

Answer 1

     虽然JS写贪吃蛇的代码是老掉牙的话题了，但是这个思路我个人认为可以做为很多初学者进级的一个很好的范例代码！但是苦于本人的水平，并没有能把那些代码写得很有思路和条理，尤其是把它写成OO的形式！所以更加希望各位踊跃参与评论，谢谢！

Answer 2

虽然没完全看懂代码，但是感觉还行，IE，CHROME，FF都测试通过！路过而已！

Answer 3

对于Javascript很感兴趣， 但是还没来得及学习， 额。。 呵呵 ， 楼主很强悍！  

Answer 4

前一两个月，论坛有个贪吃蛇，是用很多小DIV做的。
我提了一个建议，就是只用一个大的DIV作为大框，蛇和蛋都可以用绝对定位或相对定位的小DIV或SPAN来做。
现在看楼主这个，方法和我的建议一样。
整体代码也很短。一下也看不出有什么可以改得更好的。
要说简化代码，使JQ这样轻量级的框架当然是个好选择。不过这对效率又会有轻微影响，如果苛求的话，可以对JQ进行剪裁。但更主要的，是会影响本小游戏的独立性。
至于楼主说的蛇头，不知是什么意思，通过里面的W,H难道不可以得到蛇头坐标吗？

Answer 5

   谢谢您的建议，不用JQ的原因是希望能让初学者更好理解和学习，而蛇头真的不好判断，因为没有用数组保存蛇身的位置，蛇身都是动态DOM生成的，前进的原理是：按照加减标签SPAN的LEFT。TOP来绝对定位蛇的位置，新建一个蛇SPAN，就相应删除最开始建立的蛇SPAN，以达到视觉移动的效果，因此，蛇头总是在随机变化着的！我已经试过了。间接达到效果倒是可以：只需要加一句代码就可以，代码如下：
      checkbody:function(a,b){//检查蛇是否碰到自身的方法
           this.p=document.getElementsByTagName("p");
           for(var i=0,j=this.p.length;i<j;i++)
           { 
             if(i=j-1)this.p[i].style.background='purple';//非蛇头用紫色表示!但是这只能达到间接判断的效果，无法直接表示蛇头！
             if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true;
           }
                         }
问题是如何直接设置蛇头的位置呢？
     

Answer 6

哎，看来我的问题真的只能这样沉下去了。http://bbs.bccn.net/images/smilies/emot/em13.gif

Answer 7

不知道你想获得蛇头位置是想实现什么？说清楚点才可能帮你琢磨一下。
而且，你这样加上变色之后，这个函数就失效了。可以从中间的身体穿过去了。
如果先不说这个BUG，你可以通过和这个类似的方法，给蛇身的P设置自定义属性（不象这个颜色一样表现出来），需要的时候，在createshe之后判断一下P集里这个自定义属性，就能区别出蛇身和蛇头。

Answer 8

不好意思，不太理解你的意思，给蛇身的P设置自定义属性，这个具体该怎么操作，p是DOM元素，怎么设置自定义属性呢？望赐教！

Answer 9

theforever在吗，期待您能看见！不好意思，不太理解你的意思，给蛇身的P设置自定义属性，这个具体该怎么操作，p是DOM元素，怎么设置自定义属性呢？望赐教！

Answer 10

createshe ^_^ 这个名字取得有意思

Answer 11

    就一个贪吃蛇就把我头搞得大了，现在想把反方向键彻底禁止，比如前进过程的时候e.keyCode=37,如果此时按39，就无任何效果，可是我的代码里居然会变成加速的效果！如何彻底禁止反方向键的效果呢？望有人能帮我改进改进！

Answer 12

    最后再问一次：如何把反方向键彻底禁止，比如前进过程的时候e.keyCode=37,如果此时按39，就无任何效果，可是我的代码里居然会变成加速的效果！如何彻底禁止反方向键的效果呢？如果还没有人知道。我明天就结贴了！期待中...,非常感谢！

Answer 13

自定义属性？这个你不知道怎么加吗？看你这个代码写得不错，怎么反倒不知道这种基础知识呢，危险啊。
要增加和设置自定义属性，很简单：
假如创建oP是一个P元素后，只要用oP.自定义属性=5;　这样就可以了。过后就可以访问“oP.自定义属性”来得到你赋予的值。

Answer 14

  反方向键盘依然在起作用。每按一次反方向键，MOVE方法里的代码就多执行一次，并不能彻底禁止！按多了就自然起到了加速度的作用，虽然前面用了禁止反方向键，但是只能禁止方向，不能禁止其加速的影响！这个大家可以去测试一下就知道了！

Answer 15

     请问OP.自定义属性加到哪里去呢，蛇头判断根本无法用这个来执行，因为蛇头就是最后一个创建的span，也就是说蛇头一直在改变，每移动一步，蛇头总是那个新建立的span标签，很难对其进行定位！你给某个span加自定义属性了，移动一步，这个span就变成了蛇身了，你的这个思路我也想过，就是因为蛇头总是在不断变化着的，所以我只好放弃这个思路了。也许你会说再建立一个对象来保存蛇头的状态，但是这个好象也不好设计，最起码并没有您描述的这么简单！

Answer 16

     也许有人会说用this.w或this.h来定位，确实如此，按照代码来看，似乎很简单，就是this.w和this.h来定位蛇头的，但是大家考虑过没有，这个w,h在移动一步过后立刻就不再是蛇头位置，而是蛇身，你也许可以暂时保存这个w,h位置，但是保存它豪无意义，因为下一刻w,h的位置立刻就变成了蛇身的位置，甚至连蛇身都不是，也许此时有人会想到用保存这个span元素对象，那同理，这个span下一刻就是蛇身了，保存了也不管用！给其设置任何自定义属性，到下一刻就等于给蛇身设置了，而不是蛇头，大家别以为思路很简单，本来以上2个方法最起码反复测试过10几次了，改写过各种可能的方法都失败了，我知道方法一定是有的，但是思路应该不是这样！

Answer 17

其实蛇头的设置我已经完成了，无非思路方法比较抽象，以至于我自己也不认为完成了！
checkbody:function(a,b){//检查蛇是否碰到自身的方法
  this.p=document.getElementsByTagName("p");
  for(var i=0,j=this.p.length;i<j;i++)
  { 
  if(i=j-1)this.p[i].style.background='purple';//非蛇头用紫色表示!但是这只能达到间接判断的效果，无法直接表示蛇头！
  if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true;
  }
  }
if(i=j-1)this.p[i].style.background='purple';//非蛇头用紫色表示!但是这只能达到间接判断的效果，无法直接表示蛇头！这句已经达到了效果，通过设置蛇身的紫颜色以区别于蛇头的红色！
而蛇头其实就是开始的时候去设置了：这句即可：
 sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
这个就是设置蛇头的，虽然看着别扭，但是确实已经达到效果！
  
   现在关键是如何彻底禁止反方向键了！

Answer 18

彻底禁止反方向效果,思考了好长时间,改来改去终于完成了!
<script type="text/javascript">
var snake={
           st:500,//速度初始为0.5秒移动一次,数值越小速度越快！
           num:0,
      start:function(){//初始化,建立外围DIV框架，键盘事件,食物或蛇的初始数量和位置
           div=document.createElement('div');
      div.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:20px;width:400px;height:400px;border:1px solid #000;";
           div.id='kj';
           div1=document.createElement('div');
      div1.style.cssText="position:absolute;margin:0;padding:0;left:300px;top:430px;width:400px;height:100px;";
           document.body.appendChild(div);
           document.body.appendChild(div1);
           div1.innerHTML='键盘上↑↓←→代表方向控制，小键盘上0加速，1减速，空格暂停!';
           document.onkeydown=function(e){
   e=e||window.event;
   snake.direction=Math.abs(snake.direction-e.keyCode)!=2?e.keyCode:snake.direction;
   if(Math.abs(snake.direction-e.keyCode)==2)return false;//彻底禁止反方向键，这句是核心！
   snake.dir();
    }
   
           this.createshe(0,200);
           this.createshe(20,200);
           this.createfood();   
          },
     pause:function(){//游戏暂停
           clearTimeout(this.tt);
          },
createfood:function(){//产生选区内的一个随机坐标的食物(SPAN标签)！
           this.x=Math.round(Math.random()*19)*20;
           this.y=Math.round(Math.random()*19)*20;
           this.p=document.getElementsByTagName("p");//获得所有蛇对象
           
           while(this.checkbody(this.x,this.y))
           {//进行循环判断，让随即生成的食物位置不能和蛇的位置重合，重合就重刷随机数！
           this.x=Math.round(Math.random()*19)*20;
           this.y=Math.round(Math.random()*19)*20;
           }
           this.food=document.createElement("span");
           this.food.style.cssText="position:absolute;width:20px;height:20px;background:green;border:1px solid #ccc;";
           this.food.style.left=this.x+"px";
           this.food.style.top=this.y+"px";
           document.getElementById('kj').appendChild(this.food);
          },
createshe:function(a,b){//用P标签创建蛇！
           var sna=document.createElement("p");
           sna.style.cssText="position:absolute;margin:0;padding:0;width:20px;height:20px;background:red;border:1px solid #ccc;";
           sna.style.left=parseInt(a)+"px";
           sna.style.top=parseInt(b)+"px";
           this.x1=parseInt(a);
           this.y1=parseInt(b);
           document.getElementById('kj').appendChild(sna);
          },
      dir:function(){//方向控制
           //var edir;
   if(typeof(this.tt)!='undefined'){clearTimeout(this.tt);}//防止方向键多次键入导致速度不断增加!
           //alert(snake.direction);
           switch(snake.direction)
           {
           case 37:this.gox = -20;this.goy=0;   this.move(); break;//左
           case 39:this.gox = 20; this.goy=0;   this.move(); break;//右
           case 38:this.gox = 0;  this.goy=-20; this.move(); break;//上
           case 40:this.gox = 0;  this.goy=20;  this.move(); break;//下
           case 32:this.pause(); break;//暂停
           case 96:this.st=this.st-100;this.move();break;//加速
           case 97:this.st=this.st+100;this.move();break;//减速
           }
          },
     move:function(){//响应键盘进行移动的事件
           w=this.x1+this.gox;//每吃一次食物获得一次坐标
           h=this.y1+this.goy;
           if(w<0||w>=400||h<0||h>=400||this.checkbody(w,h))//进行边界检测和自身的碰撞检测
           {
           clearTimeout(this.tt);
           alert("Game over!吃了"+this.num+"个食物!");
           window.location.reload();//游戏结束重新刷新页面！
           }
           if(this.x1==this.x&&this.y1==this.y)
           {//判断蛇头是否遇到食物的位置，如果是就移除食物，重新生成，否则就是删除最开始建立的蛇，也就是蛇尾！
           document.getElementById('kj').removeChild(this.food);
           this.num++;
           this.createfood();
           }
           else
           {
           document.getElementById('kj').removeChild(this.p[0]);
           }
           this.createshe(w,h);
           this.tt=setTimeout("snake.dir()",this.st);
          },
 checkbody:function(a,b){//检查蛇是否碰到自身的方法
           this.p=document.getElementsByTagName("p");
           for(var i=0,j=this.p.length;i<j;i++)
           { 
             if(this.p[i].style.left==a+"px"&&this.p[i].style.top==b+"px")return true;
           }
                         }
}
window.onload=function(){
snake.start();
}    
</script>