首页 > 网络编程 > JavaScript > javascript技巧 > js扫雷游戏

javascript 扫雷游戏

2009-05-02 01:33:56 作者：

最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。

var rownum; //row number 
var colnum; //column number 
var minenum; //mine number 
var totalCellNum; // total number of cell 
var elapseTime; //elapse time for mine sweeping 
var statedNum; // swept cell number 
var elapseSpan; // for display elapse time 
var tick; // timer for mine sweeping

//generating mine area 
function init() { 
rownum = parseInt(document.mineform.rownum.value); 
colnum = parseInt(document.mineform.colnum.value); 
minenum = parseInt(document.mineform.minenum.value); 
totalCellNum = rownum * colnum;

var buffer = new StringBuffer(); 
buffer.append("<table cellspacing=\"0\" cellpadding=\"0\" border='1'>"); 
for (var i = 0; i < rownum; i++) { 
buffer.append("<tr>"); 
for(var j = 0; j < colnum; j++) 
buffer.append("<td bgcolor='#AAA898' id=\"" + i + "_" + j+"\" name='cell' />&nbsp;</td>"); 
buffer.append("</tr>"); 
} 
buffer.append("</table>"); 
var workarea = document.getElementById("workarea"); 
workarea.innerHTML = buffer.toString(); 
mine(); // lay mines at the work area 
startTick(); // starting time 
}

// periodically update the elapsed time 
function displayelapsedTime() { 
elapseSpan.innerHTML = elapseTime++; 
if (elapseTime > 999) 
stopTick(); 
}

// start up the timer for sweeping mine 
function startTick() { 
if (tick) stopTick(); 
elapseTime = 0; 
statedNum = 0; 
elapseSpan = document.getElementById("elapse"); 
document.getElementById("message").innerHTML = ""; 
tick = setInterval(displayelapsedTime, 1000); // start tick 
}

// stop the timer 
function stopTick() { 
clearInterval(tick); 
tick = null; 
}

// lay mines at the work area 
function mine() { 
var arr = new Array(totalCellNum);

for(var i = 0; i < totalCellNum; i++) 
arr[i] = i;

for(var i = 0; i < minenum; i++) { 
var suffix = Math.floor(arr.length * Math.random()); 
var rnd = arr[suffix]; 
var row = Math.floor(rnd / colnum); 
var col = rnd % colnum; 
var cell = document.getElementById(row + "_" + col); 
cell.mine = "●"; 
arr.splice(suffix, 1); 
} 
calcMineForAll(); 
}

// calculating mine number for each cell 
function calcMineForAll() { 
for(var i = 0; i < rownum; i++) { 
for(var j = 0; j < colnum; j++) { 
calcMine(i, j); 
} 
} 
}

// calculating mine number for given cell 
function calcMine(row, col) { 
var cell = document.getElementById(row + "_" + col); 
var nums = 0;

if(row > 0) { 
if(col > 0) { 
if(document.getElementById((row - 1) + "_" + (col - 1)).mine) //top left 
nums++; 
} 
if(col < colnum - 1) { 
if(document.getElementById((row - 1) + "_" + (col + 1)).mine) //top right 
nums++; 
} 
if(document.getElementById((row - 1) + "_" + col).mine) // top 
nums++; 
} 
if(row < rownum - 1) { 
if(col > 0) { 
if(document.getElementById((row + 1) + "_" + (col - 1)).mine) //bottom left 
nums++; 
} 
if(col < colnum - 1) { 
if(document.getElementById((row + 1) + "_" + (col + 1)).mine) //bottom right 
nums++; 
} 
if(document.getElementById((row + 1) + "_" + col).mine) // bottom 
nums++; 
} 
if(col > 0) 
if(document.getElementById(row + "_" + (col - 1)).mine) //left 
nums++; 
if(col < colnum - 1) 
if(document.getElementById(row + "_" + (col + 1)).mine) //right 
nums++; 
//if(typeof(cell.mine) == "undefined") 
cell.nums = nums; 
}

