软件开发培训班 >> 编程开发 >> JavaScript

javascript 扫雷游戏

　　本文标签：javascript,扫雷游戏

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 /> </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 = " "; 
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>

<p></P> 
<div id="workarea"></div> 
<p></P> 
<p></P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/dc/news/2013/9a16539.html"  target=_blank > 回归生活 接地气的摄影佳作修炼法则 </a></td><td><a href="http://www.zhujiangroad.com/home/news/2020/7m81920.html"  target=_blank > 洗衣机的选择技巧有哪些 滚筒洗衣机品牌推荐 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/hardware/news/2021/11a17562.html"  target=_blank > DIY从入门到放弃：选电源看一个参数就够 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2023/7m87912.html"  target=_blank > 快乐的Threads，终究干不过愤怒的推特？ </a></td></tr></table></div> 
<div id="message" style="font-family:Arial Black;font-size:16px" style="font-family:Arial Black;font-size:16px"></div> 
</div> 
</body> 
</html>

技术文章快速查找

jQuery实现表格数据的动态添加与统计

jquery操作cookie插件分享

javascript 格式化时间日期函数代码脚本之家修正版

为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能

JavaScript加强之自定义event事件

file模式访问网页时iframe高度自适应解决方案

jQuery 1.4 15个你应该知道的新特性(译)

CSS(js)限制页面显示的文本字符长度

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建