suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie js, um eine Webversion von Minesweeper zu entwickeln (mit detaillierter Codeerklärung).

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

php是最好的语言
php是最好的语言Original
2018-08-06 09:47:494533Durchsuche

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Einführung in das JavaScript-Designmuster-AdaptermusterNächster Artikel：Eine kurze Einführung in das JavaScript-Designmuster-Adaptermuster

In Verbindung stehende Artikel

Mehr sehen