收藏的js写的贪吃蛇
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>
原文地址：https://www.cnblogs.com/wanglinglong/p/1557331.html