用js做扫雷,雷区是怎么做的

发布网友发布时间：2022-04-30 07:53

共2个回答

懂视网时间：2022-04-22 20:16

//HTMEL
<body>
 <p class="content"> </p></body>
//css
.bottom,over { text-align: center; line-height: 0px;}
 .bottom p { display: inline-block; width: 30px; height: 30px; border: 1px solid #808080; background-color: #f4a; text-align: center; font: 20px/30px arial; }
//JS
// 保存 初始雷化记录 和 拆雷记录 100个按钮中 有25个雷var box = Array(10);
//初始化底层function initBottom() { const content = document.getElementsByClassName('content')[0]; const bottom = document.createElement('p'); content.appendChild(bottom); bottom.className = "bottom";
 for (let i = 0; i < 10; i++) { box[i] = new Array(10); for (let j = 0; j < 10; j++) {  const p = document.createElement('p');  bottom.appendChild(p);  p.id = "bottom[" + i + "][" + j + "]";  box[i][j] = 0; } bottom.innerHTML = bottom.innerHTML + "<br />"; }
 initBom();}
//初始化 25个 bom 颜色 和 innerHTMLfunction initBom() { //改变颜色 for (let i = 0; i < 25; i++) { let x = Math.floor(Math.random() * 10); let y = Math.floor(Math.random() * 10); while (box[x][y] == 1) {  x = Math.floor(Math.random() * 10);  y = Math.floor(Math.random() * 10);  if (box[x][y] == 0) {  break;  } }
 box[x][y] = 1; document.getElementById("bottom[" + x + "][" + y + "]").style.backgroundColor = "rgb(0, 0, 0)"; document.getElementById("bottom[" + x + "][" + y + "]").innerHTML = "x"; // 否则 对不起 ？ }
 // 生成底层数字 for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) {
  if (!box[i][j] == 1) {  document.getElementById("bottom[" + i + "][" + j + "]").innerHTML = getNumber(i, j);  }
 } }}
// 取得 周围雷的个数function getNumber(i, j) { let num = 0, x, y; // 四周 雷的 个数统计 for (let x = i - 1; x <= i + 1; x++) { for (y = j - 1; y <= j + 1; y++) {  if (x == i && y == j) {  continue;  }  if (document.getElementById("bottom[" + x + "][" + y + "]")) {  if (box[x][y] == 1) {   num++;  }  } } } return num;}
//初始化 上层 overfunction initOver() {
 const content = document.getElementsByClassName('content')[0]; const over = document.createElement('p'); content.appendChild(over); over.className = "over"; over.id = "over";
 for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) {  const p = document.createElement('p');  over.appendChild(p);  p.id = "over[" + i + "][" + j + "]"; } over.innerHTML = over.innerHTML + "<br />"; }
 //取消 右击 菜单 over.oncontextmenu = function (e) { e.returnValue = false; }
 // 点击 做标记 over.onclick = function (e) { const target = e.srcElement; if (target.style.backgroundColor == "rgb(255, 255, 255)") {  target.style.backgroundColor = "#808080"; } else {  target.style.backgroundColor = "rgb(255, 255, 255)"; } }
 // 双击拆雷 over.ondblclick = function (e) { const target = e.srcElement; const strId = target.id.substring(4, target.id.length); if (document.getElementById("bottom" + strId).style.backgroundColor == "rgb(0, 0, 0)") {  document.getElementById('over').style.display = "none"; } else {  target.style.opacity = 0;  let i = parseInt(strId.substring(1, 2));  let j = parseInt(strId.substring(4, 5));  box[i][j] = 1;  // 等于0 扩散  if (document.getElementById("bottom" + strId).innerHTML == 0) {  zooming(i, j);  } else {  if (isGameOver()) {   alert("真厉害");  }  }
 } }}
//扩散： 当周围有 0时，自动显示function zooming(i, j) {
 for (let x = i - 1; x <= i + 1; x++) { for (y = j - 1; y <= j + 1; y++) {  if (document.getElementById("bottom[" + x + "][" + y + "]") && document.getElementById("bottom[" + x + "][" + y + "]").innerHTML == 0) {  document.getElementById("over[" + x + "][" + y + "]").style.opacity = 0;  if (box[x][y] == 0) {   box[x][y] = 1;   zooming(x, y);  }  } } }}
//是否清除完 box[][] 初始化 雷时赋值 1，拆雷是赋值 1，全部为1时，完成扫雷。function isGameOver() { for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) {  if (box[i][j] == 0) {  return false;  } } } return true;}

js版扫雷实现代码原理不错

js实现扫雷的代码

热心网友时间：2022-04-22 17:24

可以用table作网格，每个td表示一个，雷区就给td设个属性a, a=1, 不是雷区就是a=0
然后随机给每个单元格的a赋值 0或者1，只要保证最后一共有指定个数的雷就好。。
用户点击td触发td的click事件，判断td的a是不是1，是1就中雷；不然就搜索该td附近的格子雷的个数。右键事件表示排雷