原生JS扫雷

最新推荐文章于 2022-07-29 16:46:07 发布
最新推荐文章于 2022-07-29 16:46:07 发布
阅读量161 收藏
点赞数
分类专栏： js基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Edasi/article/details/104354160
版权

作为继贪吃蛇练手后的第二个练习五子棋着实有点难，由于训练不多，主要是学习的视频教学
不多说了直接看效果发代码在这里插入图片描述
html代码

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div id="content">
        <div class="level">
            <button class="active">初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>

        <div class="gameBox">

        </div>
        <div class="mineNum">
            剩余雷数 ：<span class="numberLeishu"></span>
        </div>
    </div>
    <script src="../js/index.js"></script>
</body>

</html>

css代码

#content{
    margin:50px auto;
}
.level{
    text-align: center;
    margin: 10px;
}
.level button{
    padding: 5px 15px;
    background: #02a4ad;
    border: none;
    color: #fff;
    border-radius: 3px;
    outline:none;
    cursor: pointer;
}
.level button.active{
    background: #00abff;
}
.mineNum{
    margin-top:10px;
    text-align:center;
}
table{
    border-spacing: 1px;
    background: #929196;
    margin:0 auto;
}
td{
    padding: 0;
    width:20px;
    height:20px;
    background:#ccc;
    border:2px solid;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
}
.mine{
    background: #d9d9d9 url(../images/dl.png);
    background-size: cover;
}

.flag{
    background: #ccc url(../images/hq.png);
    background-size: cover;
}
td.zero{
    border-color: #d9d9d9;
    background: #d9d9d9;
}
td.one{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color:#0332fe;
}
td.two{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #019f02;
}
td.three{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #ff2600;
}
td.four{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #93208f;
}
td.five{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #ff7f29;
}
td.six{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #ff3fff;
}
td.seven{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #3fffbf;
}
td.eight{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color:#22ee0f;
}

js代码

function Mine(tr, td, mineNum) {
    this.tr = tr;   //行数
    this.td = td;   //列数
    this.mineNum = mineNum;//雷数

    this.squares = [];//一个二维数组，按照行和列的方式放雷
    this.tds = [];      //存储所有单元格的DOM
    this.surplusMine = mineNum;      //剩余雷的数量
    this.allRight = false;      //右击标出来的小红旗是否全是雷 用来判断游戏是否成功
    this.parent = document.querySelector('.gameBox');

}
Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td);//生成一个空数组但是有长度，长度为格子的总数
    for (var i = 0; i < square.length; i++) {
        square[i] = i;
    }
    square.sort(function () {
        return 0.5 - Math.random()
    })
    return square.slice(0, this.mineNum);
}

Mine.prototype.init = function () {
    // console.log(this.randomNum());
    var rn = this.randomNum();    //雷在格子里的位置
    var n = 0; //用来找到格子对应的索引
    for (var i = 0; i < this.tr; i++) {
        this.squares[i] = [];
        for (var j = 0; j < this.td; j++) {
            // this.squares[i][j] = 
            n++;
            //取一个方块在数组里的数据要是用行和列的方式去取
            //找方块周围的数字要用坐标的形式去取，（行和列的形式与坐标形式恰好相反）
            if (rn.indexOf(n) != -1) {
                // 如果这个条件成立，说明现在循环到这个索引在雷的数组里找到了，那就表示这个索引对应的是个雷
                this.squares[i][j] = { type: 'mine', x: j, y: i };
            } else {
                this.squares[i][j] = { type: 'number', x: j, y: i, value: 0 };
            }
        }
    }

    // console.log(this.squares);
    this.updataNum();
    this.creatDom();
    this.parent.oncontextmenu = function () {
        return false;
    }
    //剩余雷数
    this.mineNumDom = document.querySelector('.numberLeishu');
    this.mineNumDom.innerHTML = this.surplusMine;
};

//创建表格
Mine.prototype.creatDom = function () {
    var This = this;
    var table = document.createElement('table');
    for (var i = 0; i < this.tr; i++) {     //行
        var domTr = document.createElement('tr');
        this.tds[i] = [];//将所有行放在一个空数组里
        for (var j = 0; j < this.td; j++) {     //列
            var domTd = document.createElement('td');
            // domTd.innerHTML = 0;
            domTd.pos = [i, j];//把格子对应的行和列存到格子身上，为了下面通过这个值去数组里取得相应的数据
            domTd.onmousedown = function () {
                This.play(event, this)//This指的是实例对象，this指的是年级的那个td

            }
            this.tds[i][j] = domTd;   //这里把用DOM所创建的td添加到数组当中
            // if (this.squares[i][j].type == 'mine') {
            //     domTd.className = 'mine';
            // }
            // if (this.squares[i][j].type == "number") {
            //     domTd.innerHTML = this.squares[i][j].value;
            // }

            domTr.appendChild(domTd);
        }
        table.appendChild(domTr);
    }
    this.parent.innerHTML = '';//类似于清屏功能
    this.parent.appendChild(table);
};

