js网页小游戏源码
2009-12-14 17:04 iBlog 阅读(3630) 评论(0) 编辑 收藏 举报
代码
<!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">
//11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapSize
var mapSize=11;
//地图的大小
var mapWH=440;
//记录对方的ID
var computerID;
//这个方向是否可走
var isPath=true;
//记录四方位上距离对方的距离
var up=0;
var left=0;
var right=0;
var down=0;
//障碍物的最多个数(可重叠)
var za=3;
window.onerror=function()
{
alert("异常！点击确定重新开始");
window.location.href=window.location.href;
};
function createMap()
{
var x=Math.round(Math.random()*(mapSize-1)); //行
var y=Math.round(Math.random()*(mapSize-1)); //列
if(x==0)
x=x+1;
else if(x==(mapSize-1))
x=x-1;
if(y==0)
y=y+1;
else if(y==(mapSize-1))
y=y-1;
//var x=7;
//var y=2;
computerID=x+"_"+y;
var tabobj=document.createElement("table");
tabobj.style.width=mapWH+"px";
tabobj.style.height=mapWH+"px";
tabobj.border="1";
var tbodyobj=document.createElement("tbody");
for(var i=0;i<mapSize;i++)
{
var trobj=document.createElement("tr");
for(var j=0;j<mapSize;j++)
{
var tdobj=document.createElement("td");
tdobj.style.border="rgb(128,128,255) solid 1px";
tdobj.id=i+"_"+j
tdobj.onclick=tdClick;
if(i+"_"+j==computerID)
{
tdobj.style.backgroundColor="red";
}
var txt=document.createTextNode(" ");
tdobj.appendChild(txt);
trobj.appendChild(tdobj);
}
tbodyobj.appendChild(trobj);
}
tabobj.appendChild(tbodyobj);
document.getElementById("map_div").appendChild(tabobj);
//默认随机障碍物
for(var i=0;i<za;i++)
{
var _id=Math.round(Math.random()*(mapSize-1)) +"_"+ Math.round(Math.random()*(mapSize-1));
if(document.getElementById(_id).style.backgroundColor=="")
document.getElementById(_id).style.backgroundColor="gray";
}
for(var i=0;i<mapSize;i++)
{
document.getElementById(i+"_"+(mapSize-1)).style.border="rgb(223,223,223) solid 1px";
document.getElementById((mapSize-1)+"_"+i).style.border="rgb(223,223,223) solid 1px";
document.getElementById(i+"_0").style.border="rgb(223,223,223) solid 1px";
document.getElementById("0_"+i).style.border="rgb(223,223,223) solid 1px";
}
}
function tdClick()
{
if(this.style.backgroundColor=="")
{
this.style.backgroundColor="gray";
up=0;
left=0;
right=0;
down=0;
computerXZ();
}
}
function computerXZ()
{
var xy=computerID.split("_");
var x=xy[0]-0;
var y=xy[1]-0;
//中心位置
var mid=(mapSize-1)/2;
//左上角
if(x<=mid && y<=mid)
{
//向上
if(x<=y)
{
//向上不通,向左走 //false 表示是判断,true 表示行走
if(!computerUp(x,y,false))
{
//向左不通，向右走
if(!computerLeft(x,y,false))
{
//向右不通，向下走
if(!computerRight(x,y,false))
{
//向下不通，向下走(往最长的方向走)
if(!computerDown(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向左
{
if(!computerLeft(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerRight(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//右上角
else if(x<=mid && y>=mid)
{
if(x<=(mapSize-1-y)) //向上
{
if(!computerUp(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerDown(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向右
{
if(!computerRight(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerLeft(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//右下角
else if(x>=mid && y>=mid)
{
if(x>=y) //向下
{
if(!computerDown(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerUp(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向右
{
if(!computerRight(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerLeft(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//左下角
else if(x>=mid && y<=mid)
{
if((mapSize-1-x)<=y) //向下
{
if(!computerDown(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerUp(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向左
{
if(!computerLeft(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerRight(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
}
function direction(up,left,right,down,_x,_y)
{
if(up==0 && left==0 && right==0 && down==0)
{
alert("恭喜你，赢了！");
window.location.href=window.location.href;
}
else
{
var arrayDirection=new Array(up,left,right,down);
arrayDirection.sort(function(x,y){return y-x;})
//对方 往 离自己(对方)最远的那个障碍物走
if(up==arrayDirection[0])
computerUp(_x,_y,true);
else if(down==arrayDirection[0])
computerDown(_x,_y,true);
else if(left==arrayDirection[0])
computerLeft(_x,_y,true);
else if(right==arrayDirection[0])
computerRight(_x,_y,true);
}
}
//判断是否输了
function isDeath()
{
for(var i=0;i<mapSize;i++)
{
if(document.getElementById(i+"_"+(mapSize-1)).style.backgroundColor=="red" ||
document.getElementById((mapSize-1)+"_"+i).style.backgroundColor=="red" ||
document.getElementById(i+"_0").style.backgroundColor=="red" ||
document.getElementById("0_"+i).style.backgroundColor=="red" )
{
alert("想抓我，没门！");
window.location.href=window.location.href;
}
}
}
function computerUp(x,y,mode)//向上走
{
for(var i=x-1;i>=0;i--)
{
if(document.getElementById(i+"_"+y).style.backgroundColor=="")
{
isPath=true;
up++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById((x-1)+"_"+y).style.backgroundColor="red";
computerID=(x-1)+"_"+y;
isDeath();
return true;
}
return false;
}
function computerLeft(x,y,mode)//向左走
{
for(var i=y-1;i>=0;i--)
{
if(document.getElementById(x+"_"+i).style.backgroundColor=="")
{
isPath=true;
left++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById(x+"_"+(y-1)).style.backgroundColor="red";
computerID=x+"_"+(y-1);
isDeath();
return true
}
return false;
}
function computerRight(x,y,mode)//向右走
{
for(var i=y+1;i<mapSize;i++)
{
if(document.getElementById(x+"_"+i).style.backgroundColor=="")
{
isPath=true;
right++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById(x+"_"+(y+1)).style.backgroundColor="red";
computerID=x+"_"+(y+1);
isDeath();
return true
}
return false;
}
function computerDown(x,y,mode)//向下走
{
for(var i=x+1;i<mapSize;i++)
{
if(document.getElementById(i+"_"+y).style.backgroundColor=="")
{
isPath=true;
down++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById((x+1)+"_"+y).style.backgroundColor="red";
computerID=(x+1)+"_"+y;
isDeath();
return true;
}
return false;
}
</script>
</head>
<body onload="createMap();" style="font-size:10pt">
<form id="form1">
<center>
<br><br><br>
<div id="map_div"></div>
<br>
* 游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。
</center>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>wujinjian</title>
<script type="text/javascript">
//11 个单元格,每个单元格的大小就 等于 地图的大小(mapWH)/mapSize
var mapSize=11;
//地图的大小
var mapWH=440;
//记录对方的ID
var computerID;
//这个方向是否可走
var isPath=true;
//记录四方位上距离对方的距离
var up=0;
var left=0;
var right=0;
var down=0;
//障碍物的最多个数(可重叠)
var za=3;
window.onerror=function()
{
alert("异常！点击确定重新开始");
window.location.href=window.location.href;
};
function createMap()
{
var x=Math.round(Math.random()*(mapSize-1)); //行
var y=Math.round(Math.random()*(mapSize-1)); //列
if(x==0)
x=x+1;
else if(x==(mapSize-1))
x=x-1;
if(y==0)
y=y+1;
else if(y==(mapSize-1))
y=y-1;
//var x=7;
//var y=2;
computerID=x+"_"+y;
var tabobj=document.createElement("table");
tabobj.style.width=mapWH+"px";
tabobj.style.height=mapWH+"px";
tabobj.border="1";
var tbodyobj=document.createElement("tbody");
for(var i=0;i<mapSize;i++)
{
var trobj=document.createElement("tr");
for(var j=0;j<mapSize;j++)
{
var tdobj=document.createElement("td");
tdobj.style.border="rgb(128,128,255) solid 1px";
tdobj.id=i+"_"+j
tdobj.onclick=tdClick;
if(i+"_"+j==computerID)
{
tdobj.style.backgroundColor="red";
}
var txt=document.createTextNode(" ");
tdobj.appendChild(txt);
trobj.appendChild(tdobj);
}
tbodyobj.appendChild(trobj);
}
tabobj.appendChild(tbodyobj);
document.getElementById("map_div").appendChild(tabobj);
//默认随机障碍物
for(var i=0;i<za;i++)
{
var _id=Math.round(Math.random()*(mapSize-1)) +"_"+ Math.round(Math.random()*(mapSize-1));
if(document.getElementById(_id).style.backgroundColor=="")
document.getElementById(_id).style.backgroundColor="gray";
}
for(var i=0;i<mapSize;i++)
{
document.getElementById(i+"_"+(mapSize-1)).style.border="rgb(223,223,223) solid 1px";
document.getElementById((mapSize-1)+"_"+i).style.border="rgb(223,223,223) solid 1px";
document.getElementById(i+"_0").style.border="rgb(223,223,223) solid 1px";
document.getElementById("0_"+i).style.border="rgb(223,223,223) solid 1px";
}
}
function tdClick()
{
if(this.style.backgroundColor=="")
{
this.style.backgroundColor="gray";
up=0;
left=0;
right=0;
down=0;
computerXZ();
}
}
function computerXZ()
{
var xy=computerID.split("_");
var x=xy[0]-0;
var y=xy[1]-0;
//中心位置
var mid=(mapSize-1)/2;
//左上角
if(x<=mid && y<=mid)
{
//向上
if(x<=y)
{
//向上不通,向左走 //false 表示是判断,true 表示行走
if(!computerUp(x,y,false))
{
//向左不通，向右走
if(!computerLeft(x,y,false))
{
//向右不通，向下走
if(!computerRight(x,y,false))
{
//向下不通，向下走(往最长的方向走)
if(!computerDown(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向左
{
if(!computerLeft(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerRight(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//右上角
else if(x<=mid && y>=mid)
{
if(x<=(mapSize-1-y)) //向上
{
if(!computerUp(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerDown(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向右
{
if(!computerRight(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerLeft(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//右下角
else if(x>=mid && y>=mid)
{
if(x>=y) //向下
{
if(!computerDown(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerUp(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向右
{
if(!computerRight(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerLeft(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
//左下角
else if(x>=mid && y<=mid)
{
if((mapSize-1-x)<=y) //向下
{
if(!computerDown(x,y,false))
{
if(!computerLeft(x,y,false))
{
if(!computerRight(x,y,false))
{
if(!computerUp(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
else //向左
{
if(!computerLeft(x,y,false))
{
if(!computerDown(x,y,false))
{
if(!computerUp(x,y,false))
{
if(!computerRight(x,y,false))
{
direction(up,left,right,down,x,y)
}
}
}
}
}
}
}
function direction(up,left,right,down,_x,_y)
{
if(up==0 && left==0 && right==0 && down==0)
{
alert("恭喜你，赢了！");
window.location.href=window.location.href;
}
else
{
var arrayDirection=new Array(up,left,right,down);
arrayDirection.sort(function(x,y){return y-x;})
//对方 往 离自己(对方)最远的那个障碍物走
if(up==arrayDirection[0])
computerUp(_x,_y,true);
else if(down==arrayDirection[0])
computerDown(_x,_y,true);
else if(left==arrayDirection[0])
computerLeft(_x,_y,true);
else if(right==arrayDirection[0])
computerRight(_x,_y,true);
}
}
//判断是否输了
function isDeath()
{
for(var i=0;i<mapSize;i++)
{
if(document.getElementById(i+"_"+(mapSize-1)).style.backgroundColor=="red" ||
document.getElementById((mapSize-1)+"_"+i).style.backgroundColor=="red" ||
document.getElementById(i+"_0").style.backgroundColor=="red" ||
document.getElementById("0_"+i).style.backgroundColor=="red" )
{
alert("想抓我，没门！");
window.location.href=window.location.href;
}
}
}
function computerUp(x,y,mode)//向上走
{
for(var i=x-1;i>=0;i--)
{
if(document.getElementById(i+"_"+y).style.backgroundColor=="")
{
isPath=true;
up++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById((x-1)+"_"+y).style.backgroundColor="red";
computerID=(x-1)+"_"+y;
isDeath();
return true;
}
return false;
}
function computerLeft(x,y,mode)//向左走
{
for(var i=y-1;i>=0;i--)
{
if(document.getElementById(x+"_"+i).style.backgroundColor=="")
{
isPath=true;
left++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById(x+"_"+(y-1)).style.backgroundColor="red";
computerID=x+"_"+(y-1);
isDeath();
return true
}
return false;
}
function computerRight(x,y,mode)//向右走
{
for(var i=y+1;i<mapSize;i++)
{
if(document.getElementById(x+"_"+i).style.backgroundColor=="")
{
isPath=true;
right++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById(x+"_"+(y+1)).style.backgroundColor="red";
computerID=x+"_"+(y+1);
isDeath();
return true
}
return false;
}
function computerDown(x,y,mode)//向下走
{
for(var i=x+1;i<mapSize;i++)
{
if(document.getElementById(i+"_"+y).style.backgroundColor=="")
{
isPath=true;
down++;
}
else
{
isPath=false;
break;
}
}
if(isPath || mode)
{
document.getElementById(computerID).style.backgroundColor="";
document.getElementById((x+1)+"_"+y).style.backgroundColor="red";
computerID=(x+1)+"_"+y;
isDeath();
return true;
}
return false;
}
</script>
</head>
<body onload="createMap();" style="font-size:10pt">
<form id="form1">
<center>
<br><br><br>
<div id="map_div"></div>
<br>
* 游戏规则：别让红色方块跑到表格的边界上您就赢了，也就是说要将红色方框圈住。
</center>
</form>
</body>
</html>
本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名时邵猛（包含链接）。如您有任何疑问或者授权方面的协商，请给我留言。如果您觉得文章很有用，欢迎捐赠！【通过
】。
