网页特效代码大全
本站大部分代码都有演示效果（就在每页底部）
扫雷游戏脚本版
<html>
<head>
<title> </title>
<style type="text/css">
.sty01{font-family:Arial Black;font-size:16pt;text-align:center;border:1px solid green;background-color:#ffeeee}
.sty02{text-align:center;border:0px;background-color:#ffeeee;color:red}
</style>
<script type="text/javascript">
/**********************************扫雷计时****************************************/
date1= new Date();
date1.setHours(0);
date1.setMinutes(0);
date1.setSeconds(0);
var tm;
function update()
{
date1.setSeconds(date1.getSeconds()+1);
var
h=date1.getHours(),m=date1.getMinutes(),s=date1.getSeconds();
if(date1.getHours()<10) h="0"+date1.getHours();
if(date1.getMinutes()<10) m="0"+date1.getMinutes();
if(date1.getSeconds()<10) s="0"+date1.getSeconds();
tim=h+":"+m+":"+s;
document.getElementById("textTime").value=tim;
tm=setTimeout("update()",1000);
}
/**********************************************************************************/
</script>
<script type="text/javascript">
var bool=true;
var
colNumber=parseInt(prompt("请您设置雷区的共有多少列:",10));
// 设置雷区的列数目
var
rowNumber=parseInt(prompt("请您设置雷区的共有多少行:",10));
//设置雷区的行数目
var
mineCount=parseInt(prompt("您要设置多少雷",10));
//设置 仓库中地雷的数目
checkMineCount(); // 检查雷总数是不是有效的！
var
unitCount=colNumber*rowNumber; //求得单位总数
var unitIndex = new Array(unitCount+1); //设置一个标识数组一一对应雷区单元，用来标识单元是否以暴露！
var mine = new Array(mineCount);var mineSub=0; //雷索引与下标
var tool=mineCount;
//采雷工具数量
var total=0; //计算以探测过的单元总数
var mineIndex=-1; //用来获取玩家踩中雷的位置
/************************* 用setMine()函数 初使化地雷位置 ******************/
function setMine()
{
var count=mineCount;
document.getElementById("mineCount").value=mineCount; //雷总数输出
document.getElementById("tool").value=tool; //扫雷工具总数输出
for(var i=1;count>0;i++)
{
var rnum=Math.ceil( Math.random() * unitCount)
var setUnit = document.getElementById("unit"+rnum);
if(setUnit.name=="empty")
{
mine[mineSub]=document.getElementById("unit"+rnum);//为每一个雷建立雷索引
mineSub++;
unitIndex[rnum]=10;
setUnit.name="mine" //使此单元成为雷
count--; //设置一个雷以后，雷库就少了一个雷！
}
}
for(var i=0;i<document.frm.elements.length;i++)
{
check_alert(document.frm.elements);
}
bool=false;
document.getElementById("msg").value=total;
//最后面的文本提示
document.getElementById("sub").value=unitCount-mineCount-total;
}
/********************************处理玩家的探测单元事件*********************************/
function Catch(obj,evt)
{
if(evt.shiftKey || obj.style.backgroundColor=="green") //捕获玩家扫雷模式
{
getMine(obj);
return;
}
if(obj.name=="mine")
{ mineIndex=obj.id;
alert("Oh,你真倒霉！");
display();
displayErr();
clearTimeout(tm);
document.getElementById("lose").value="你败了，请再接再厉";
gameOver();
//调用游戏结束函数
}
else
{
var objIndex = check_alert(obj);
setStyle(obj);
if(unitIndex[objIndex])
{
obj.value="
"+unitIndex[objIndex]+" ";
}
if(total>=unitCount-mineCount)
{
clearTimeout(tm);
display();
alert("您赢了!");
}
}
}
/**************************获取单元附近的地雷总数,给玩家作提示用*****************************/
function check_alert(obj)
{
var num=parseInt(obj.id.substring(4)); //得到探测单元的标识数字
var upLeft = num - colNumber - 1; //左上角单元标识数字
var up = num - colNumber; //上方单元标识数字
var upRight = num - colNumber + 1; //右上角单元
var left = num -
1; //左方一单元标识数字
var right = num +
1;
//右方单元标识数字
var downLeft = num + colNumber - 1; //左下方标识
var down = num + colNumber; //下方标识
var downRight=num + colNumber + 1; //右下方标识
if(num % colNumber != 1 && num > colNumber)
//左上角有雷,则提示数加1
{
if(document.getElementById("unit"+upLeft).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[upLeft]==0 && !bool
&&document.getElementById("unit"+upLeft).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+upLeft));
}
}
if(num >
colNumber)
//上方有雷,则提示数加一
{
if(document.getElementById("unit"+up).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[up]==0 && !bool
&&document.getElementById("unit"+up).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+up));
}
else if(unitIndex[up]<10 && !bool
&&document.getElementById("unit"+up).style.backgroundColor!="green")
{
setStyleAlert(document.getElementById("unit"+up));
}
}
if(num%colNumber !=0 && num>colNumber)
//右上方有雷,则提示数加一
{
if(document.getElementById("unit"+upRight).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[upRight]==0 && !bool
&&document.getElementById("unit"+upRight).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+upRight));
}
}
if(num % colNumber != 1 ) //左边有雷,则提示数加一
{
if(document.getElementById("unit"+left).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[left]==0 && !bool
&&document.getElementById("unit"+left).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+left));
}
else if(unitIndex[left]<10 && !bool
&&document.getElementById("unit"+left).style.backgroundColor!="green")
{
setStyleAlert(document.getElementById("unit"+left));
}
}
if(num % colNumber != 0 ) //右边有雷,则提示数加一
{
if(document.getElementById("unit"+right).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[right]==0 && !bool
&&document.getElementById("unit"+right).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+right));
}
else if(unitIndex[right]<10 && !bool
&&document.getElementById("unit"+right).style.backgroundColor!="green")
{
setStyleAlert(document.getElementById("unit"+right));
}
}
if(num % colNumber != 1 && num <= unitCount - colNumber
) //左下角有雷,则提示数加一
{
if(document.getElementById("unit"+downLeft).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[downLeft]==0 && !bool
&&document.getElementById("unit"+downLeft).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+downLeft));
}
}
if(num <= unitCount - colNumber ) //下面有雷,则提示数加一
{
if(document.getElementById("unit"+down).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[down]==0 && !bool
&&document.getElementById("unit"+down).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+down));
}
else if(unitIndex[down]<10 && !bool
&&document.getElementById("unit"+down).style.backgroundColor!="green")
{
setStyleAlert(document.getElementById("unit"+down));
}
}
if(num % colNumber != 0 && num <= unitCount - colNumber
) //右下角有雷,则提示数加一
{
if(document.getElementById("unit"+downRight).name=="mine"
&& bool)
{
unitIndex[num]++;
}
else if(unitIndex[downRight]==0 && !bool
&&document.getElementById("unit"+downRight).style.backgroundColor!="green")
{
setStyle(document.getElementById("unit"+downRight));
}
}
return num;
}
/*******************************************游戏结束***************************/
function gameOver()
{
for(var i=0;i<document.frm.elements.length;i++)
{
document.frm.elements.disabled=true;
}
}
/**********************************重新开始********************************************/
function restart()
{
for(var i=0;i<document.frm.elements.length;i++)
{
window.location.replace("mine00.html");
}
}
/******************************显示所有雷的位置******************/
function display()
{
for(var i=0;i<mine.length;i++)
{
mine.style.border="2px solid white"
mine.style.backgroundImage="url('mine00.jpg')"
if(mine.id==mineIndex)
{
mine.style.border="2px solid red"; //突出踩中的雷
mine.style.backgroundImage="url('mine2.jpg')"
}
}
}
/******************************错误雷******************/
function displayErr()
{
for(var i=0;i<document.frm.elements.length;i++)
{ obj=document.frm.elements;
if(obj.style.backgroundColor=="green" &&
obj.name!="mine")
{
obj.style.border="2px solid orange"
obj.style.backgroundImage="url('err.jpg')"
}
}
}
/********************************设置空单元探测后的空样式*********************/
function setStyle(obj)
{
if(!obj.disabled)
{
obj.style.backgroundColor="white";
obj.style.border="2px solid white";
obj.disabled=true;
total++;
check_alert(obj); //本人也不是很理解,函数调用极限,呵呵!
}
}
/********************************设置空单元探测后的提示样式*********************/
function setStyleAlert(obj)
{
if(!obj.disabled)
{
obj.style.backgroundColor="white";
obj.style.border="2px solid white";
obj.value=" "+unitIndex[parseInt(obj.id.substring(4))]+"
";
obj.disabled=true;
total++;
}
}
/***********************用来检查雷数目是否合法**************************************/
function checkMineCount()
{
if(colNumber>40 || colNumber<5 || isNaN(colNumber))
{
alert("列数目要大于5 并且不能大于20");
colNumber=15;
}
if(rowNumber>40 || rowNumber<5 || isNaN(rowNumber))
{
alert("行数目要大于5 并且不能大于20");
rowNumber=15;
}
if(mineCount>=rowNumber*colNumber/2 || mineCount<5 || isNaN(mineCount))
{
alert("雷数目不能多于总单元的一半 或少于5个");
mineCount=5;
}
}
/*********************************玩家采雷动作**************************/
function getMine(obj)
{
if(obj.style.backgroundColor!="green")
{
obj.style.backgroundColor="green";
tool--;
document.getElementById("tool").value=tool;
}
else
{
obj.style.backgroundColor="#CCCC66";
tool++;
document.getElementById("tool").value=tool;
}
}
</script>
</head>
<body style="font-size:9pt;text-align:center;background-color:#ffeeee" onload="setMine();update()" oncontextmenu="return false" onselectstart ="return false" >
<marquee><span style="font-weight:bolder;font-size:12pt;color:blue">www.51who.com.cn扫雷运动协会: 欢迎大家踊跃参加扫雷活动！本活动口号是：<span
style="font-weight:bolder;font-size:12pt;color:red">让你们站着进来，躺着出去</span></b></marquee><br>
<input type="text" id="textTime" size='10' readonly
class="sty01">
<br><input type="button" value="重新开始"
style="border:1px solid green" onclick="restart()" >
<p>游戏规则:根据提示,把不是雷的单元全部找出来即可!<br>
单元中的数字代表该单元周过雷的总数目!<br>
<span style="color:red">扫雷模式：按住shift键后再单击元素就可以了采雷了</span>
<form name="frm" >
<script type="text/javascript">
for(var i=1;i<=unitCount;i++)
{
bid="unit"+i; //生成单元id
unitIndex=0; // 标识初始为0 (未探测过的)
document.write("<input
type='button' id="+bid+" value=' ' name='empty' onclick='Catch(this,event)' title='可能是雷哦' style='border:2px solid white;background-color:#CCCC66'>");
if( i % colNumber ==
0) //当单位是列的倍数就换行
{
document.write("<br>");
}
}
</script>
</form>
<img src="mine0.jpg" width="20" height="20" >扫雷标记<input type="text" id="tool" size='4' value="0" readonly class="sty02"><br>
<img src="33.jpg" width="20" height="20" >地雷总数<input type="text" id="mineCount" size='4' value="0" readonly class="sty02"><br>
您已经找出了<input type="text" id="msg" size='4' value="0" readonly class="sty02">个单元<br>
您只需再找出<input type="text" id="sub" size='4' value="0" readonly class="sty02">个单元就赢了
<br><input type="text" id="lose" size='20' readonly class="sty02"></p>
</body>
</html>
打印版本