Mine.prototype.getAround = function (square) {
    var x = square.x;
    var y = square.y;
    var result = [];//找到格子的坐标返回出去
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            if (
                i < 0 ||    //格子左边超了
                j < 0 ||    //格子上边超了
                i > this.td - 1 ||  //格子右边超了
                j > this.tr - 1 ||  //格子下边超了
                (i == x && j == y) ||   //格子自己
                this.squares[j][i].type == 'mine'   //格子周围是雷
            ) {
                continue
            }
            result.push([j, i]);
        }
    }
    return result
};
//更新所有数字
Mine.prototype.updataNum = function () {
    for (i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            //只更新雷周围的数字
            if (this.squares[i][j].type == 'number') {
                continue;
            }
            var num = this.getAround(this.squares[i][j]);//获取到每一个雷周围的数字
            for (var k = 0; k < num.length; k++) {
                // num[i] == [0, 1]
                // num[i][0] = 0;
                // num[i][1] = 1
                this.squares[num[k][0]][num[k][1]].value += 1;
            }
            // console.log(num);
        }
    }
    // console.log(this.squares);
}

// x-1,y-1     x,y-1     x+1,y-1
// x-1,y       x,y       x+1,y
// x-1,y+1     x,y+1     x+1,y+1

//找周围的8个方格

Mine.prototype.play = function (ev, obj) {
    var This = this;
    if (ev.which == 1) {
        //点击的是左键
        // console.log(obj);   
        var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
        // console.log(curSquare);
        if (curSquare.type == "number") {
            obj.innerHTML = curSquare.value;
            obj.className = cl[curSquare.value];
            if (curSquare.value == 0) {
                //点到数字0的情况
                //1、显示自己 
                //2、找四周
                // 1、显示四周（如果四周的值有不为0即停止）
                // 2、如果为0
                //     1、显示四周（如果四周的值有不为0即停止）
                //     2、如果为0
                //         1、显示四周（如果四周的值有不为0即停止）
                //         2、如果为0
                //             1、显示四周（如果四周的值有不为0即停止）
                //             2、如果为0

                obj.innerHTML = ''
                function getAllzero(square) {
                    var around = This.getAround(square);//找到了周围的n个格子

                    for (var i = 0; i < around.length; i++) {
                        var x = around[i][0];       //行
                        var y = around[i][1];       //列

                        This.tds[x][y].className = cl[This.squares[x][y].value];

                        if (This.squares[x][y].value == 0) {//递归条件
                            // getAllzero(This.squares[x][y]);
                            if (!This.tds[x][y].check) {
                                This.tds[x][y].check = true;
                                getAllzero(This.squares[x][y]);
                            }
                        }
                        else {
                            This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }
                }
                getAllzero(curSquare);

                //点到非0
            }
        } else {
            // console.log('点到雷了');    
            this.gameOver(obj);
        }
    }

    //点击的邮件
    if (ev.which == 3) {
        if (obj.className && obj.className != 'flag') {
            return;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag';
        if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            this.allRight = true;
        } else {
            this.allRight = false;
        }
        if (obj.className == 'flag') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } else {
            this.mineNumDom.innerHTML = ++this.surplusMine;
        }
        if (this.surplusMine == 0) {
            if (this.allRight) {
                alert('恭喜过关');
            } else {
                alert('游戏失败');
            }
        }
    }

};

Mine.prototype.gameOver = function (clickTd) {
    for (var i = 0; i < this.tr; i++) {
        for (var j = 0; j < this.td; j++) {
            if (this.squares[i][j].type == 'mine') {
                this.tds[i][j].className = 'mine';
            }
            this.tds[i][j].onmousedown = null;

        }
    }
    if (clickTd) {
        clickTd.style.backgroundColor = '#f00';
    }
}
// 上边button的功能
var btns = document.querySelectorAll('.level button');
var mine = null;
var ln = 0;
var arr = [[9, 9, 10], [16, 16, 40], [28, 28, 99]];
for (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = function () {
        btns[ln].className = '';
        this.className = 'active';
        mine = new Mine(...arr[i]);
        mine.init();
        ln = i;
    }
}
btns[0].onclick();//初始化
btns[3].onclick = function(){
    mine.init();
}
// var mine = new Mine(20, 20, 10);
// mine.init();

