一个贪食蛇小游戏，欢迎大家提出意见

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 贪食蛇*Andensy</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
var mapWH=660;var size=50;var computerID;var snake;var tail;var length=1;var olddir;var direction;var piont;var timer=500;var coner=new Array();var flag=false;var t;function suiJi(){var a=Math.round(Math.random()*(size-1));var b=Math.round(Math.random()*(size-1));if(a==0){a=a+1}else{if(a==(size-1)){a=a-1}}if(b==0){b=b+1}else{if(b==(size-1)){b=b-1}}computerID=a+"_"+b;document.getElementById(computerID).style.backgroundColor="black"}function printMap(){var k=Math.round(Math.random()*(size-1));var h=Math.round(Math.random()*(size-1));if(k==0){k=k+1}else{if(k==(size-1)){k=k-1}}if(h==0){h=h+1}else{if(h==(size-1)){h=h-1}}computerID=k+"_"+h;snake=24+"_"+24;tail=24+"_"+23;var e=document.createElement("table");e.style.width=mapWH+"px";e.style.height=mapWH+"px";e.border="1";var g=document.createElement("tbody");var d=0;var b=0;for(d=0;d<size;d++){var f=document.createElement("tr");for(b=0;b<size;b++){var a=document.createElement("td");a.style.border="rgb(128,128,255) solid 1px";a.id=d+"_"+b;if(d==0||b==0|d==size-1|b==size-1){a.style.border="rgb(223,223,223) solid 1px"}if(d+"_"+b==snake){a.style.backgroundColor="red"}if(d+"_"+b==tail){a.style.backgroundColor="green"}if(d+"_"+b==computerID){a.style.backgroundColor="black"}var c=document.createTextNode(" ");a.appendChild(c);f.appendChild(a)}g.appendChild(f)}e.appendChild(g);document.getElementById("map_div").appendChild(e)}function gamStart(){printConer();t=setTimeout("gamStart()",timer)}function printConer(){printSnakeHead();if(coner.length>0){for(var a=0;a<coner.length;a++){if(a==0){printSnakeTail(coner[0],tail)}else{printSnake(coner[a],coner[a-1])}}}}function printSnakeHead(){var m=snake.split("_");var j=m[0]-0;var h=m[1]-0;if(h<size-1&h>0&j<size-1&j>0){if(snake==computerID){var a=tail.split("_");var e=a[0]-0;var c=a[1]-0;length++;$(j+"_"+h).style.backgroundColor="green";if(direction=="left"){h=h-1;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="up"){j=j-1;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="right"){h=h+1;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="down"){j=j+1;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{h=h+1;snake=j+"_"+h;$(snake).style.backgroundColor="red"}}}}suiJi();if(timer>400){timer=timer-50}else{if(timer<400){timer=timer-10}else{if(timer<300){timer=timer-5}else{if(timer<100){timer=timer-1}}}}}else{var k;var g;var f;$(j+"_"+h).style.backgroundColor="green";if(coner.length>0){var b=coner.length-1;if(coner[b]!=""&coner[b]!=null){k=coner[b].split("_");g=k[0]-0;f=k[1]-0;if(direction=="left"){for(var d=h;d<f;d++){$(j+"_"+d).style.backgroundColor="green"}h--;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="up"){for(var d=j;d>g;d++){$(d+"_"+h).style.backgroundColor="green"}j--;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="right"){for(var d=h;d>f;d--){$(j+"_"+d).style.backgroundColor="green"}h++;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="down"){for(var d=j;d>g;d--){$(d+"_"+h).style.backgroundColor="green"}j++;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{for(var d=h;d>f;d--){$(j+"_"+d).style.backgroundColor="green"}h++;snake=j+"_"+h;$(snake).style.backgroundColor="red"}}}}}}else{k=tail.split("_");g=k[0]-0;f=k[1]-0;if(direction=="left"){for(var d=h;d<f;d++){$(j+"_"+d).style.backgroundColor="green"}h--;f--;snake=j+"_"+h;$(tail).style.backgroundColor="";tail=g+"_"+f;$(snake).style.backgroundColor="red"}else{if(direction=="up"){for(var d=j;d>g;d++){$(d+"_"+h).style.backgroundColor="green"}j--;g--;snake=j+"_"+h;$(tail).style.backgroundColor="";tail=g+"_"+h;$(snake).style.backgroundColor="red"}else{if(direction=="right"){for(var d=h;d>f;d--){$(j+"_"+d).style.backgroundColor="green"}h++;f++;snake=j+"_"+h;$(tail).style.backgroundColor="";tail=j+"_"+f;$(snake).style.backgroundColor="red"}else{if(direction=="down"){for(var d=j;d>g;d--){$(d+"_"+h).style.backgroundColor="green"}j++;g++;$(tail).style.backgroundColor="";tail=g+"_"+h;snake=j+"_"+h;$(snake).style.backgroundColor="red"}else{for(var d=h;d>f;d--){$(j+"_"+d).style.backgroundColor="green"}h++;f++;snake=j+"_"+h;$(snake).style.backgroundColor="red";$(tail).style.backgroundColor="";tail=j+"_"+f}}}}}}}else{alert("\u649e\u5899\u5566\uff0c\u4f60\u8f93\u4e86~^_^\uff01\u60a8\u7684\u6218\u7ee9\u4e3a\uff1a"+length);var b=location;location=b}}function printSnakeTail(i,c){var f=i.split("_");var g=f[0]-0;var e=f[1]-0;var a=c.split("_");var d=a[0]-0;var b=a[1]-0;if(g==d){if(e>b){for(var h=b;h<e;h++){$(g+"_"+h).style.backgroundColor="green"}$(tail).style.backgroundColor="";b=b+1;tail=g+"_"+b}else{if(b>e){for(var h=b;h>e;h--){$(g+"_"+h).style.backgroundColor="green"}$(tail).style.backgroundColor="";b=b-1;tail=g+"_"+b}}if(tail==i){var k=coner.shift()}}else{if(e==b){if(g>d){for(var j=d;j<g;j++){$(j+"_"+e).style.backgroundColor="green"}$(tail).style.backgroundColor="";d=d+1;tail=d+"_"+b}else{if(g<d){for(var j=d;j>g;j--){$(j+"_"+e).style.backgroundColor="green"}$(tail).style.backgroundColor="";d=d-1;tail=d+"_"+b}}if(tail==i){var k=coner.shift()}}}}function printSnake(i,g){var e=i.split("_");var f=e[0]-0;var d=e[1]-0;var a=g.split("_");var c=a[0]-0;var b=a[1]-0;if(f==c){if(d>b){for(var h=b;h<=d;h++){$(f+"_"+h).style.backgroundColor="green"}}else{if(b>d){for(var h=b;h>=d;h--){$(f+"_"+h).style.backgroundColor="green"}}}}else{if(d==b){if(f>c){for(var j=c;j<=f;j++){$(j+"_"+d).style.backgroundColor="green"}}else{for(var j=c;j>=f;j--){$(j+"_"+d).style.backgroundColor="green"}}}}}function stopGam(){clearTimeout(t)}function listenKey(){if(window.event.keyCode==32){if(!flag){gamStart();flag=true}else{stopGam();flag=false}}else{if(window.event.keyCode==37){if(olddir!="right"){coner.push(snake);direction="left";olddir="left"}}else{if(window.event.keyCode==38){if(olddir!="down"){coner.push(snake);direction="up";olddir="up"}}else{if(window.event.keyCode==39){if(olddir!="left"){coner.push(snake);direction="right";olddir="right"}}else{if(window.event.keyCode==40){if(olddir!="up"){coner.push(snake);direction="down";olddir="down"}}}}}}}$=function(a){return document.getElementById(a)};  </script>
 </HEAD>
 <BODY  onkeydown="listenKey()" onload="printMap()">
    <center>
 <br><br><br>
