[散分]自己写了个(javascript)贪吃蛇游戏。

昨天下午上班实在没事干。花了半天写了个贪吃蛇游戏。
在IE6、7、8 ，火狐 ，opera 均通过。源码：<!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>wujinjian</title>
<script type="text/javascript"> var snake_arr=new Array();
var snakeBodyW_H=20; //蛇身大小
var direction="right";
var sd; //速度
var footDivObj;
var mapDivObj;
var footnum=0;
var footMaxnum=10; //吃到10颗食物过关
var timer; function resetStart(_sd,mode)
{
document.getElementById("start_bt_id").disabled=true; if(mode=="first")
document.getElementById("tx_id").value="第 1 关"; for(var i=0;i<snake_arr.length;i++)
{
document.body.removeChild(snake_arr[i]);
} snake_arr.splice(0,snake_arr.length); //删除所有的元素 footnum=0;
direction="right";
isStop=false;
sd=_sd; startGame();
} function addSnakeBody()
{
snake_arr[snake_arr.length]=createSnakeBody();
} function createSnakeBody()
{
var snakeDiv=document.createElement("div"); snakeDiv.style.position="absolute";
snakeDiv.style.left="120px";
snakeDiv.style.top="300px";
snakeDiv.style.width=snakeBodyW_H+"px";
snakeDiv.style.height=snakeBodyW_H+"px"; document.body.appendChild(snakeDiv); return snakeDiv;
} function startGame()
{
//初始化蛇身的个数，这里是3个
addSnakeBody();
addSnakeBody();
addSnakeBody(); snakeMove();
} function snakeMove()
{
timer=setTimeout("snakeMove()",sd); var last=snake_arr[snake_arr.length-1];

//把最后一个元素移到第一个
for(var i=snake_arr.length-1;i>0;i--)
{
snake_arr[i]=snake_arr[i-1];
snake_arr[i].style.backgroundColor="red";
snake_arr[i].style.border="white solid 1px";
}
snake_arr[0]=last; var first=snake_arr[0];
var second=snake_arr[1];

first.style.backgroundColor="blue"; var _left=second.style.left.replace("px","")-0;
var _top=second.style.top.replace("px","")-0;

if(footDivObj==null)
footDivObj=document.getElementById("food_div_id"); if(mapDivObj==null)
mapDivObj=document.getElementById("map_id"); if(direction=="left")
{
first.style.left=_left-snakeBodyW_H+"px";
first.style.top=_top+"px";

//判断是否吃到食物
isDivSuperpose(first,footDivObj);
//判断失败
isKill(first,mapDivObj);
}
else if(direction=="up")
{
first.style.left=_left+"px";
first.style.top=_top-snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj);
isKill(first,mapDivObj);
}
else if(direction=="right")
{
first.style.left=_left+snakeBodyW_H+"px";
first.style.top=_top+"px"; isDivSuperpose(first,footDivObj);
isKill(first,mapDivObj);
}
else if(direction=="down")
{
first.style.left=_left+"px";
first.style.top=_top+snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj);
isKill(first,mapDivObj);
}
}

function keyDown(e)
{
if(e.keyCode==37)  //向左
{
if(direction!=="right")
direction="left";
}
else if(e.keyCode==38)  //向上
{
if(direction!=="down")
direction="up";
}
else if(e.keyCode==39) //向右
{
if(direction!=="left")
direction="right";
}
else if(e.keyCode==40)  //向下
{
if(direction!=="up")
direction="down";
}
} function isKill(snakeDivObj,_mapDivObj)
{
var snakeDivLeft = snakeDivObj.style.left.replace("px","")-0;
var snakeDivTop = snakeDivObj.style.top.replace("px","")-0; var _mapDivLeft = _mapDivObj.style.left.replace("px","")-0;
var _mapDivTop = _mapDivObj.style.top.replace("px","")-0;
var _mapDivWidth = _mapDivObj.style.width.replace("px","")-0;
var _mapDivHeight = _mapDivObj.style.height.replace("px","")-0; if(snakeDivLeft+snakeBodyW_H>=_mapDivLeft+_mapDivWidth)
{
clearTimeout(timer);
alert("失败！");
document.getElementById("start_bt_id").disabled=false;
}
else if(snakeDivLeft<=_mapDivLeft)
{
clearTimeout(timer);
alert("失败！");
document.getElementById("start_bt_id").disabled=false;
}
else if(snakeDivTop<=_mapDivTop)
{
clearTimeout(timer);
alert("失败！");
document.getElementById("start_bt_id").disabled=false;
}
else if(snakeDivTop+snakeBodyW_H>=_mapDivTop+_mapDivHeight)
{
clearTimeout(timer);
alert("失败！");
document.getElementById("start_bt_id").disabled=false;
}
}

