Use js to develop web version of Minesweeper (with detailed code explanation)

//HTMEL  
 
 //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 + "
"; } 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 + "
"; } //取消 右击 菜单 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;}

Related articles:

JS version of Minesweeper implementation code. The principle is good

JS version of Minesweeper implementation code

The above is the detailed content of Use js to develop web version of Minesweeper (with detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!