贪食蛇 改进版（代码量还是很大^_^偶水平还有限）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
 <HEAD>
  <TITLE> 贪食蛇*Andensy</TITLE>
  <script>
var mapWH = 660;
var size = 20;
var computerID ;
var snake;
var tail;
var length =0;
var olddir;
var direction="right" ;
var timer=200;
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()
{
snake = (size/2)+"_"+(size/2+1);
tail = (size/2)+"_"+(size/2);
var tableObj =  document.createElement("table");
tableObj.style.width = mapWH +"px";
tableObj.style.height = mapWH+"px";
tableObj.border="1px";
var tbodyObj = document.createElement("tbody");
for(var i=0 ;i<size;i++)
{
var trObj=document.createElement("tr");
for(var 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";
}
if(i+"_"+j==tail)
{
 tdObj.style.backgroundColor="green";
}
var txt=document.createTextNode(" ");
tdObj.appendChild(txt);
trObj.appendChild(tdObj);
}
tbodyObj.appendChild(trObj);
}
tableObj.appendChild(tbodyObj);
document.getElementById("map_div").appendChild(tableObj);
suiJi();
}
function gamStart()
{
printSnake()
t =setTimeout ("gamStart()",timer);
}
function stopGam()
{
clearTimeout(t);
}
function printSnake()
{
var xy=snake.split("_");
var x=xy[0]-0;
var y=xy[1]-0;
var Eat=false;
if(y<size-1&y>0&x<size-1&x>0&!eatBody())
{
if(snake==computerID)
{
Eat=true;
suiJi();
length=length+1;
document.getElementById("num").value=length;
}
printHead();
printBody();
printTail(Eat); }else
{
alert("撞墙啦，你输了~^_^！您的战绩为："+length);
var l =location ;
location = l
}
}
function eatBody()
{
var xy=snake.split("_");
var x=xy[0]-0;
var y=xy[1]-0;
var flag=true;
if(coner.length>0)
{
for(var i=0;i<coner.length-2;i++)
{
var he=coner[i];
var te;
if(i==0)
{
te=tail;
}else
{
te=coner[i-1];
}
var axy=he.split("_");
var bxy=te.split("_");
var ax=axy[0]-0;
var bx=bxy[0]-0;
var ay=axy[1]-0;
var by=bxy[1]-0;
if(ax==bx)
{
if(ax==x)
{
if(ay>by)
{
if(y<=ay&y>=by) 
 {flag=false;
 break;
 }
}else if(ay<by)
{
if(y>=ay&y<=by)
{
flag=false;
break;
}
}
}
}else if(ay==by)
{
if(ay==y)
{
if(ax>bx)
{
if(x<=ax&x>=bx) 
 {flag=false;
 break;
 }
}else if(ax<bx)
{
if(x>=ax&x<=bx)
{
flag=false;
break;
}
}
}
}
}
}
if(!flag)
{
printHead();
alert("咬到尾巴啦，你输了~^_^！您的战绩为："+length);
var l =location ;
location = l
}

}
function printBody()
{
if(coner.length>0)
{
for(var i=1;i<coner.length;i++)
{
Body(coner[i],coner[i-1]);
}
}
}
function printTail(eat)
{
var head="";
if(coner.length>0)
{
head=coner[0];
}else
{
head=snake;
}
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";
}
if(!eat)
{
$(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";
}
if(!eat)
{
$(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";
}
if(!eat)
{
$(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";
}
if(!eat)
{
$(tail).style.backgroundColor="";
tx=tx-1;
tail=tx+"_"+ty;
}
}
if(tail==head)
{
var s=coner.shift();
}
}
}
function printHead()
{
var xy=snake.split("_");
var x=xy[0]-0;
var y=xy[1]-0;
$(x+"_"+y).style.backgroundColor = "green";
if(direction=="left")
{
y=y-1;
snake=x+"_"+y;
$(snake).style.backgroundColor="red";
}else if(direction=="up")
{
 x=x-1;
snake=x+"_"+y;
$(snake).style.backgroundColor="red";
}
else if(direction=="right")
{
y=y+1;
snake=x+"_"+y;
$(snake).style.backgroundColor="red";
}
else if(direction=="down")
{
x=x+1;
snake=x+"_"+y;
$(snake).style.backgroundColor="red";
}
}
function Body(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 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"&olddir!="left"&flag){
                coner.push(snake);
                direction="left";
                olddir="left";
            }
            break;
        case 38:
            if(olddir!="down"&olddir!="up"&flag){
                coner.push(snake);
                direction="up";
                olddir="up";
            }
            break;
        case 39:
            if(olddir!="left"&olddir!="right"&flag){
                coner.push(snake);
                direction="right";
                olddir="right";
            }
            break;
        case 40:
            if(olddir!="up"&olddir!="down"&flag){
                coner.push(snake);
                direction="down";
                olddir="down";
            }
            break;
    }
}
$=function(id){
return document.getElementById(id);
}
 </script>
 </HEAD>
 <body  onload="printMap()" onkeydown="listenKey(event)" style="font-size:10pt" >
 <form id="form1">
    <center>
 <br><br><br>
<div id="map_div"></div>
 <br>
*按空格键开始或暂停游戏，按↑、↓、←、→键控制方向<br>
成绩：<input type="text" id="num" />
 </center>
 </form>
 </body>
</HTML>
 

解决方案 »

  1.   

    有以下修改：
    1、浏览器兼容性，可以在火狐上运行
    2、判断吃尾巴事件，吃到尾巴时游戏结束
    3、暂停时继续按方向键蛇身增长bug
    4、连续按方向键蛇身增长bug
    5、重新整理几个函数，代码量有所下降不过，由于水平有限代码量依然很大。比起zswang前辈的即兴贪食蛇，依旧难望其项背，需继续努力！^_^
      

  2.   

    function listenKey(e){ 
        e = e || event; 
        document.get
    红色字体部分有问题
      

  3.   

    发现一个新的bug就是新出来的黑点出现在蛇身上的问题，出现在蛇身上的黑点只会一闪而过，然后就变成白色的了，如果没有注意看，能把你找死去
      

  4.   


    兴趣是最好的老师，楼主是很有希望的。建议：作为职业程序员要养成一些习惯
    1、代码要整洁 -- 包括递进、适当空白、注释；
    代码其实就是文档，虽然是由机器解析，但更多的时候是由人来编写和维护；
    代码更多是给人看的，而不是给机器，机器只知道按语法解析。2、用面向对象的方法开发
    面向对象是站在事物本身来思考问题，对这个事物内在属性和功能进行描述，抽象出数据间的关系；
    以该贪吃蛇为例，如果要改成单机两个人同时玩，加一个地图，那工作量会变大。
    而在我写的例子中，只需要new两个实例
    new Snake();
    new Snake();
    写程序其实就是分解问题和逐步求精的过程，面向对象能把问题分离出来。多动手就好了
      

  5.   


    那是我做测试的时候留下的残留物 o(╯□╰)o，copy的时候也要读读。
      

  6.   

    我试了下发现个bug 开始后你使劲狂按上下左右时 没吃到食物蛇也会变长