// console.log(mine.getAround(mine.squares[0][0]));
Edasi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于原生JS的五子棋游戏
05-04
一个基于原生js的五子棋小游戏，主要是针对H5新增的canvas标签的一次练习。 涉及AI对战，算不上真正意义上的AI。 适用于学习js的学者。
原生Javascript实现五子棋
qq_41961383的博客
08-26 3540
原生Javascript实现五子棋
原生JS五子棋
liuzhenweii的博客
07-07 2961
用js实现一款五子棋小游戏，首先把五子棋所有的功能总结一下 然后是html部分, 一个canvas标签. <body style="background: rgb(248, 204, 179);"> <canvas style="border:solid 2px red;margin: 50px;" id="can" height="600" width="600"></canvas> <div id="ts" style="font-size: 50px;d
原生js制作简单的五子棋效果
weixin_53213705的博客
05-11 542
效果图： 这个棋盘是我在网上扣的图，总的来说，就是两个按钮 一个棋盘，我把图片当成背景图，在section里面放了15 × 15 个div（这个可以在js里面加div也可以在html写‘ div*225’），利用padding 和弹性布局 确保div正好在点上。 section{ background-image: url(./img/五子棋.png); width: 555px; height: 555px..
原生js完成的五子棋人机大战
m0_64804076的博客
07-29 1417
本系统是以java作为基础实现的，利用VisualStudioCode软件开发一个页面简洁的人机对战五子棋游戏，本系统采用html语言，使用css技术对界面进行了美化，再通过JavaScript创建电脑对象、棋子对象等等一系列对象让游戏贯穿起来，使其得以运行。游戏利用红黑两色棋子，实现双方的棋子区别，在程序能够在下子处重复下子时提醒，随时保存游戏，ai根据当前形势进行判断下子，判断胜负。五子棋作为中国古代的传统黑白棋种之一，有着广泛的群众基础，是一种老少皆宜的棋类休闲游戏。...
原生js扫雷游戏
02-24
基于原生js写的扫雷游戏，代码里面有详细注释，大家可以看看。
原生js实现扫雷小游戏
11-29
【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里，开发者可以利用HTML和CSS构建游戏界面，然后用JavaScript来处理游戏逻辑和交互。这篇...
原生js扫雷源码（详细注释）
11-14
扫雷源码 ,原生js写的，注释很详细，有不是很完善的地方，但是功能都实现了
基于原生JavaScript实现的扫雷小游戏.zip
最新发布
10-23
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
原生js实现的扫雷小游戏
02-26
【原生JS实现的扫雷小游戏】是一款基于JavaScript语言开发的经典电脑游戏，旨在提供一个纯JavaScript环境下的扫雷体验。这款游戏的实现展示了JavaScript在构建交互式网页应用方面的强大能力，尤其是对于事件处理、...
原生js实现的单机五子棋小游戏
05-19
这个是用原生js实现的单机五子棋小游戏，能准确实现落子、判断输赢、平局等。
原生js实现单机五子棋游戏
06-29
利用原生js实现了单机的五子棋游戏，能判断输赢，是否平局，是否已经有棋子等。
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js原生五子棋小游戏
11-02
纯js文本编写的五子棋，可以悔棋，人机对战，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
纯Js写的五子棋
04-24
纯Js写的五子棋 各个浏览器兼容 各个浏览器兼容
原生js实现五子棋
dianfenju4557的博客
07-25 287
为什突然做这个，因为这是个笔试题，拖了一个月才写（最近终于闲了O(∩_∩)O），废话不多说，说说这个题吧 题目要求 编写一个单机【五子棋】游戏，要求如下： 1.使用原生技术实现，兼容 Chrome 浏览器即可。 2.实现胜负判断，并给出赢棋提示；任意玩家赢得棋局，锁定棋盘。 3.请尽可能的考虑游戏的扩展性，界面可以使用 DOM / Canvas 实现。考虑后续切换界面实现的方式成本最...
原生js实现 五子棋
anhuyong5631的博客
04-26 213
先初始化棋盘 HTML: <!--棋盘--> <div class="grid"></div> CSS： /*棋盘*/ .grid{ position: relative; width: 762px; height: 762px; background-image: url('./image/timg.jpg');...
用javascript实现五子棋(一)
热门推荐
从零开始的博客
10-04 2万+
大学毕业进了公司学了几个月的web开发,只会用jquery做事,但是又不甘心,又想要深入的学习一下js,但是无论怎么学都感觉自己抓不到要领。于是决定通过写js游戏来锻炼一下自己。 一、游戏背景画面 既然是锻炼js能力，用图片当背景怎么行，这里我选择了html5的canvas标签来绘制五子的整个背景，html代码如下 五子棋游戏 后台的绘制背
用原生js写一个扫雷小游戏
03-31
很抱歉，作为AI语言模型，我没有能力提供完整的编程代码。不过，我可以给您提供一些实现扫雷游戏的思路。 1. 创建游戏界面：可以使用HTML和CSS创建游戏界面，包括游戏面板、方块、标记等。 2. 创建游戏逻辑：使用JavaScript实现游戏的逻辑，包括生成随机雷区、计算周围雷数、打开方块、标记方块等。 3. 事件监听：为游戏界面中的方块绑定事件监听，包括左键单击、右键单击等。 4. 游戏结束判断：在游戏中判断是否胜利或失败，胜利条件是所有非雷方块都已打开，失败条件是踩到雷。 5. 游戏状态更新：根据游戏的状态，更新游戏界面，包括方块的显示状态、标记状态等。 希望这些思路能够帮到您。如果您有任何其他问题，可以随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值