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

wujinjian2008n 2009-07-29 09:11:57

加精

昨天下午上班实在没事干。花了半天写了个贪吃蛇游戏。
在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>

...全文