JavaScript实现简易网页版扫雷游戏
最近在学习web前台，闲来无事写了一个网页版的扫雷小游戏。闲话少说，直接进入正题。
首先是网页前台：
前台代码如下：
两个输入框分别输入地图的边长（即横竖各有多少格）和地雷的数目。点击开始游戏后由JavaScript代码按照输入生成一个表格，表格中每个单元格里都有一个按钮。
function CreateTable() {
var ge = parseInt(document.getElementById("ge").value); //获取地图边长
var lei = parseInt(document.getElementById("lei").value); // 获取地雷数目
if (!isNaN(parseInt(lei)) && !isNaN(parseInt(lei))) { //判断输入是否合法
if (ge < 3) {
alert("格子数至少为3");
location.reload();
return;
}
limit = ge - 1; //动态生成表格，并插入前台。
table = "";
for (i = 0; i < ge; i++) { //生成行
table += "";
for (j = 0; j < ge; j++) { //生成格 每个单元格里有一个div 用于点击后改变单元格的内容， div中有一个Button 用于触发点击事件
table += " ";
}
table += "
";
var div = document.getElementById("main");
div.innerHTML = table;
}
else {
alert("输入错误");
ge = "";
}
CreateLei();
}
扫雷游戏需要点击某一个格后，显示这个格周围9格小格内有多少个地雷。
如图所示，首先默认所有格内的数字都是0，然后确定地雷所在位置后，对其周围的9个小格内的数据进行++计算。
用一个二位数组记录地图内地雷位置及各个单元格内的数字。
function CreateLei() {
var lei = parseInt(document.getElementById("lei").value);
var ge = parseInt(document.getElementById("ge").value);
var arr = new Array(); //建立二维数组
for (i = 0; i < ge; i++) {
arr[i] = new Array();
for (j = 0; j < ge; j++) {
arr[i][j] = 0;
}
}
for (i = 0; i < lei; i++) {
list = Math.floor(Math.random() * ge ); //产生随机数作为行
lion = Math.floor(Math.random() * ge ); //产生随机数作为列
arr[list][lion] = 10; //一个格周围最多有9个雷，所以单元格内的数字最大为9， 因此用10代表地雷。//遍历雷周围的所有单元格function SaoLei(name) {
dian = new Array();
dian[0] = parseInt(name.split(",")[0]);
dian[1] = parseInt(name.split(",")[1]);
queue = new Array();
queue[0] = dian;
number = 1;
while (number != 0) {
number--;
row = queue[number][0];
col = queue[number][1];
//点到炸弹
if (array[row][col]==10) {
Bomb(row,col);
}
//不是炸弹
else {
if (array[row][col] > 0 && array[row][col] < 10) ShowNumber(array[row][col], row, col); //显示数字
else {
//将周围的格添加到遍历的队列中
Blank(row,col);
for (i = -1; i < 2; i++) {
for (j = -1; j < 2; j++) {
if (i == 0 && j == 0) continue;//遍历到自己
temp1 = row + i;
temp2 = col + j;
if (temp1 < 0 || temp1 > limit || temp2 < 0 || temp2 > limit) continue; //超出边界
if (array[temp1][temp2] == 11) continue; //不把已经翻过的空白格加入搜索队列
point = new Array()
point[0] = temp1;
point[1] = temp2;
queue[number] = point;
number++;
}
}
}
}
}
}小白学习代码的过程中有感而发，大佬路过请高抬贵手。侵删。
另 完整代码已在csdn中上传，链接为：点击打开链接