当前页面: 开发资料首页 → Javascript 专题 → （Javascript醒目）在网页上写个扫雷吧:-D

（Javascript醒目）在网页上写个扫雷吧:-D

摘要: （Javascript醒目）在网页上写个扫雷吧:-D

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<script id="clientEventHandlersJS" language="javascript">

var cells = new Array(); //all cells list
var Bombs = 10; //bomb number
var Map = 10; //map size
var MaxNumber = 1000; //a magic number to indicate bomb

// call by DclickIt
// check double click in opened cell
function isSetColor(i)
{
if((document.getElementById("Dcell"+i)).style.background=="#00ccff") {
return 1;
}
return 0;
}

// double click a cell
function DclickIt(i)
{

if((document.getElementById("Dcell"+i)).style.background=="#cccccc") {
return;
}
if (cells[i] == 0) {
return;
}

else if (i+Map>(Map*Map-1)) { //last row
if (isSetColor(i-1) + isSetColor(i+1) + isSetColor(i-Map) + isSetColor(i-Map-1) + isSetColor(i-Map+1) == cells[i]){
if (isSetColor(i-1)==0)
if (clickIt(i-1)==1) return;
if (isSetColor(i+1)==0)
if (clickIt(i+1)==1) return;
if (isSetColor(i-Map)==0)
if (clickIt(i-Map)==1) return;
if (isSetColor(i-Map-1)==0)
if (clickIt(i-Map-1)==1) return;
if (isSetColor(i-Map+1)==0)
if (clickIt(i-Map+1)==1) return;
}
}

else{
if (isSetColor(i-1) + isSetColor(i+1) + isSetColor(i-Map) + isSetColor(i-Map-1) + isSetColor(i-Map+1)+ isSetColor(i+Map) + isSetColor(i+Map-1) + isSetColor(i+Map+1) == cells[i]){
if (isSetColor(i-1)==0)
if (clickIt(i-1)==1) return;
if (isSetColor(i+1)==0)
if (clickIt(i+1)==1) return;
if (isSetColor(i-Map)==0)
if (clickIt(i-Map)==1) return;
if (isSetColor(i-Map-1)==0)
if (clickIt(i-Map-1)==1) return;
if (isSetColor(i-Map+1)==0)
if (clickIt(i-Map+1)==1) return;
if (isSetColor(i+Map)==0)
if (clickIt(i+Map)==1) return;
if (isSetColor(i+Map-1)==0)
if (clickIt(i+Map-1)==1) return;
if (isSetColor(i+Map+1)==0)
if (clickIt(i+Map+1)==1) return;
}
}
}
}
function RclickIt(numb)
{

if ( (document.getElementById("Dcell"+numb)).style.background=="#ffffff" ) {
event.cancelBubble=true;
event.returnValue=false;
return false;
}

(document.getElementById("Dcell"+numb)).style.background="#00CCFF";

if (checkResult() == 1)
{
alert("You Win!");
init();
}

//alert( (document.getElementById("Dcell"+numb)).style.background );
event.cancelBubble=true;
event.returnValue=false;
return false;
}