//食物
function food()
{
var randomnum1=Math.random();
var randomnum2=Math.random(); var foodx=Math.round(870 * randomnum1)+50;
var foody=Math.round(430 * randomnum2)+50; if(footDivObj==null)
footDivObj=document.getElementById("food_div_id");

footDivObj.style.left=foodx+"px";
footDivObj.style.top=foody+"px"; footnum=footnum+1; if(footnum==footMaxnum)
{
clearTimeout(timer);

alert("恭喜你进入下一关");
{
sd=sd-10; //速度

document.getElementById("tx_id").value="第 "+(document.getElementById("tx_id").value.split(" ")[1]-0+1)+" 关";
resetStart(sd,"next");
}
}
}

//判断蛇是否吃到食物 
function isDivSuperpose(snakeDivObj,_footDivObj)   
{
var rv=withInDivSuperpose(snakeDivObj,_footDivObj);
if(rv=="-111")
{
var rv2=withInDivSuperpose(_footDivObj,snakeDivObj);
if(rv2=="-111")
{
// no
}
else
{
//吃到食物
food();
addSnakeBody();
}
}
else
{
//吃到食物
food();
addSnakeBody();
}
}
function withInDivSuperpose(snakeDivObj,_footDivObj)  
{
/*div_1*/
//左上角
var divLeftTopX_1=snakeDivObj.style.left.replace("px","")-0;
var divLeftTopY_1=snakeDivObj.style.top.replace("px","")-0;
//右下角
var divRightBottomX_1=snakeDivObj.style.width.replace("px","")-0 + divLeftTopX_1;
var divRightBottomY_1=snakeDivObj.style.height.replace("px","")-0 + divLeftTopY_1;
//左下角
var divLeftBottomX_1=divLeftTopX_1;
var divLeftBottomY_1=divRightBottomY_1;
//右上角
var divRightTopX_1=divRightBottomX_1;
var divRightTopY_1=divLeftTopY_1; /*div_2*/
//左上角
var divLeftTopX_2=_footDivObj.style.left.replace("px","")-0;
var divLeftTopY_2=_footDivObj.style.top.replace("px","")-0;
//右下角
var divRightBottomX_2=_footDivObj.style.width.replace("px","")-0 + divLeftTopX_2;
var divRightBottomY_2=_footDivObj.style.height.replace("px","")-0 + divLeftTopY_2;
//左下角
var divLeftBottomX_2=divLeftTopX_2;
var divLeftBottomY_2=divRightBottomY_2;
//右上角
var divRightTopX_2=divRightBottomX_2;
var divRightTopY_2=divLeftTopY_2; if(divLeftTopX_2>=divLeftTopX_1 && divLeftTopY_2>=divLeftTopY_1 && divLeftTopX_2<=divRightBottomX_1 && divLeftTopY_2<=divRightBottomY_1)
{
//alert("111");
return "111";
}
else if(divRightTopX_2<=divRightTopX_1 && divRightTopY_2>=divRightTopY_1 && divRightTopX_2>=divLeftBottomX_1 && divRightTopY_2<=divLeftBottomY_1)
{
//alert("222");
return "222";
}
else if(divRightBottomX_2>=divLeftTopX_1 && divRightBottomY_2>=divLeftTopY_1 && divRightBottomX_2<=divRightBottomX_1 && divRightBottomY_2<=divRightBottomY_1)
{
//alert("333");
return "333";
}
else if(divLeftBottomX_2<=divRightTopX_1 && divLeftBottomY_2>=divRightTopY_1 && divLeftBottomX_2 >=divLeftBottomX_1 && divLeftBottomY_2<=divLeftBottomY_1)
{
//alert("444");
return "444";
}
else if(divLeftTopX_2<=divLeftTopX_1 && divLeftTopY_2<=divLeftTopY_1 && divRightBottomX_2>=divRightBottomX_1 && divRightBottomY_2>=divRightBottomY_1)
{
//alert("555");
return "555";
}

return "-111";
}
</script>
</head>
<body onkeydown="keyDown(event)" style="overflow:hidden" scroll="no">

