渡一扫雷
主要问题
没解决组
1、无法左右键齐点执行操作（event）
需要在classname==flag且个数等于cl上的数字情况下，左右齐点后开周围一圈classname为’‘的td，并且插错旗帜的点划叉
2、全部扫出但没插旗，没有弹出成功
如果场上旗子+空格等于十个就进行判断
3、旗子查错打×
改动gg方法，和mineRandom做匹配。匹配不上就加上个红的’\u2716’打在td上
解决组
4、最后如果旗子插错，会gg，一般是不会gg，只有踩到雷会gg
但是不gg，旗子就会无限地-1
初级先点出十个旗子，
①出现点来点去只有十个旗子那一块能点击情况，if写错条件
②点右键取消，重新插回最初的十个旗子，会出现例如0,0,1,2,3,4,5,6,7,8情况
③出现出入栈的错，直接暴力去掉重复值了……这个处理其实不是很好，但是我没找出来是什么问题。
④插入十个旗子的时候，左右键一起禁用了，其实只应该禁用除了那十块classname='flag’的右键（没解决）
5、zero class会把旗子给吞了，导致雷数显示不对
①当有递归的时候应该重新计算场上classname为flag的个数,并且清空区域内的playerMine
②经常忽略this指向导致错误
③第二次递归出现NaN，……变量没放外面，找的最无语的错误，找了好久
④其他等级出现初级10颗雷情况，为什么mineRandom.split(",").length不能定义一个全局变量
6、当前正在开局切换别的模式应该弹出确认框comfirm（当没开局无法自动跳过弹框，做flag判断）
7、没有自定义棋盘大小
①全点取消会报错(if设置不准确)
②雷数作限制（1算的是tostring后的长度导致问题，用split拆，或者mineRandom拆分成两个全局变量，当然这个更好一点，2顺序问题）
③btn active样式第二次点击click就没染色(顺序问题)
（解决，当前正在开局点自定义棋盘，弹出3个定义框，全点取消不跳转，雷数奇葩也不跳转，并且刷新当前棋盘，这点没处理好，照理说应该不刷新，不过对用户而言如果当前开局再点自定义应该算放弃本轮游戏）
8、输赢判断是错误的，原版是最后一个是正确的就赢了，最后一个是错的就输了（随机生成的数组字符串化和用户插旗位置做匹配）
9、扫雷周围一片鼠标全部禁用，但应该只禁用棋盘那一块
附加
1、插旗取消最好用？（需要添加样式，再加入type为question mark的数据结构做判断）
function Mine(tr, td, mineNum) {
this.tr = tr; // tr表示行数
this.td = td; // td表示列数
this.mineNum = mineNum; // mineNum表示雷的数量
this.squares = []; // 存储所有方块的信息，是一个二维数组，按照行与列的顺序排放，存取都按照行列方式
this.tds = []; // 存储所有单元格的DOM
this.surplusMine = mineNum; // 剩余雷的数量
this.allRight = false; // 右击标注的小红旗是否全部是雷，用来判断用户是否游戏成功
this.parent = document.querySelector('.gameBox');
}
// 创建表格
Mine.prototype.createDom = function () {
let This = this;
let table = document.createElement('table');
for (let i = 0; i < this.tr; i++) {
// 行
let domTr = document.createElement('tr');
this.tds[i] = [];
for (let j = 0; j < this.td; j++) {
// 列
let domTd = document.createElement('td');
this.tds[i][j] = domTd; // 把所有创建的td添加到数组当中
domTd.pos = [i, j]; // 把格子对应的行和列村到格子身上，为了下面通过这个值去数组里面取到对应的数据
domTd.onmousedown = function () {
This.play(event, this); // 大的This 指的是实例对象 小的this指的是点击的domTd
flag = 0;
};
// if (this.squares[i][j].type == 'mine') {
// domTd.className = 'mine';
// }
// if (this.squares[i][j].type == 'number') {
// domTd.innerHTML = this.squares[i][j].value;
// }
domTr.appendChild(domTd);
}
table.appendChild(domTr);
}
this.parent.innerHTML = ''; // 避免多次点击创建多个
this.parent.appendChild(table);
};
// 生成n个不重复的数字
Mine.prototype.randomNum = function () {
let square = new Array(this.tr * this.td); // 生成一个空数组 长度为格子总数
for (let i = 0; i < square.length; i++) {
square[i] = i;
}
// 数组乱序
square.sort(function () {
return 0.5 - Math.random();
});
return square.slice(0, this.mineNum);
};
Mine.prototype.init = function () {
// let playerMine = new Array(0);
let rn = this.randomNum(); // 雷在格子里的位置
mineRandom = rn.sort(function (a,b) {
//用全局变量抛出内部变量，和玩家插的旗做匹配，可以不用sort那么严格
//末尾return的，不是闭包
return a-b;
}).toString();
console.log(mineRandom);
playerMine = new Array(0);//重置玩家插旗子点
let n = -1;// 用来找到对应的索引格子
for (let i = 0; i < this.tr; i++) {
this.squares[i] = [];
for (let j = 0; j < this.td; j++) {
// 取一个方块在数组里的数据，要使用行与列的形式存取
// 找方块周围的方块的时候，要用坐标的形式去取
// 行与列的形式，和坐标的形式，x，y是刚好相反的
n++;
if (rn.indexOf(n) != -1) {
// 如果这个条件成立，说明现在循环到的索引在雷的数组里面找到了，那就表明这个索引对应的是个雷
this.squares[i][j] = {
type: 'mine',
x: j,
y: i
};
} else {
this.squares[i][j] = {
type: 'number',
x: j,
y: i,
value: 0
};
}
}
}
this.updateNum();
this.createDom();
document.querySelector('table').oncontextmenu = function () {
return false;
// 阻止右键出菜单事件
}
// 剩余雷数
this.mineNumDom = document.querySelector('.mineNum');
this.mineNumDom.innerHTML = this.surplusMine;
return mineRandom;
};
// 找某个方格周围的八个格子
Mine.prototype.getAround = function (square) {
let x = square.x,
y = square.y;
let result = []; // 把找到的格子的坐标返回出去（二维数组）
for (let i = x - 1; i <= x + 1; i++) {
for (let j = y - 1; j <= y + 1; j++) {
if (i < 0 ||
j < 0 ||
i > this.td - 1 ||
j > this.tr - 1 ||
// 上述表示出边界
(i == x && j == y) ||
// 表示循环到自己
this.squares[j][i].type == 'mine'
// 表示循环到（周围的格子）雷 (注意i和j表示的是坐标，而squares存储的是行和列)
) {
continue;
}
// 要以行与列的形式返回出去，因为到时候需要它去取数组里的数据
result.push([j, i]);
}
}
return result;
}
// 更新所有的数字，计数
Mine.prototype.updateNum = function () {
for (let i = 0; i < this.tr; i++) {
for (let j = 0; j < this.td; j++) {
// 要更新的是雷周围的数字
if (this.squares[i][j].type == 'number') {
continue;
}
let num = this.getAround(this.squares[i][j]); // 获取到每一个雷周围的数字
for (let k = 0; k < num.length; k++) {
this.squares[num[k][0]][num[k][1]].value += 1;
}
}
}
};
Mine.prototype.play = function (ev, obj) {
let This = this;
function chongxinbianliflag(){
let tempFlag = document.querySelectorAll('.flag');
This.mineNumDom.innerHTML = mineRandom.split(",").length - tempFlag.length;
This.surplusMine = mineRandom.split(",").length - tempFlag.length;
playerMine = [];
for(let j = 0;j < tempFlag.length ; j++){
let placeFlag = tempFlag[j].pos[0]*elementCount+tempFlag[j].pos[1];
playerMine.push(placeFlag);
}
}
let elementCount = document.querySelector('tr').childElementCount;
if (ev.which == 1 && obj.className != 'flag') {
// 后面的条件是为了用户右键之后不能点击
// 点击的是左键
let curSquare = this.squares[obj.pos[0]][obj.pos[1]];
let cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
// cl 存储className
if (curSquare.type == 'number') {
// 用户点击的是数字
obj.innerHTML = curSquare.value;
obj.className = cl[curSquare.value];
// 点到了数字零
if (curSquare.value == 0) {
/*
递归思路：
1.显示自己
2.查找四周
1) 显示四周（如果四周的值不为零，那就显示到这，不需要再找了）
2）如果值为零了
a.显示自己
b.找四周（如果四周的值不为零，那就显示到这，不需要再找了）
I.显示自己
II.找四周（如果四周的值不为零，那就显示到这，不需要再找了）...
*/
obj.innerHTML = ''; // 显示为空
function getAllZero(square) {
let around = This.getAround(square); // 找到了周围N个格子
for (let i = 0; i < around.length; i++) {
let x = around[i][0]; // 行
let y = around[i][1]; // 列
This.tds[x][y].className = cl[This.squares[x][y].value];
if (This.squares[x][y].value == 0) {
// 如果以某个格子为中心，找到的某个格子为零，那就接着调用（递归）
if (!This.tds[x][y].check) {
// 给对应的td 添加一条属性，如果找过的话，这个值就为true，下一次就不会再找了，防止函数调用栈出问题
This.tds[x][y].check = true;
getAllZero(This.squares[x][y]);
}
} else {
// 如果以某个格子为中心找到的四周的值不为零，就把数字显示出来
This.tds[x][y].innerHTML = This.squares[x][y].value;
//解决递归吞旗情况，当有递归的时候应该重新计算场上classname为flag的个数,场上的雷重新写入playerMine数组里
chongxinbianliflag()
}
}
}
getAllZero(curSquare);
}
} else {
// 用户点击的是雷
this.gameOver(obj);
}
}
if (ev.which == 3) {
// 用户点击的是右键
let tds = document.querySelectorAll('td');
// 如果右击的是一个数字，就不能点击
if (obj.className && obj.className != 'flag') {
return;
}
if(obj.className == 'flag'){
obj.className = '';// 切换class 有无
playerMine.pop(obj.pos[0]*elementCount+obj.pos[1]);
}
else if (obj.className == ''){
obj.className = 'flag';
playerMine.push(obj.pos[0]*elementCount+obj.pos[1]);
}
// if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
// 判断是错的，会导致最后一个是雷就失败，最后一个是旗子就成功
let playerMineSort = playerMine.sort(function (a,b) {
//其实有点没必要加回调
return a-b;
}).toString();;
if (mineRandom == playerMineSort) {
this.allRight = true;
} else {
this.allRight = false;
}
console.log(this.allRight);
if (obj.className == 'flag') {
this.mineNumDom.innerHTML = --this.surplusMine;
} else {
this.mineNumDom.innerHTML = ++this.surplusMine;
}
if (this.surplusMine == 0) {
// 剩余的雷的数量为0，表示用户已经标完小红旗了，这时候要判断游戏是成功还是结束
if (this.allRight == true) {
// 这个条件成立，说明用户全部标对了
alert('恭喜你，游戏通过');
for (i = 0; i < this.tr; i++) {
for (j = 0; j < this.td; j++) {
this.tds[i][j].onmousedown = null;
}
}
}
else {
//classname为''的地方鼠标禁用，只能做右键取消操作
for (let i = 0; i < tds.length; i++) {
if(tds[i].className == ''){
tds[i].onmousedown = null;
// tds[i].onmousedown = function() {
// if (event.button == 2) {
// return false;
// }
// }
}
}
// this.gameOver();
// obj.className == '';
}
}else{
chongxinbianliflag()
//雷数不为0就重新绑定事件
for (let i = 0; i < tds.length; i++) {
if(tds[i].className == ''){
tds[i].onmousedown = function () {
This.play(event, this);
flag = 0;
};
}
}
}
//这块和下面那块处理方式不是很好，暴力去掉重复值
for (let i = 0; i < playerMine.length; i++) {
for (let j = i + 1; j < playerMine.length; j++) {
if (playerMine[i] == playerMine[j]) {
playerMine.splice(j, 1);
}
}
}
//这块处理不是很好，用var进行变量提升
playerMineSort = playerMine.sort(function (a,b) {
//其实有点没必要加回调
return a-b;
}).toString();
console.log(playerMine);
console.log(playerMineSort);
}
}
// 游戏失败函数
Mine.prototype.gameOver = function (clickTd) {
/*
1.显示所有的雷
2.取消所有格子的点击事件
3.给点中的格子标红
*/
for (i = 0; i < this.tr; i++) {
for (j = 0; j < this.td; j++) {
if (this.squares[i][j].type == 'mine') {
this.tds[i][j].className = 'mine';
}
this.tds[i][j].onmousedown = null;
}
}
if (clickTd) {
clickTd.style.backgroundColor = '#f00';
}
}
let playerMine = new Array(0);//统计用户插旗位置，和雷位置做匹配
let flag = 1;//判断是否当前正在开局,1表示没开局,0表示开局
// 添加 button 的功能
let btns = document.getElementsByTagName('button');
let mine = null; // 用来存储生成的实例
let ln = 0; // 用来处理当前选中的状态
let arr = [
[9, 9, 10],
[16, 16, 40],
[28, 28, 99]
]; //不同级别的行数，列数，雷数
for (let i = 0; i < btns.length - 1; i++) {
btns[i].onclick = function () {
let This = this;
function btnOperate() {
//减少耦合
btns[ln].className = '';
// this.className = 'active';
This.className = 'active';
mine = new Mine(arr[i][0], arr[i][1], arr[i][2]);
// mine = new Mine(...arr[i]);//等同于上面
mine.init();
ln = i;
}
if(flag == 0){
let r=confirm("确认开始新扫雷游戏？");//当页面刷新的时候作出限制
if (r == true ){
btnOperate();
flag = 1;
}
else{
return false;
}
}else{
btnOperate();
}
}
}
btns[0].onclick(); // 初始化
btns[3].onclick = function () {
let row = parseInt(prompt("请输入行数",""));
let col = parseInt(prompt("请输入列数",""));
let mineNum = parseInt(prompt("请输入雷数",""));
if(row && col && mineNum) {
arr.push([row, col, mineNum]);
mine = new Mine(arr[3][0], arr[3][1], arr[3][2]);
mine.init();
}else{
return;
}
if(mineNum > mineRandom.split(",").length){
alert("雷数不对全部重输");
btns[0].onclick(); // 初始化
return ;
}
// console.log('设置的雷数'+mineNum);
// console.log('随机个数'+mineRandom.split(",").length);
for (let i = 0; i < btns.length - 1; i++) {
btns[ln].className = '';
ln = i;
}
this.className = 'active';
if(mine) {
arr.pop(arr[3][0], arr[3][1], arr[3][2]);//不能在开始pop，加判断也不行……
}
}
btns[4].onclick = function () {
for (let i = 0; i < btns.length - 1; i++) {
if (btns[i].className == 'active' ) {
if(flag){
btns[i].onclick();
}else{
let r = confirm("确认跳转？");
if(r == 1){
btns[i].onclick();
}else {
return;
}
}
}
}
}