// check the result after right click
function checkResult()
{
for(var i=0;i {
if (cells[i] == MaxNumber)
{
if( (document.getElementById("Dcell"+i)).style.background != "#00ccff" )
{
return 0;
}
}
else
{
if( (document.getElementById("Dcell"+i)).style.background == "#00ccff" )
{
return 0;
}
}
}
return 1;
}

// click to open a cell
function clickIt(numb){
//
if ((document.getElementById("Dcell"+numb)).style.background=="#ffffff")
return;
//alert(numb);
if (cells[numb] == MaxNumber)
{
displayAll();
(document.getElementById("Dcell"+numb)).style.background="#FF0000";
alert("You Lost!");
Button_Start_onclick();
return 1;
}
else
{
displayOne(numb);
if (cells[numb] == 0) {
relation(numb);
}
return 0;
}
return 0;
//(document.getElementById("Dcell"+i))
}

// open a cell
function displayOne(i)
{
if(cells[i] == 0)
{
(document.getElementById("Dcell"+i)).innerHTML = " ";
(document.getElementById("Dcell"+i)).style.background="#FFFFFF";
}else{
(document.getElementById("Dcell"+i)).innerHTML = cells[i];
(document.getElementById("Dcell"+i)).style.background="#FFFFFF";
}
}

// open all cells because you lost
function displayAll()
{
//display
for(var i=0;i {
if(cells[i] ==MaxNumber) {
(document.getElementById("Dcell"+i)).innerHTML = "X";
(document.getElementById("Dcell"+i)).style.background="#CC9900";
} else if (cells[i] == 0) {
(document.getElementById("Dcell"+i)).innerHTML = " ";
} else{
(document.getElementById("Dcell"+i)).innerHTML = cells[i];
}
}
}

// a function to check the a cell can be open automatically
function doAgin(i)
{
if(cells[i] == 0){
//if (( document.getElementById("Dcell"+(i)) ).innerHTML != "0"){
if (( document.getElementById("Dcell"+(i)) ).style.background!="#ffffff"){
displayOne(i);
relation(i);
}
}
else
{
displayOne(i);
}

}

// check all neighbor cell can be open automatically
function relation(i)
{
if (i%Map == 0) //first col
{
if (i-Map<0) { // first row
doAgin(i+1);
doAgin(i+Map);
doAgin(i+Map+1);
}
else if (i+Map>(Map*Map-1)) { //last row
doAgin(i+1);
doAgin(i-Map);
doAgin(i-Map+1);
}
else{
doAgin(i-Map);
doAgin(i+1);
doAgin(i+Map);
doAgin(i+Map+1);
doAgin(i-Map+1);
}
}
else if (i%Map == Map-1) //last col
{
if (i-Map<0) { // first row
doAgin(i-1);
doAgin(i+Map);
doAgin(i+Map-1);
}
else if (i+Map>(Map*Map-1)) { //last row
doAgin(i-1);
doAgin(i-Map);
doAgin(i-Map-1);
}
else{
doAgin(i-Map);
doAgin(i-1);
doAgin(i+Map);
doAgin(i+Map-1);
doAgin(i-Map-1);
}
}
else
{
if (i-Map<0) { // first row
doAgin(i-1);
doAgin(i+1);
doAgin(i+Map);
doAgin(i+Map+1);
doAgin(i+Map-1);
}
else if (i+Map>(Map*Map-1)) { //last row
doAgin(i-1);
doAgin(i+1);
doAgin(i-Map);
doAgin(i-Map+1);
doAgin(i-Map-1);
}
else{
doAgin(i+Map);
doAgin(i-1);
doAgin(i+1);
doAgin(i-Map);
doAgin(i-Map+1);
doAgin(i-Map-1);
doAgin(i+Map+1);
doAgin(i+Map-1);
}
}
}

// init map
function init()
{
var strtable = "<table id='Table1' cellSpacing='0' cellPadding='0' width='" + 20*Map + "' border='1'>"
for(var m=0;m {
strtable+="<tr>"
for(var n=0;n {
strtable+="<td align='center' width='40' id='Dcell" + (m*Map+n) + "' onclick=\"clickIt(" + (m*Map+n) + ")\" oncontextmenu=\"RclickIt(" + (m*Map+n) + ")\" ondblclick=\"DclickIt(" + (m*Map+n) + ")\">  </td>"
}
strtable+="</tr>"
}
strtable+= "<table>"
//alert(strtable);
Divcells.innerHTML = strtable;

Button_Start_onclick();

}

// init bombs and all cells
function Button_Start_onclick() {

for (var i=0; i {
cells[i] = 0;
}

var j=0;
while(1)
{
var randNum = (Math.floor( Math.random()*Map*Map ));
if (cells[randNum] == 0)
{
cells[randNum] = MaxNumber;
j++;
if (j==Bombs)
{
break;
}
}
}
//alert(cells)
for(var i=0;i (document.getElementById("Dcell"+i)).innerHTML = " ";
(document.getElementById("Dcell"+i)).style.background="#CCCCCC";
}

for(var i=0;i {
if (cells[i]==MaxNumber)
{
continue;
}
var count=0;

if (i % Map == 0) //first col
{
if ((i-Map) < 0) { // first row
count+=cells[i+1];
count+=cells[i+Map];
count+=cells[i+Map+1];
}
else if ((i+Map) > (Map*Map-1)) { //last row
count+=cells[i-Map];
count+=cells[i+1];
count+=cells[i+1-Map];
}
else{
count+=cells[i-Map];
count+=cells[i+1];
count+=cells[i+Map];
count+=cells[i+Map+1];
count+=cells[i+1-Map];
}
}

else if (i%Map == Map-1) //last col
{
if ((i-Map) < 0) { // first row
count+=cells[i-1];
count+=cells[i+Map];
count+=cells[i+Map-1];
}
else if ((i+Map) > (Map*Map-1)) { //last row
count+=cells[i-Map];
count+=cells[i-1];
count+=cells[i-Map-1];
}
else{
count+=cells[i-Map];
count+=cells[i-1];
count+=cells[i+Map];
count+=cells[i+Map-1];
count+=cells[i-Map-1];
}
}
else
{
if ((i-Map) < 0) { // first row
count+=cells[i-1];
count+=cells[i+1];
count+=cells[i+Map];
count+=cells[i+Map-1];
count+=cells[i+Map+1];
}
else if ((i+Map) > (Map*Map-1)) { //last row
count+=cells[i-Map];
count+=cells[i-1];
count+=cells[i+1];
count+=cells[i-Map-1];
count+=cells[i-Map+1];
}
else{
count+=cells[i-Map];
count+=cells[i-1];
count+=cells[i+1];
count+=cells[i+Map];
count+=cells[i-Map+1];
count+=cells[i-Map-1];
count+=cells[i+Map-1];
count+=cells[i+Map+1];
}
}

cells[i] = Math.floor(count/MaxNumber);
}
//displayAll(); //debug
}

// begin level
function beginLevel()
{
Bombs = 10;
Map = 10;
init();
}

// advance level
function advLevel()
{
Bombs = 40;
Map = 16;
init();
}

// custom level
function myLevel()
{
var myMap = textMapSize.value;
var myBomb = textBombNumber.value
if( (myMap)<1 || (myMap)>20 )
{
alert("地图大小应该在1-20之间");
return;
}
if( (myBomb)<1 || (myBomb)>100 )
{
alert("地雷数量应该在1-100之间");
return;
}
if (myMap*myMap < myBomb)
{
alert("天呀，你给的地图区域放不了这么多地雷呀！");
return;
}
myMap = Math.floor(myMap)
myBomb = Math.floor(myBomb)
Bombs = myBomb;
Map = myMap;
init();
}

//
</script>
</head>
<body onload="init()">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input id="Button_Start12" type="button" value="初级（10X10小格 10雷）" name="Button_Start1" language="javascript" style="width:200"</td>
</tr>
<tr>
<td><input id="Button_Start23" type="button" value="高级（16X16小格 40雷）" name="Button_Start2" language="javascript" style="width:200"</td>
</tr>
<tr>
<td>

</td>
</tr>
<tr>
<td>

地图大小:
<input type="text" id="textMapSize3" name="textMapSize" style="width:100" value=12>

</td>
</tr>
<tr>
<td>

地雷数量:
<input type="text" id="textBombNumber3" name="textBombNumber" style="width:100" value=12>

</td>
</tr>
<tr>
<td><input id="Button_Start43" type="button" value="生成地图" name="Button_Start4" language="javascript" style="width:200"</td>
</tr>
<tr>
<td>

</td>
</tr>
<tr>
<td><input id="Button_Start33" type="button" value="我要作弊:)" name="Button_Start3" language="javascript" style="width:200"</td>
</tr>
</table></td>
<td>

<table width="300" border="0" cellspacing="4">
<tr>
<td>Web 扫雷 v2.1 (2004/11/3)

开发环境：Javascript

运行环境：IE

操作方法：左键打开，右键标示，双击打开周围未标示区域

作者：Zhong Weixiao mailto:zhongwx@gmail.com">zhongwx@gmail.com

转载请与作者联系，并保留作者信息 </td>
</tr>
</table></td>
</tr>
</table>

</body>

</textarea>
↑返回目录
前一篇: Use LookupDispatchAction for a JavaScript-free dispatch
后一篇: Flash 和 ASP / PHP 以及 Javascript 的交互