使用js开发网页版 扫雷(附代码详解)

2025-04-27阅读 0热度 0
js 扫雷
//HTMEL    <p> </p>//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 ";    }    initBom();}//初始化 25个 bom  颜色 和  innerHTMLfunction initBom() {    //改变颜色    for (let i = 0; i ";    }    //取消 右击 菜单    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 <p>相关文章:<br></p><p><a href="http://www.php.cn/js-tutorial-23177.html" target="_self">js版扫雷实现代码 原理不错</a></p><p><a href="http://www.php.cn/js-tutorial-385963.html" target="_self">js实现扫雷的代码</a></p>
登录后复制
免责声明

本网站新闻资讯均来自公开渠道,力求准确但不保证绝对无误,内容观点仅代表作者本人,与本站无关。若涉及侵权,请联系我们处理。本站保留对声明的修改权,最终解释权归本站所有。

相关阅读

更多
欢迎回来 登录或注册后,可保存提示词和历史记录
登录后可同步收藏、历史记录和常用模板
注册即表示同意服务条款与隐私政策