cari

Rumah  >  Artikel  >  hujung hadapan web  >  使用js开发网页版 扫雷（附代码详解）

使用js开发网页版 扫雷（附代码详解）

php是最好的语言
php是最好的语言asal
2018-08-06 09:47:494534semak imbas

//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(&#39;content&#39;)[0];    const bottom = document.createElement(&#39;p&#39;);    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(&#39;p&#39;);            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(&#39;content&#39;)[0];    const over = document.createElement(&#39;p&#39;);    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(&#39;p&#39;);            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(&#39;over&#39;).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实现扫雷的代码

Atas ialah kandungan terperinci 使用js开发网页版 扫雷（附代码详解）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript设计模式之简单介绍适配器模式Artikel seterusnya：前端知识 JavaScript-modules模块的学习

Artikel berkaitan

Lihat lagi