<div id="map_div"></div>
 <br>
*按空格键开始或暂停游戏，按↑、↓、←、←键控制方向
 </center>
 </BODY>
</HTML>

解决方案 »

  1.   

    再把js代码粘一下，上面的是压缩过的：
          <script>
    var mapWH = 660;
    var size = 50;
    var computerID ;
    var snake;
    var tail;
    var length =1;
    var olddir;
    var direction ;
    var piont ;
    var timer=500;
    var coner = new Array();
    var flag = false;
    var t ;
    function suiJi()
    {
    var x=Math.round(Math.random()*(size-1));  //行
    var y=Math.round(Math.random()*(size-1));  //列
    if(x==0)
     x=x+1;
     else if(x==(size-1))
       x=x-1;
    if(y==0)
       y=y+1;
    else if(y==(size-1))
       y=y-1;
     computerID=x+"_"+y;
    document.getElementById(computerID).style.backgroundColor="black";
    }
    function printMap()
    {
    var x=Math.round(Math.random()*(size-1));  //行
    var y=Math.round(Math.random()*(size-1));  //列
     if(x==0)
      x=x+1;
     else if(x==(size-1))
       x=x-1;
    if(y==0)
       y=y+1;
    else if(y==(size-1))
                    y=y-1;
                computerID=x+"_"+y;
    snake = 24+"_"+24;
    tail = 24+"_"+23;
    var tableObj =  document.createElement("table");
    tableObj.style.width = mapWH + "px";
    tableObj.style.height = mapWH+ "px";
     tableObj.border="1";
     var tbodyObj = document.createElement("tbody");
     var i=0;
     var j=0;
    for(i=0 ;i<size;i++)
    {
    var trObj=document.createElement("tr");
    for(j=0 ;j<size;j++)
    {
    var tdObj = document.createElement("td");
     tdObj.style.border="rgb(128,128,255) solid 1px";
     tdObj.id=i+"_" +j;
     if(i==0 ||j==0|i==size-1|j==size-1)
     {
     tdObj.style.border="rgb(223,223,223) solid 1px";
     }
     if(i+"_"+j==snake)
                     {
      tdObj.style.backgroundColor="red";
      //tdObj.onkeydown=listenKey;
    }
     if(i+"_"+j==tail)
     {
     tdObj.style.backgroundColor="green";
     }
     if(i+"_"+j==computerID)
     {
     tdObj.style.backgroundColor="black";
     }
      var txt=document.createTextNode(" ");
     tdObj.appendChild(txt);
    trObj.appendChild(tdObj);
    }
     tbodyObj.appendChild(trObj);
    }
     tableObj.appendChild(tbodyObj);
      document.getElementById("map_div").appendChild(tableObj);
    }
    function gamStart()
    {
    printConer()
    t =setTimeout ("gamStart()",timer);
    }
    function printConer()
    {
    printSnakeHead();
    if(coner.length>0)
    {
    for(var i=0;i<coner.length;i++)
    {
    if(i==0)
    {
    printSnakeTail(coner[0],tail);
    }else
    {
    printSnake(coner[i],coner[i-1]);
    }
    }
    }
    }
    function printSnakeHead()
    {
    var xy=snake.split("_");
     var x=xy[0]-0;
                var y=xy[1]-0;
    if(y<size-1&y>0&x<size-1&x>0)
    {
    if(snake==computerID)
    {
     var txy = tail.split("_");
     var  tx = txy[0]-0;
     var  ty = txy[1]-0;
    length++;
    $(x+"_"+y).style.backgroundColor = "green";
    if(direction=="left")
    {
    y=y-1;
    snake=x+"_"+y;
    //tail =tx+"_"+(ty+1);
    //$(x+"_"+(y-1)).style.backgroundColor="green";
    $(snake).style.backgroundColor="red";
     }else if(direction=="up")
     {
     x=x-1;
     snake=x+"_"+y;
    // tail =(tx+1)+"_"+ty;
     $(snake).style.backgroundColor="red";
     }
     else if(direction=="right")
     {
     y=y+1;
     snake=x+"_"+y;
    // tail =tx+"_"+(ty-1);
     $(snake).style.backgroundColor="red";
     }
     else if(direction=="down")
     {
     x=x+1;
     snake=x+"_"+y;
    // tail =(tx-1)+"_"+ty;
    $(snake).style.backgroundColor="red";
     }else
     {
     y=y+1;
     snake=x+"_"+y;
     //tail =tx+"_"+(ty-1);
     $(snake).style.backgroundColor="red";
     }
     suiJi();
     if(timer>400)
    {
    timer=timer-50;
    }else if(timer<400)
    {
    timer=timer-10;
    }else if(timer<300)
    {
    timer =timer-5;
    }else if(timer<100)
    {
    timer = timer-1;
    }
    }else
    {
    var exy;
    var ex;
    var ey;
    $(x+"_"+y).style.backgroundColor = "green";
    if(coner.length>0)
    {
    var l = coner.length-1;
    if(coner[l]!=""&coner[l]!=null)
    {
     exy = coner[l].split("_");
     ex = exy[0]-0;
     ey = exy[1]-0;
      if(direction=="left")
    {
    for(var i=y;i<ey;i++)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y--;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }else if(direction=="up")
    {
     for(var i=x;i>ex;i++)
    {
    $(i+"_"+y).style.backgroundColor="green";
    }
     x--;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }else if(direction=="right")
    {
    for(var i=y;i>ey;i--)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y++;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }else if(direction=="down")
    {
     for(var i=x;i>ex;i--)
    {
    $(i+"_"+y).style.backgroundColor="green";
    }
     x++;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }else
    {
    for(var i=y;i>ey;i--)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y++;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }
    }
    }else
    {
     exy = tail.split("_");
     ex = exy[0]-0;
     ey = exy[1]-0;
      if(direction=="left")
    {
    for(var i=y;i<ey;i++)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y--;
    ey--;
    snake=x+"_"+y;
     $(tail).style.backgroundColor="";
    tail = ex+"_"+ey;
    $(snake).style.backgroundColor="red";
    }else if(direction=="up")
    {
     for(var i=x;i>ex;i++)
    {
    $(i+"_"+y).style.backgroundColor="green";
    }
     x--;
     ex--;
    snake=x+"_"+y;
    $(tail).style.backgroundColor="";
    tail = ex+"_"+y
    $(snake).style.backgroundColor="red";
    }else if(direction=="right")
    {
    for(var i=y;i>ey;i--)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y++;
    ey++;
    snake=x+"_"+y;
    $(tail).style.backgroundColor="";
    tail =x+"_"+ey;
    $(snake).style.backgroundColor="red";
    }else if(direction=="down")
    {
     for(var i=x;i>ex;i--)
    {
    $(i+"_"+y).style.backgroundColor="green";
    }
     x++;
     ex++;
     $(tail).style.backgroundColor="";
     tail=ex+"_"+y;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    }else
    {
    for(var i=y;i>ey;i--)
    {
    $(x+"_"+i).style.backgroundColor="green";
    }
    y++;
    ey++;
    snake=x+"_"+y;
    $(snake).style.backgroundColor="red";
    $(tail).style.backgroundColor="";
    tail=x+"_"+ey;
    }
    }

    }
    }else
    {
    alert("撞墙啦，你输了~^_^！您的战绩为："+length);
    var l =location ;
    location = l
    }
    }
    function printSnakeTail(head,ta)
    {
     var hxy = head.split("_");
      var hx = hxy[0]-0;
      var hy = hxy[1]-0;
      var txy= ta.split("_");
      var tx = txy[0]-0;
      var ty = txy[1]-0;
      if(hx==tx)
      {
    //同一行
    if(hy>ty)
    {
    for(var y=ty;y<hy;y++)
    {
    $(hx+"_"+y).style.backgroundColor = "green";
    }
    $(tail).style.backgroundColor="";
    ty=ty+1;
    tail=hx+"_"+ty;
    }else if(ty>hy)
    {
    for(var y=ty;y>hy;y--)
    {
    $(hx+"_"+y).style.backgroundColor = "green";
    }
    $(tail).style.backgroundColor="";
    ty=ty-1;
    tail=hx+"_"+ty;
    }

     if(tail==head)
    {
    var s=coner.shift();
    }
      }else if(hy==ty)
      {
    //同一列
    if(hx>tx)
    {
    for(var x=tx;x<hx;x++)
    {
    $(x+"_"+hy).style.backgroundColor = "green";
    }
    $(tail).style.backgroundColor="";
    tx=tx+1;
    tail=tx+"_"+ty;
    }else if(hx<tx)
    {
    for(var x=tx;x>hx;x--)
    {
    $(x+"_"+hy).style.backgroundColor = "green";
    }
    $(tail).style.backgroundColor="";
    tx=tx-1;
    tail=tx+"_"+ty;
    }
    if(tail==head)
    {
    var s=coner.shift();
    }
      }
    }
    function printSnake(head,tail)
    {
     var hxy = head.split("_");
      var hx = hxy[0]-0;
      var hy = hxy[1]-0;
      var txy= tail.split("_");
      var tx = txy[0]-0;
      var ty = txy[1]-0;
      if(hx==tx)
      {
    //同一行
    if(hy>ty)
    {
    for(var y=ty;y<=hy;y++)
    {
    $(hx+"_"+y).style.backgroundColor = "green";

    }
    }else if(ty>hy)
    {
    for(var y=ty;y>=hy;y--)
    {
    $(hx+"_"+y).style.backgroundColor = "green";
    }
    }
      }else if(hy==ty)
      {
    //同一列
    if(hx>tx)
    {
    for(var x=tx;x<=hx;x++)
    {
    $(x+"_"+hy).style.backgroundColor = "green";
    }
    }else
    {
    for(var x=tx;x>=hx;x--)
    {
    $(x+"_"+hy).style.backgroundColor = "green";
    }
    }
      }
    }
    function stopGam()
    {
    clearTimeout(t);
    }
    function listenKey()
    {
     if(window.event.keyCode==32)
     {
    if(!flag)
    {
    gamStart();
    flag = true;
    }else
    {
    stopGam();
    flag = false;
    }
    }else if(window.event.keyCode==37)
    {
    if(olddir!="right")
    {
    coner.push(snake);
    direction = "left";
    olddir = "left";
    }
    }else if(window.event.keyCode==38)
    {
    if(olddir!="down")
    {
    coner.push(snake);
    direction = "up";
    olddir= "up";
    }
    }
    else if(window.event.keyCode==39)
    {
    if(olddir!="left")
    {
    coner.push(snake);
    direction = "right"
    olddir= "right"
    }
    }
    else if(window.event.keyCode==40)
    {
    if(olddir!="up")
    {
    coner.push(snake);
    direction = "down";
    olddir = "down";
    }
    }
    }
    $=function(id){
    return document.getElementById(id);
    }
      </script>
      

  2.   

    呵呵,挺好的,不过我测出来一个bug.
    就是当前向下运动,我连续点击空格和向上箭头,这个时候这条蛇会向上运动,并且长度有所变化!
      

  3.   

    代码只能运行在ie，如下修改：
    function listenKey(e){
    e = e || event;
    document.get
    switch (e.keyCode || e.which || e.charCode) {
    case 32: // space
    if(!flag){
    gamStart();
    flag=true;
    }else {
    stopGam();
    flag=false;
    }
    break;
    case 37:
    if(olddir!="right"){
    coner.push(snake);
    direction="left";
    olddir="left";
    }
    break;
    case 38:
    if(olddir!="down"){
    coner.push(snake);
    direction="up";
    olddir="up";
    }
    break;
    case 39:
    if(olddir!="left"){
    coner.push(snake);
    direction="right";
    olddir="right";
    }
    break;
    case 40:
    if(olddir!="up"){
    coner.push(snake);
    direction="down";
    olddir="down";
    }
    break;
    }
    }<BODY onkeydown="listenKey(event)" onload="printMap()">还可以简化，至少是原来的1/3。楼主加油
      

  4.   

    是的，这个因为没有做啃自己尾巴的判断所以，这块是个bug，我会修改的，谢谢！
      

  5.   

    我是新手刚接触javascript，能把这个程序的思路说一下吗？那些小格子怎么画的？