// count number of marked cell around given coordinate 
function countMarkNum(row, col) { 
var nums = 0; 
if(row > 0) { 
if(col > 0) { 
if(document.getElementById((row - 1) + "_" + (col - 1)).state == "mark") //top left 
nums++; 
} 
if(col < colnum - 1) { 
if(document.getElementById((row - 1) + "_" + (col + 1)).state == "mark") //top right 
nums++; 
} 
if(document.getElementById((row - 1) + "_" + col).state == "mark") // top 
nums++; 
} 
if(row < rownum -1) { 
if(col > 0) { 
if(document.getElementById((row + 1) + "_" + (col - 1)).state == "mark") //bottom left 
nums++; 
} 
if(col < colnum - 1) { 
if(document.getElementById((row + 1) + "_" + (col + 1)).state == "mark") //bottom right 
nums++; 
} 
if(document.getElementById((row + 1) + "_" + col).state == "mark") // bottom 
nums++; 
} 
if(col > 0) 
if(document.getElementById(row + "_" + (col - 1)).state == "mark") //left 
nums++; 
if(col < colnum - 1) 
if(document.getElementById(row + "_" + (col + 1)).state == "mark") //right 
nums++; 
return nums; 
}

// click the cell 
function clickMe(cell) { 
if(typeof(cell.state) == "undefined") { 
if (cell.mine == "●") { // if incaution touch the mine, game immediate over 
gameover(cell); 
return; 
} 
if (cell.nums > 0) { 
cell.state = "up"; 
statedNum++; 
cell.className = "up"; 
cell.innerHTML = getColoredNum(cell.nums);

} else { 
var a = cell.id.split("_"); 
var row = parseInt(a[0]); 
var col = parseInt(a[1]); 
disclose(row, col); 
} 
isWin(); 
} 
}

// touch the mine, game over 
function gameover(element) { 
for(var i = 0; i < rownum; i++) { 
for(var j = 0; j < colnum; j++) { 
var cell = document.getElementById(i + "_" + j); 
if (cell.state == "up") continue; 
if (cell.mine) { 
if (typeof(cell.state) == "undefined") { 
cell.innerHTML = "●"; 
cell.style.cssText = "font-family:宋体"; 
} 
} 
} 
} 
element.state = "up"; 
element.innerHTML = "●"; 
element.style.cssText = "color:#AA0000;font-family:宋体;font-size:14px"; 
stopTick(); 
document.getElementById("message").innerHTML = "<font color='#DD0000'>Sorry, you lost the game!</font>"; 
}

// get colored number, difference number will be colored difference color 
function getColoredNum(nums) { 
var color; 
switch(nums) { 
case 1: color = "#0000EE"; break; 
case 2: color = "#00AA00"; break; 
case 3: color = "#990000"; break; 
case 4: color = "#FF0000"; break; 
case 5: color = "#550000"; break; 
case 6: color = "#550055"; break; 
case 7: color = "#223366"; break; 
default: color = "#000000"; 
} 
return "<font color=" + color + ">" + nums + "</font>"; 
}

// mark or unmark a cell 
function markMe(cell) { 
if (cell.state == "mark") { 
cell.innerHTML = "&nbsp;"; 
cell.state = undefined; 
statedNum--; 
} else if (typeof(cell.state) == "undefined") { 
cell.innerHTML = "F"; 
cell.state = "mark"; 
statedNum++; 
isWin(); 
} 
}

// determine the game is win 
function isWin() { 
if (statedNum == totalCellNum) { 
document.getElementById("message").innerHTML = "<font color='#008800'>Congratulations, you won the game!</font>"; 
stopTick(); 
} 
}

// when left and right key down 
function doubleClick(cell) { 
if(typeof(cell.state) == "undefined") { 
clickMe(cell); 
return; 
}

// process all mouse key down event 
document.onmousedown = function() { 
var e = event ? event : arguments[0] ; 
var cell = e.srcElement ? e.srcElement : e.target; 
if(cell.parentNode.name == "cell") 
cell = cell.parentNode ;

if(cell.name == "cell") { 
if (e.button == 1) //left click 
clickMe(cell); 
else if (e.button == 2) //right click 
markMe(cell); 
else if (e.button == 3) //left and right click 
doubleClick(cell); 
} 
return true; 
} 
// --></script>

<html> 
<body oncontextmenu="return false" onselectstart="return false"> 
<div align="center"> 
<form name="mineform"> 
Row: <input type="text" name="rownum" size="5" value="15"/> 
Column: <input type="text" name="colnum" size="5" value="20"/> 
Mine Number: <input type="text" name="minenum" size="5" value="30"/> 
<input type="button" value=" Start " name="start" onclick="init()"/> 
Elapsed Time: <span id="elapse" style="width:30px;font-family:Arial Black" align="right"></span> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 扫雷游戏

您可能感兴趣的文章: