html+js+css做的扫雷

于 2024-06-28 09:45:25 发布
阅读量1.3k 收藏 38
点赞数 34
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w11111xxxl/article/details/140034003
版权

做了个扫雷💣    8×8大小  源代码在文章最后

界面

先点击蓝色开局按钮

0de777cba3484a609a2871b71c1af3d7.jpg

 然后就可以再扫雷的棋盘上玩

db50bebc84fb45da8770963eb94a2f74.jpg

0代表该位置没有雷

其他数字代表周围雷的数量

1d0c1a9ea6604223a47bc4b1d2a6c667.jpg

 源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>扫雷游戏</title>

    <style>

        /* CSS代码开始 */

        body {

            background-color: #f0f0f0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

 

        .container {

            background-color: white;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        }

 

        .title {

            text-align: center;

            font-size: 2em;

            margin-bottom: 20px;

        }

 

        .start-game-btn {

            display: block;

            margin: 0 auto 20px;

            padding: 10px 20px;

            background-color: #007bff;

            color: white;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            transition: all 0.3s ease;

        }

 

        .start-game-btn:hover {

            background-color: #0056b3;

        }

 

        td {

            width: 30px;

            height: 30px;

            text-align: center;

            vertical-align: middle;

            border: 1px solid #ddd;

            cursor: pointer;

        }

        /* CSS代码结束 */

    </style>

</head>

<body>

    <div class="container">

        <h1 class="title">扫雷</h1>

        <button id="startGameBtn" class="start-game-btn">开局</button>

        <table id="mineField"></table>

    </div>

    <script>

        /* JavaScript代码开始 */

        document.getElementById('startGameBtn').addEventListener('click', startGame);

 

        function startGame() {

            const mineField = document.getElementById('mineField');

            mineField.innerHTML = '';

 

            const rows = 8, cols = 8;

            const mines = 10;

 

            for (let i = 0; i < rows; i++) {

                let row = document.createElement('tr');

                for (let j = 0; j < cols; j++) {

                    let cell = document.createElement('td');

                    cell.addEventListener('click', () => revealCell(i, j));

                    row.appendChild(cell);

                }

                mineField.appendChild(row);

            }

 

            let mineLocations = [];

            while (mineLocations.length < mines) {

                let x = Math.floor(Math.random() * rows);

                let y = Math.floor(Math.random() * cols);

                if (!mineLocations.includes(x + ',' + y)) {

                    mineLocations.push(x + ',' + y);

                    document.getElementById('mineField').rows[x].cells[y].setAttribute('data-mine', 'true');

                }

            }

 

            function revealCell(row, col) {

                let cell = document.getElementById('mineField').rows[row].cells[col];

                if (cell.getAttribute('data-revealed') === 'true') return;

                cell.setAttribute('data-revealed', 'true');

 

                if (cell.getAttribute('data-mine') === 'true') {

                    alert('失败！');

                    resetGame();

                } else {

                    cell.textContent = getAdjacentMinesCount(row, col);

                    if (cell.textContent === '0') {

                        revealAdjacentCells(row, col);

                    }

                    checkWin();

                }

            }

 

            function getAdjacentMinesCount(row, col) {

                let count = 0;

                for (let i = -1; i <= 1; i++) {

                    for (let j = -1; j <= 1; j++) {

                        if (i === 0 && j === 0) continue;

                        let r = row + i, c = col + j;

                        if (r >= 0 && r < rows && c >= 0 && c < cols) {

                            if (document.getElementById('mineField').rows[r].cells[c].getAttribute('data-mine') === 'true') {

                                count++;

                            }

                        }

                    }

                }

                return count;

            }

 

            function revealAdjacentCells(row, col) {

                for (let i = -1; i <= 1; i++) {

                    for (let j = -1; j <= 1; j++) {

                        if (i === 0 && j === 0) continue;

                        let r = row + i, c = col + j;

                        if (r >= 0 && r < rows && c >= 0 && c < cols) {

                            revealCell(r, c);

                        }

                    }

                }

            }

 

            function checkWin() {

                let revealedCells = 0;

                for (let i = 0; i < rows; i++) {

                    for (let j = 0; j < cols; j++) {

                        if (document.getElementById('mineField').rows[i].cells[j].getAttribute('data-revealed') === 'true') {

                            revealedCells++;

                        }

                    }

                }

                if (revealedCells === rows * cols - mines) {

                    alert('成功！');

                    resetGame();

                }

            }

 

            function resetGame() {

              window.location.reload();

            }

        }

        /* JavaScript代码结束 */

    </script>

</body>

</html>

睿智的海鸥
关注
  • 34
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
运用HTML+CSS+JavaScript实现扫雷游戏
坚持不懈的大白的博客
02-08 929
最近玩了一个小游戏扫雷，玩着玩着觉得这游戏挺有意思的，不如自己做一个出来，这样既可以让我更加了解扫雷这个游戏，同时也能敲敲代码，提高自己写代码的速度，哈哈！不过，通过做这个扫雷游戏，我也感觉又复习了一下过去学习数据结构的栈(用来解决迷宫问题的)。
扫雷游戏javascript html
GS2016的博客
01-12 593
地雷游戏                      .guoshengcontentdiv{                 width:1255px;                 height:600px;                 margin:auto;             }             .guoshengonediv {           
扫雷源代码（HTML）
a15919754608的博客
02-10 2364
扫雷代码，拿走不谢！
HTML5扫雷游戏源码
03-30
HTML5扫雷游戏源码.界面非常美观.仅支持Html5 的浏览器.-Minesweeper HTML5 source. Interface is very beautiful. Only support Html5 browser.
html扫雷代码_厉害了，一个自动扫雷游戏项目！
weixin_35782323的博客
01-20 350
转载自公众号【视学算法】原文：https://www.cnblogs.com/chestnut-egg/p/9302238.html自动扫雷一般分为两种，一种是读取内存数据，而另一种是通过分析图片获得数据，并通过模拟鼠标操作，这里我用的是第二种方式。一、准备工作1、扫雷游戏我是win10，没有默认的扫雷，所以去扫雷网下载http://www.saolei.net/BBS/2、python...
html实现扫雷小游戏(附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-17 7486
html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。
扫雷（HTML+JS+CSS）
03-13
本项目使用HTML、JavaScript（JS）和CSS这三种技术实现了一个网页版的扫雷游戏。下面我们将详细探讨这三个方面的知识。 **HTML（超文本标记语言）** HTML是网页的基础结构，负责定义页面的布局和内容。在这个扫雷...
仿扫雷小游戏（纯原生js+html+css）
07-06
扫雷小游戏制作，只需200行代码实现
HTML+JavaScript实现扫雷小游戏
12-13
本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码，供大家参考，具体内容如下 工具：Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> ...
基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip
最新发布
01-11
基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览...
html实现扫雷游戏
09-25
通过html+css+jquery实现经典扫雷游戏，可以直接在浏览器上运行
扫雷HTML5游戏源码
06-19
扫雷HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
html5纯代码扫雷游戏实例
02-27
这是用html5纯代码制作的扫雷游戏，里边的注释非常多，非常适合html5的初学者学习。本实例对于学习了深入了解html5和canvas绘图，canvas响应事件非常有帮助。欢迎下载。
HTML+js写的一个扫雷游戏
04-21
【HTML+JS实现扫雷游戏】是一个典型的网页编程项目，主要使用了HTML（超文本标记语言）和JavaScript（脚本语言）这两种核心技术。这个项目旨在教你如何利用前端技术构建一个互动的游戏界面，模拟经典的Windows系统...
HTML使用jQuery完成一个简单的扫雷游戏
m0_52847482的博客
11-16 941
使用html和jquery完成一个简单的扫雷小游戏
html扫雷源码js,js实现扫雷源代码
weixin_42160424的博客
06-20 692
经过一段时间学习，对javascript有了一个初步的了解自己制作了一个扫雷，源代码+详细注释放在后面，先看下效果图。初始化界面：游戏界面：难易程度切换：游戏结束：思路采用构造函数的形式进行全局开发生成游戏棋盘利用双层for循环创建设定的棋盘大小为每个单元格的dom元素创建一个属性，该属性用于保存单元格的所有信息，如x,y坐标,value,是否为雷等随机生成炸弹利用随机数，随机生成炸弹x,y坐标，...
使用js+html+css完成扫雷
07-20
你可以使用 JavaScript、HTML 和 CSS 来完成一个简单的扫雷游戏。以下是一个基本的实现示例： HTML： ```html <!DOCTYPE html> <html> <head> <title>扫雷游戏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="board"></div> <script src="script.js"></script> </body> </html> ``` CSS（style.css）： ```css #board { display: grid; grid-template-columns: repeat(10, 30px); grid-template-rows: repeat(10, 30px); } .cell { border: 1px solid #ccc; background-color: #eee; display: flex; align-items: center; justify-content: center; font-size: 18px; } .hidden { background-color: #ccc; } .mine { background-color: red; } ``` JavaScript（script.js）： ```javascript document.addEventListener('DOMContentLoaded', () => { const board = document.getElementById('board'); const size = 10; const mineCount = 10; let cells = []; function createBoard() { for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.row = i; cell.dataset.col = j; cell.addEventListener('click', handleCellClick); board.appendChild(cell); cells.push(cell); } } } function generateMines() { const mines = Array(mineCount).fill(null); mines.forEach(() => { let randomCell = cells[Math.floor(Math.random() * cells.length)]; while (randomCell.classList.contains('mine')) { randomCell = cells[Math.floor(Math.random() * cells.length)]; } randomCell.classList.add('mine'); }); } function handleCellClick(event) { const cell = event.target; if (cell.classList.contains('mine')) { revealMines(); alert('Game Over!'); } else { const row = parseInt(cell.dataset.row); const col = parseInt(cell.dataset.col); const mineCount = countAdjacentMines(row, col); if (mineCount > 0) { cell.textContent = mineCount; } else { cell.classList.add('hidden'); revealEmptyCells(row, col); } } } function countAdjacentMines(row, col) { let count = 0; for (let i = row - 1; i <= row + 1; i++) { for (let j = col - 1; j <= col + 1; j++) { if (i >= 0 && i < size && j >= 0 && j < size) { const adjacentCell = cells.find(cell => cell.dataset.row == i && cell.dataset.col == j); if (adjacentCell && adjacentCell.classList.contains('mine')) { count++; } } } } return count; } function revealEmptyCells(row, col) { for (let i = row - 1; i <= row + 1; i++) { for (let j = col - 1; j <= col + 1; j++) { if (i >= 0 && i < size && j >= 0 && j < size) { const adjacentCell = cells.find(cell => cell.dataset.row == i && cell.dataset.col == j); if (adjacentCell && !adjacentCell.classList.contains('hidden') && !adjacentCell.classList.contains('mine')) { adjacentCell.classList.add('hidden'); const adjacentMineCount = countAdjacentMines(i, j); if (adjacentMineCount === 0) { revealEmptyCells(i, j); } else { adjacentCell.textContent = adjacentMineCount; } } } } } } function revealMines() { cells.forEach(cell => { if (cell.classList.contains('mine')) { cell.classList.add('hidden'); } }); } createBoard(); generateMines(); }); ``` 这是一个简单的实现，通过点击格子来揭示内容。你可以根据自己的需求进行扩展和改进。希望对你有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

睿智的海鸥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值