网页版扫雷

最新推荐文章于 2026-03-26 20:52:49 发布
原创 最新推荐文章于 2026-03-26 20:52:49 发布 · 7.7k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#游戏 #javascript #html5 #css3
本文提供了一个简单的HTML扫雷游戏代码示例，通过构建表格结构来模拟游戏界面，并使用JavaScript实现游戏逻辑，包括计时器、剩余雷数显示等功能。

新建一个空html文件，粘贴下面的代码，保存后，用浏览器打开就可以玩了（兼容IE10）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫雷</title>
    <style type="text/css">
        .container {margin: auto;width: 960px;}
        .panel {position: relative;height: 40px;font-size: 18px;}
        .time-container {position: absolute;height: 30px;left: 60px;top: 0;bottom: 0;margin: auto;}
        .count-container {position: absolute;height: 30px;right: 60px;top: 0;bottom: 0;margin: auto;}
        .time,
        .count {display: inline-block;width: 60px;color: #F00000;}
        .sweep {
            display: table;border-collapse: collapse;width: 960px;height: 512px;table-layout: fixed;
            -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
            cursor: default;}
        .table-row {display: table-row;}
        .table-cell {
            display: table-cell;border: 1px solid #333333;box-shadow: 0 0 6px #CCCCCC inset;
            width: 32px;height: 32px;background: #6090FF;text-align: center;
            vertical-align: middle;font-size: 16px;color: #333333;font-weight: 700;}
        .color-1 {color: #00AA00;}
        .color-2 {color: #3060FF;}
        .color-3 {color: #CC0000;}
        .color-4 {color: #0000AA;}
        .color-5 {color: #880000;}
        .color-6 {color: #007f7b;}
        .color-7 {color: #000000;}
        .color-8 {color: #666666;}
        .show {background: #FFFFFF;}
    </style>
</head>
<body>
    <div class="container">
        <div class="panel">
            <div class="time-container"><span>已用时: </span><span id="time" class="time">0</span></div>
            <div class="count-container"><span>剩余雷数: </span><span id="count" class="count">99</span></div>
        </div>
        <div id="sweep" class="sweep">
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
            <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function Mine(isMine) {
        this.isMine = isMine;
        this.num = 0;
        this.status = 0;
        this.row = 0;
        this.column = 0;
    }

    var param = {rows: 16, columns: 30, mineCount: 99, leftCount: 0, showCount: 0, minest: [], running: false};
    var sweep = document.querySelector('#sweep'),
        tableCells = document.querySelectorAll('.table-cell');
    var time = document.querySelector('#time'),
        count = document.querySelector('#count');
    var initTime = +new Date();
    init();
    function init() {
        var minest = param.minest,
            rows = param.rows,
            columns = param.columns;
        param.showCount = 0;
        param.leftCount = param.mineCount;
        count.innerHTML = param.leftCount;
        minest.length = 0;
        var arr = [];
        for (var i = 0; i < rows * columns; i++) {
            arr.push(new Mine(i < param.mineCount));
        }
        var minesr = null, s = null;
        for (var i = 0; i < rows * columns; i++) {
            if (i % columns === 0) {
                minesr = [];
            }
            s = arr.splice((Math.random() * arr.length) | 0, 1)[0];
            s.row = (i / columns) | 0;
            s.column = i % columns;
            minesr.push(s);
            if (i % columns + 1 === columns) {
                minest.push(minesr);
            }
        }
        var m = 0;
        for (var i = 0; i < rows * columns; i++) {
            m = 0;
            findRounds(minest[(i / columns) | 0][i % columns]).forEach(function (t) {
                m += t.isMine;
            });
            minest[(i / columns) | 0][i % columns].num = m;
            tableCells[i].innerHTML = '';
            tableCells[i].classList.remove('show');
            tableCells[i].setAttribute('data-index-row', (i / columns) | 0);
            tableCells[i].setAttribute('data-index-column', i % columns);
        }
    }
    function show(mine) {
        if (mine.status === 1 || mine.status === 2) {
            return;
        }
        var cell = tableCells[mine.row * param.columns + mine.column];
        mine.status = 1;
        cell.classList.add('show');
        cell.innerHTML = mine.isMine ? ('<svg t="1606566388346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4955" width="28" height="28"><path d="M348.16 958.46399999c-165.888-1.024-299.52-135.168-298.496-300.032C50.176 495.10399999 184.32 362.49599999 348.16 363.00799999c165.376 0.512 298.496 136.704 297.472 305.152-0.512 159.232-136.192 291.328-297.472 290.304z m215.04-315.904c-17.408 72.192-55.808 128-116.224 167.424-60.928 39.424-127.488 49.664-200.704 37.376 53.248 47.104 151.04 57.856 229.376 6.656 69.12-45.568 110.08-132.608 87.552-211.456zM833.024 306.68799999c10.752 7.168 20.48 13.312 29.696 19.456-38.4 60.416-122.88 60.928-163.328 2.56-7.168-10.24-12.8-20.992-20.48-30.72-29.696-36.864-80.384-31.744-103.424 11.264 12.8 7.68 26.112 15.36 38.912 23.552 21.504 13.312 26.624 30.72 13.824 52.736-9.728 17.408-20.48 34.816-32.256 53.76-46.08-51.2-101.888-83.968-169.472-101.376 13.312-22.016 24.576-42.496 37.888-61.952 9.728-13.824 26.112-16.384 43.008-8.192 10.752 5.12 20.992 11.776 32.768 18.432 4.096-5.632 8.192-11.264 12.288-16.384 39.936-50.176 114.688-50.688 154.624-0.512 6.656 8.192 12.288 16.896 17.92 25.6 29.696 43.52 69.12 48.128 108.032 11.776zM948.224 369.66399999c-23.04-0.512-32.256-6.656-31.744-20.992 0.512-12.8 8.192-18.432 20.48-17.92 23.04 0.512 34.816 7.68 33.792 21.504-1.024 13.824-9.216 18.432-22.528 17.408zM871.424 213.50399999c-1.024 28.16-10.24 40.96-24.064 39.424-12.288-1.536-17.92-9.728-17.408-21.504 0.512-20.48 10.752-35.328 24.064-31.744 7.68 2.048 13.824 10.752 17.408 13.824zM896 279.55199999c2.56-16.896 19.968-33.28 33.792-32.768 11.264 0.512 18.432 6.144 17.92 18.432 0 11.264-17.92 28.16-30.208 26.624-7.68-1.536-14.336-8.192-21.504-12.288z" p-id="4956" fill="#707070"></path></svg>') : ('<span class="color-' + mine.num + '">' + (mine.num || '') + '</span>');
        if (mine.isMine) {
            setTimeout(function () {
                param.running = false;
                alert('失败了');
                init();
            }, 25);
            return;
        }
        param.showCount++;
        if (param.showCount >= param.rows * param.columns - param.mineCount) {
            setTimeout(function () {
                param.running = false;
                alert('恭喜您赢了');
                init();
            }, 25);
            return;
        }
        if (mine.num === 0) {
            findRounds(mine).forEach(function (t) {
                show(t);
            });
        }
    }
    function sign(mine) {
        if (mine.status === 1) {
            return;
        }
        var cell = tableCells[mine.row * param.columns + mine.column];
        mine.status = 2;
        param.leftCount--;
        count.innerHTML = param.leftCount;
        cell.innerHTML = '<svg t="1606549387460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15295" width="28" height="28"><path d="M437.7 833.3c-13.8 0-25.2-11.3-25.2-25.2V225.6l50.3 29.2v553.4c0 13.8-11.3 25.1-25.1 25.1z" fill="#FF3e26" p-id="15296"></path><path d="M714.1 399.9L412.3 225.6v348.5z" fill="#FF3333" p-id="15297"></path></svg>';
    }
    function unsign(mine) {
        if (mine.status === 1) {
            return;
        }
        var cell = tableCells[mine.row * param.columns + mine.column];
        mine.status = 0;
        param.leftCount++;
        count.innerHTML = param.leftCount;
        cell.innerHTML = '';
    }
    function findRounds(mine) {
        var mines = [],
            row = mine.row,
            column = mine.column,
            minest = param.minest,
            rows = param.rows,
            columns = param.columns;
        var round = null;
        if (row > 0) {
            if (column > 0) {
                round = minest[row - 1][column - 1];
                if (round.status !== 1) {
                    mines.push(round);
                }
            }
            round = minest[row - 1][column];
            if (round.status !== 1) {
                mines.push(round);
            }
            if (column < columns - 1) {
                round = minest[row - 1][column + 1];
                if (round.status !== 1) {
                    mines.push(round);
                }
            }
        }
        if (column > 0) {
            round = minest[row][column - 1];
            if (round.status !== 1) {
                mines.push(round);
            }
        }
        if (column < columns - 1) {
            round = minest[row][column + 1];
            if (round.status !== 1) {
                mines.push(round);
            }
        }
        if (row < rows - 1) {
            if (column > 0) {
                round = minest[row + 1][column - 1];
                if (round.status !== 1) {
                    mines.push(round);
                }
            }
            round = minest[row + 1][column];
            if (round.status !== 1) {
                mines.push(round);
            }
            if (column < columns - 1) {
                round = minest[row + 1][column + 1];
                if (round.status !== 1) {
                    mines.push(round);
                }
            }
        }
        return mines;
    }
    (function timing() {
        if (param.running) {
            time.innerHTML = Math.round((+new Date() - initTime) / 1000);
        } else {
            time.innerHTML = 0;
        }
        setTimeout(function () {
           timing();
        }, 100);
    })();

    sweep.addEventListener('click', function (e) {
        e.preventDefault();
        var target = e.target;
        var minest = param.minest;
        if (!target.classList || !target.classList.contains('table-cell')) {
            return;
        }
        var row = target.getAttribute('data-index-row') - 0,
            column = target.getAttribute('data-index-column') - 0;
        var mine = minest[row][column];
        if (!param.running) {
            initTime = +new Date();
            param.running = true;
        }
        show(mine);
    }, false);

    sweep.addEventListener('dblclick', function (e) {
        e.preventDefault();
        var target = e.target;
        var minest = param.minest;
        if (!target.classList || !target.classList.contains('table-cell')) {
            target = target.parentNode || target;
            if (!target.classList || !target.classList.contains('table-cell')) {
                return;
            }
        }
        var row = target.getAttribute('data-index-row') - 0,
            column = target.getAttribute('data-index-column') - 0;
        var mine = minest[row][column];
        if (mine.status === 1) {
            var rounds = findRounds(mine).filter(function (item) {
                return item.status !== 2;
            });
            if (rounds.length === 1) {
                if (rounds[0].isMine && rounds[0].status === 0) {
                    sign(rounds[0]);
                } else {
                    show(rounds[0]);
                }
            } else {
                var hasMine = false;
                for (var i = 0; i < rounds.length; i++) {
                    if (rounds[i].isMine && rounds[i].status === 0) {
                        hasMine = true;
                        break;
                    }
                }
                if (!hasMine) {
                    rounds.forEach(function (t) {
                        show(t);
                    });
                }
            }
        }
    }, false);

    sweep.addEventListener('contextmenu', function (e) {
        e.preventDefault();
        var target = e.target;
        var minest = param.minest;
        if (!target.classList || !target.classList.contains('table-cell')) {
            target = target.parentNode || target;
            if (!target.classList || !target.classList.contains('table-cell')) {
                target = target.parentNode || target;
                if (!target.classList.contains('table-cell')) {
                    return;
                }
            }
        }
        var row = target.getAttribute('data-index-row') - 0,
            column = target.getAttribute('data-index-column') - 0;
        var mine = minest[row][column];
        if (mine.status === 2) {
            unsign(mine);
        } else if (mine.status === 0) {
            sign(mine);
        }
    }, false);
</script>
</html>
wpf demo 扫雷 计算器
05-25
wpf demo 控件使用 binding使用 图标使用 依赖属性使用 附加属性使用 路由事件使用
C语言实现网页版扫雷
m0_74316391的博客
05-09 9546
C语言实现扫雷
扫雷游戏（实现了网页版的扫雷游戏的所有逻辑）
fight_p的博客
05-08 1万+
实现了扫雷的全部逻辑
一个可以随时随地玩的经典扫雷网站：重温Windows时代的纯粹乐趣
最新发布
u014717505的博客
03-26 235
除了经典模式，这个网站还支持一个非常实用的功能：👉自定义棋盘尺寸和地雷数量做一个超小棋盘快速放松或者挑战超大棋盘测试极限自由控制难度，而不是被固定模式限制这点相比原版扫雷来说，灵活性更高，也更适合不同玩家的需求。没有复杂的系统，没有干扰的元素，只有最纯粹的扫雷体验。有时候，最经典的，反而最耐玩。
python3-扫雷网页版
The research on computer technolog
11-27 1564
button_text参数：当读取一个窗口时，返回的就是这个文本参数，该参数将告诉您单击了哪个按钮；在按钮调用中更改button_text参数，可更改所有按钮的文本。在单个行中指定一个以上的元素时，需要使用Column Element。纽扣是最重要的元素，它们接收用户点击，激活大部分程序功能。想要定义自己的按钮，通常可以使用button Element button来实现。也可使用key参数，这样，在如下的layout中，当单击按钮时，从Window.read()调用返回的事件是key的值"
C语言 | 扫雷小游戏（可自动展开）
Nice_W的博客
10-25 1万+
在我小时候的记忆里，每台电脑总会有那么几款经典的游戏，今天给大家带来实现的这款游戏相信大家会油然而生出一种熟悉感，这款游戏叫扫雷，相信大家大部分都有接触过这款游戏，今天我就给大家带来该游戏的实现和代码。
网页版扫雷小游戏
justBeHerHero
05-07 4万+
扫雷小游戏（原生js） 实验介绍 实验简介 先上一张效果图 源代码获取（非本文章中代码） $ git clone https://github.com/shiyanlou/js-minesweeper 学习网页 实验楼-网页版扫雷 实现原理 扫雷游戏的规则: 游戏面板上有一些格子，每个格子中有一个数字（空白表示数字为 0）或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的...
扫雷游戏网页版_佛性扫雷 炸不炸随缘
weixin_39967670的博客
12-17 2651
好玩扫雷一款简单而又复杂的逻辑推理游戏.说其简单是因为上手容易，原理简单。说其复杂是因为简单的推理可以叠加组合成各种复杂有趣的形状。扫雷就象走迷宫，各有巧妙不同，或箭步如梭，或如履薄冰，或彷徨其中无疾而终。|　今天给大家介绍的是| 在线扫雷 |https://m.saolei.org.cn/扫雷可以说它是全世界最多人玩过的游戏之一，对很多人来说甚至是他们在电脑上接触的第一款游戏。游...
扫雷游戏网页版_经典 Windows 扫雷游戏使用浏览器就可以玩啦
热门推荐
weixin_39517797的博客
12-17 13万+
什么样的游戏好玩在每个人心里的标准是不一样的，作为 90 后的我童年中记忆的游戏无非就是 FC 上的《魂斗罗》、《双截龙》或者《超级玛丽》等等。虽然都是满满的像素风，但却也是我的最爱。时间总是很快的就过去，长大的人想回到小时候的单纯，而还小的人却总想装着变得成熟。我们在得到的同时也在不断的失去，问问现在的你过的是你想要的生活吗？不好意思，话题跑偏了...扫雷游戏我想很多人都不陌生，尤其是...
网页版扫雷 -- React练习
一朵小呆毛
04-06 1575
开会不准带电脑，手机app玩扫雷玩到眼快瞎，而且每次都要忍受长达十秒的广告，自己写一个算了。 详细代码在git里，还在更新。 第一步： React & webpack setup 用webpack主要目的是为了搭建一个简单的webpack server， 顺带着直接用它打包发布好了. set up React React需要安装一系列相关包，什么ReactDom啊之类的，直接 npm i...
在线网页版扫雷游戏HTML源码：在线扫雷，轻松锻炼脑力
gitblog_06793的博客
05-10 480
在线网页版扫雷游戏HTML源码：在线扫雷，轻松锻炼脑力 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在线网页版扫雷游戏HTML源码是一个开源项目，为用户提供了一个在浏览器中直接体验扫雷游戏的平台。无需下载和安装，玩家只需要打开网页，即可享受这款经典智力游戏带来的乐趣。 项目技术分析 此项目基于HTML、CSS和JavaScript技术构建，利用现代浏览器对JavaS...
制作扫雷（简易版）
yyy_3yu的博客
12-15 6741
这篇博客将为大家带来一个c语言写的小程序——扫雷。用到的知识——数组，函数。快来围观呀！
扫雷游戏
Rookie Maker的博客
12-16 4748
c语言，大家三连哦！
简易版扫雷游戏的实现
xiaowangzaistudy的博客
09-15 5396
通过玩扫雷游戏，我们大致了解了扫雷游戏：有棋盘，根据棋盘大小来布置雷的个数，玩游戏者可以通过鼠标的点取来判断该坐标处是否有雷，有雷就被炸死了，游戏失败，想要游戏成功，依据棋盘雷的部署提示来排查除雷以外非雷的位置。依次点击，直到最后一个位置。我们拿最简单9*9的棋盘来讲解1、首先在棋盘中我们需要存储信息：雷，非雷位置周围雷的个数，存储信息我们可以用二维数组来表示。二维数组的类型的选择，这可有讲究了！
网页版扫雷（HTML/CSS/JS实践）
alllliy的博客
10-09 5925
html JavaScript版扫雷 剩余雷数：0 个 持续时间: 0 秒 难度选择： 初级（10*10） 中级（15*15） 高级（20*20）
servlet实现网页版的猜数字_前端经典练手项目用 JavaScript 实现网页版扫雷
weixin_39548805的博客
11-21 601
相信大家都玩过扫雷这个经典的小游戏，它规则简单但耐玩。你有没有想过自己动手开发一个呢？今天我们就教你做一个网页版的扫雷，先上一张效果截图：知识点javascriptcss3扫雷原理实验原理在开始开发之前，我们先来设计一下游戏算法。扫雷游戏的规则很简单：游戏面板上有一些格子，每个格子中有一个数字(空白表示数字为 0)或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的就是把数字格...
网页版扫雷游戏
2301_80293394的博客
05-09 2197
2.//定义行列，方便修改好啦，以上就是今天的全部分享了，如有不足欢迎家人们评论区批评指正，如果这篇文章对你有用的话，可以给我来个一键三连嘛（写了一天了，求赞求支持/(ㄒoㄒ)/~~）
扫雷游戏的实现
LCL200356的博客
07-18 3229
扫雷游戏网页版 - Minesweeper本站提供了经典扫雷游戏，并略作改进，在电脑或手机上打开网页就可以玩，无需下载安装。增加了满屏级别，自适应屏幕大小。成绩榜实时显示大家的在线扫雷成绩。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值