Verwenden Sie js, um eine Webversion von Minesweeper zu entwickeln (mit detaillierter Codeerklärung).-js-Tutorial-php.cn

Verwenden Sie js, um eine Webversion von Minesweeper zu entwickeln (mit detaillierter Codeerklärung).

php是最好的语言

Freigeben： 2018-08-06 09:47:49

Original

4543 Leute haben es durchsucht

//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;}

Nach dem Login kopieren

Verwandte Artikel:

JS-Version des Minesweeper-Implementierungscodes Das Prinzip ist gut

JS-Version des Minesweeper-Implementierungscodes

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um eine Webversion von Minesweeper zu entwickeln (mit detaillierter Codeerklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!