Home >Web Front-end >JS Tutorial >Use js to develop web version of Minesweeper (with detailed code explanation)

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

php是最好的语言Original: 2018-08-06 09:47:494557browse

//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 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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to JavaScript design patterns adapter patternNext article：A brief introduction to JavaScript design patterns adapter pattern

See more

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

Related articles