<div id="map_id" style="position:absolute;left:50px;top:50px;height:480px;width:920px;background-color:rgb(223,223,223)">
</div> <div id="food_div_id" style="position:absolute;left:300px;top:230px;height:20px;width:20px;border:white solid 1px;background-color:red;">
</div> <input type="button" id="start_bt_id" value="Start" onclick="resetStart(100,'first')">
<input type="text" id="tx_id" readonly>
</body>
</html>

解决方案 »

  1.   

    貌似是半个位置。。强，我帮别人修改过用winform写的，
      

  2.   

    谢谢大家的测试。针对大家提出的问题：
    1.蛇身和食物不对齐。---已修改
    2.火狐不能用。---已修改再发一个修改后的代码：<!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>wujinjian</title>
    <script type="text/javascript"> var snake_arr=new Array();
    var snakeBodyW_H=20; //蛇身大小
    var direction="right";
    var sd; //速度
    var footDivObj;
    var mapDivObj;
    var footnum=0;
    var footMaxnum=10; //吃到10颗食物过关
    var timer; function resetStart(_sd,mode)
    {
    clearTimeout(timer); if(mode=="first")
    document.getElementById("tx_id").value="第 1 关"; for(var i=0;i<snake_arr.length;i++)
    {
    document.body.removeChild(snake_arr[i]);
    } snake_arr.splice(0,snake_arr.length); //删除所有的元素 footnum=0;
    direction="right";
    isStop=false;
    sd=_sd; startGame();
    } function addSnakeBody()
    {
    snake_arr[snake_arr.length]=createSnakeBody();
    } function createSnakeBody()
    {
    var snakeDiv=document.createElement("div"); snakeDiv.style.position="absolute";
    snakeDiv.style.left="120px";
    snakeDiv.style.top="100px";
    snakeDiv.style.width=snakeBodyW_H+"px";
    snakeDiv.style.height=snakeBodyW_H+"px"; document.body.appendChild(snakeDiv); return snakeDiv;
    } function startGame()
    {
    //初始化蛇身的个数，这里是3个
    addSnakeBody();
    addSnakeBody();
    addSnakeBody(); snakeMove();
    } function snakeMove()
    {
    timer=setTimeout("snakeMove()",sd); var last=snake_arr[snake_arr.length-1];

    //把最后一个元素移到第一个
    for(var i=snake_arr.length-1;i>0;i--)
    {
    snake_arr[i]=snake_arr[i-1];
    snake_arr[i].style.backgroundColor="red";
    snake_arr[i].style.border="white solid 1px";
    }
    snake_arr[0]=last; var first=snake_arr[0];
    var second=snake_arr[1];

    first.style.backgroundColor="blue"; var _left=second.style.left.replace("px","")-0;
    var _top=second.style.top.replace("px","")-0;

    if(footDivObj==null)
    footDivObj=document.getElementById("food_div_id"); if(mapDivObj==null)
    mapDivObj=document.getElementById("map_id"); if(direction=="left")
    {
    first.style.left=_left-snakeBodyW_H+"px";
    first.style.top=_top+"px";

    //判断是否吃到食物
    isDivSuperpose(first,footDivObj);
    //判断失败
    isKill(first,mapDivObj);
    }
    else if(direction=="up")
    {
    first.style.left=_left+"px";
    first.style.top=_top-snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj);
    isKill(first,mapDivObj);
    }
    else if(direction=="right")
    {
    first.style.left=_left+snakeBodyW_H+"px";
    first.style.top=_top+"px"; isDivSuperpose(first,footDivObj);
    isKill(first,mapDivObj);
    }
    else if(direction=="down")
    {
    first.style.left=_left+"px";
    first.style.top=_top+snakeBodyW_H+"px"; isDivSuperpose(first,footDivObj);
    isKill(first,mapDivObj);
    }
    }

    function keyDown(e)
    {
    if(e.keyCode==37)  //向左
    {
    if(direction!=="right")
    direction="left";
    }
    else if(e.keyCode==38)  //向上
    {
    if(direction!=="down")
    direction="up";
    }
    else if(e.keyCode==39) //向右
    {
    if(direction!=="left")
    direction="right";
    }
    else if(e.keyCode==40)  //向下
    {
    if(direction!=="up")
    direction="down";
    }
    } function isKill(snakeDivObj,_mapDivObj)
    {
    var snakeDivLeft = snakeDivObj.style.left.replace("px","")-0;
    var snakeDivTop = snakeDivObj.style.top.replace("px","")-0; var _mapDivLeft = _mapDivObj.style.left.replace("px","")-0;
    var _mapDivTop = _mapDivObj.style.top.replace("px","")-0;
    var _mapDivWidth = _mapDivObj.style.width.replace("px","")-0;
    var _mapDivHeight = _mapDivObj.style.height.replace("px","")-0; if(snakeDivLeft+snakeBodyW_H>_mapDivLeft+_mapDivWidth)
    {
    clearTimeout(timer);
    alert("失败！");
    }
    else if(snakeDivLeft<_mapDivLeft)
    {
    clearTimeout(timer);
    alert("失败！");
    }
    else if(snakeDivTop<_mapDivTop)
    {
    clearTimeout(timer);
    alert("失败！");
    }
    else if(snakeDivTop+snakeBodyW_H>_mapDivTop+_mapDivHeight)
    {
    clearTimeout(timer);
    alert("失败！");
    }
    }

    //食物
    function food()
    {
    var randomnum1=Math.random();
    var randomnum2=Math.random(); var foodx=Math.round(800 * randomnum1)+60;
    var foody=Math.round(400 * randomnum2)+60;


    if(foodx%snakeBodyW_H!=0)
    {
    foodx=foodx-foodx%snakeBodyW_H;
    }
    if(foody%snakeBodyW_H!=0)
    {
    foody=foody-foody%snakeBodyW_H;
    } if(footDivObj==null)
    footDivObj=document.getElementById("food_div_id");

    footDivObj.style.left=foodx+"px";
    footDivObj.style.top=foody+"px"; footnum=footnum+1; if(footnum==footMaxnum)
    {
    clearTimeout(timer);

    alert("恭喜你进入下一关");
    {
    sd=sd-10; //速度

    document.getElementById("tx_id").value="第 "+(document.getElementById("tx_id").value.split(" ")[1]-0+1)+" 关";
    resetStart(sd,"next");
    }
    }
    }

    //判断蛇是否吃到食物 
    function isDivSuperpose(snakeDivObj,_footDivObj)   
    {
    var rv=withInDivSuperpose(snakeDivObj,_footDivObj);
    if(rv=="-111")
    {
    var rv2=withInDivSuperpose(_footDivObj,snakeDivObj);
    if(rv2=="-111")
    {
    // no
    }
    else
    {
    //吃到食物
    food();
    addSnakeBody();
    }
    }
    else
    {
    //吃到食物
    food();
    addSnakeBody();
    }
    }
    function withInDivSuperpose(snakeDivObj,_footDivObj)  
    {
    /*div_1*/
    //左上角
    var divLeftTopX_1=snakeDivObj.style.left.replace("px","")-0;
    var divLeftTopY_1=snakeDivObj.style.top.replace("px","")-0;
    //右下角
    var divRightBottomX_1=snakeDivObj.style.width.replace("px","")-0 + divLeftTopX_1;
    var divRightBottomY_1=snakeDivObj.style.height.replace("px","")-0 + divLeftTopY_1;
    //左下角
    var divLeftBottomX_1=divLeftTopX_1;
    var divLeftBottomY_1=divRightBottomY_1;
    //右上角
    var divRightTopX_1=divRightBottomX_1;
    var divRightTopY_1=divLeftTopY_1; /*div_2*/
    //左上角
    var divLeftTopX_2=_footDivObj.style.left.replace("px","")-0;
    var divLeftTopY_2=_footDivObj.style.top.replace("px","")-0;
    //右下角
    var divRightBottomX_2=_footDivObj.style.width.replace("px","")-0 + divLeftTopX_2;
    var divRightBottomY_2=_footDivObj.style.height.replace("px","")-0 + divLeftTopY_2;
    //左下角
    var divLeftBottomX_2=divLeftTopX_2;
    var divLeftBottomY_2=divRightBottomY_2;
    //右上角
    var divRightTopX_2=divRightBottomX_2;
    var divRightTopY_2=divLeftTopY_2; if(divLeftTopX_2>divLeftTopX_1 && divLeftTopY_2>divLeftTopY_1 && divLeftTopX_2<divRightBottomX_1 && divLeftTopY_2<divRightBottomY_1)
    {
    //alert("111");
    return "111";
    }
    else if(divRightTopX_2<divRightTopX_1 && divRightTopY_2>divRightTopY_1 && divRightTopX_2>divLeftBottomX_1 && divRightTopY_2<divLeftBottomY_1)
    {
    //alert("222");
    return "222";
    }
    else if(divRightBottomX_2>divLeftTopX_1 && divRightBottomY_2>divLeftTopY_1 && divRightBottomX_2<divRightBottomX_1 && divRightBottomY_2<divRightBottomY_1)
    {
    //alert("333");
    return "333";
    }
    else if(divLeftBottomX_2<divRightTopX_1 && divLeftBottomY_2>divRightTopY_1 && divLeftBottomX_2 >divLeftBottomX_1 && divLeftBottomY_2<divLeftBottomY_1)
    {
    //alert("444");
    return "444";
    }
    else if(divLeftTopX_2<divLeftTopX_1 && divLeftTopY_2<divLeftTopY_1 && divRightBottomX_2>divRightBottomX_1 && divRightBottomY_2>divRightBottomY_1)
    {
    //alert("555");
    return "555";
    }

    return "-111";
    }
    </script>
    </head>
    <body onkeydown="keyDown(event)" style="overflow:hidden" scroll="no">

    <div id="map_id" style="position:absolute;left:60px;top:60px;height:460px;width:880px;background-color:rgb(223,223,223)">
    </div> <div id="food_div_id" style="position:absolute;left:200px;top:200px;height:18px;width:18px;border:white solid 1px;background-color:red;">
    </div> <input type="button" id="start_bt_id" value="Start" onclick="resetStart(100,'first')">
    <input type="text" id="tx_id" readonly>
    </body>
    </html>
      

  3.   

    1.蛇身和食物不对齐
    ===================
    这个只要乘以20再除以20就行了,不用%判断
    x = ramd(...)*20/20 
      

  4.   

    额,说错了,是除以20再乘以20
    x = ramd(...)/20*20 
      

  5.   

    var randomnum1=parseInt((Math.random()+20)/20)*20; 
    这样就可以了.
      

  6.   

    LZ 牛X  先支持下··
      

  7.   

    顶。我个朋友也做了个。javaScript实现。