Code
<!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;920px;background-color:rgb(223,223,223)"> </div> <div id="food_div_id" style="position:absolute;left:300px;top:230px;height:20px;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>