html实现扫雷游戏

最新推荐文章于 2024-04-12 20:32:51 发布
最新推荐文章于 2024-04-12 20:32:51 发布
阅读量5.5k 收藏 11
点赞数 4
分类专栏： 前端（Html+CSS+JavaScript） 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45828598/article/details/109401871
版权

实现代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>html {
  font-size: 10px;
}

body {
  counter-reset: total cleared bombs flagged;
  font-size: 1.6rem;
  font-family: sans-serif;
}
H1 {
  font-size:2rem;
  margin:1rem auto;
  width:fit-content
}
#game {
  overflow:hidden;
  position:relative;
  margin:0 auto;
  background:lightgrey;
  width:fit-content;
  height:fit-content;
  padding:1rem;
  border:0.3rem outset lightgrey;
  border-radius:1rem;
}
/*
 grid square.
*/

.square {
  position: relative;
  float: left;
  display: block;
  width: 2rem;
  height: 2rem;
  border: 1px grey solid;
  background-color: lightgrey;
  text-align: center;
}
/*
these will be the "buttons"
that hide the grid.
*/

.square > label,
.square > .flag {
  position: absolute;
  left: -0.1rem;
  top: -0.1rem;
  right: -0.1rem;
  bottom: -0.1rem;
  border: 0.2rem outset grey;
  background-color: darkgrey;
}
/*
switch for flag mode and clear mode
*/
#flag-mode {
  display:none;
}
/*
buttons for global settings
*/
[for="flag-mode"],
[for="show-bombs"] {
  display:block;
  margin:0 auto;
  width:fit-content;
  background:lightgrey;
  padding:0 0.5rem;
  border:2px outset grey;
  border-radius:0.5rem;
  margin:0.2rem auto;
}
#flag-mode:not(:checked) + [for="flag-mode"]:after {
  content:" OFF ";
  font-weight:bold;
}
#flag-mode:checked + [for="flag-mode"]:after {
  content:" ON ";
  font-weight:bold;
}

/*
checkboxes to control state of each square
these need to be "visible"
for the counter to work.
push them far off to the left.
*/
.open-square,.flag-square {
  position: absolute;
  left: -1000rem;
}
/*
count the total clearable
*/
.open-square:not(.bomb) {
  counter-increment:total;
}
/*
count the number of bombs
*/
.open-square.bomb {
  counter-increment:bombs;
}
/*
hide the label "button" when it's clicked
*/
.open-square:checked + .square > label {
  display: none;
}
/*
show the number of surounding bombs (if any)
with different colors for the count values
*/
:not(.bomb)[data-count] + .square:before {
  line-height:2rem;
  font-weight:bold;
}
:not(.bomb)[data-count="1"] + .square:before {
  content:"1";
  color: blue;
}
:not(.bomb)[data-count="2"] + .square:before {
  content:"2";
  color: green;
}
:not(.bomb)[data-count="3"] + .square:before {
  content:"3";
  color: red;
}
:not(.bomb)[data-count="4"] + .square:before {
  content:"4";
  color: darkblue;
}
:not(.bomb)[data-count="5"] + .square:before {
  content:"5";
  color: brown;
}
:not(.bomb)[data-count="6"] + .square:before {
  content:"6";
  color: cyan;
}
:not(.bomb)[data-count="7"] + .square:before {
  content:"7";
  color: black;
}
:not(.bomb)[data-count="8"] + .square:before {
  content:8;
  color: grey;
}
/*
bomb square.
*/
.bomb + .square {
  background-color: red
}
.bomb + .square:before {
  content: "💣";
  line-height: 2rem;
  font-size: 1.2rem;
}
/*
default hide the flag
*/
.flag {
  display:none;
}
/*
show the flag if square is flagged
and count it
*/
.flag-square:checked ~ .flag {
  display:block;
  counter-increment:flagged;
}
/*
display flag as needed
*/
.flag-square:checked ~ .flag-label:before,
.flag-square:checked ~ .flag:before {
content:"🚩"
}
/*
hide the label when not in flag mode
*/
#flag-mode:not(:checked) ~ .square > .flag-label {
  display:none;
}
/*
only show the flag if the square isn't in "show" mode.
*/
#flag-mode:checked ~ .show-square:not(:checked) + .square > .flag-label {
  display:block;
}

/*
increment cleared counter 
for each non-bomb checked
and keep the total intact
*/
.open-square:not(.bomb):checked {
  counter-increment: total cleared;
}
/*
various counter displays
*/
.bombs {
  width:50%;
  text-align:center;
}
.score {
  clear:both;
  float:right;
  text-align:right;
  width:50%;
  text-align:center;
}

/*
track the bombs
*/
.bombs:after {
  content: counter(bombs) "🚩" counter(flagged);
  line-height:3rem;
  border:0.2rem inset lightgrey;
  padding:0.2rem 0.5rem;
  background-color:white;
  border-radius:0.5rem;
}
/*
track the total cleareable & cleared 
*/
.score:after {
  content: counter(cleared) " of " counter(total);
  line-height:3rem;
  border:0.2rem inset lightgrey;
  padding:0.2rem 0.5rem;
  background-color:white;
  border-radius:0.5rem;
}
/*
default setting is the win state
*/
.message {
  clear: left;
  color: limegreen;
  text-align:center;
  font-weight:bold;
}
.message:before {
  content: "(: YOU WIN! :) "
}
/*
  block user interaction with
  game board after a win.
*/
.pane
{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
/*
override for the playing state
*/
.open-square:not(.grouped):not(.bomb):not(:checked) ~ .message:before,
.group-master:not(:checked) ~ .message:before
{
  content: none;
}
/*
  play state. hide the blocking pane.
*/
.open-square:not(.grouped):not(.bomb):not(:checked) ~ .pane,
.group-master:not(:checked) ~ .pane,
.lost-game
{
  display: none;
}
/*
finally, the losing state
*/
.open-square.bomb:checked ~ .message {
  color: red;
}
/*
  reinstate the blocking pane
*/
.open-square.bomb:checked ~ .pane
{
  position:relative;
  display:block;
}
.open-square.bomb:checked ~ .message:before {
  content: " ): You Lose :(" !important;
}
/*
display thre show bombs button if you've lost
*/
.open-square.bomb:checked ~ .lost-game
{
  position:relative;
  display:block;
  z-index:2
}
/*
display any hidden bombs
*/
#show-bombs:checked ~ .bomb + .square > label {
  display:none;
}
/*
mark any falsely flagged squares as wrong.
*/
#show-bombs:checked ~ .open-square:not(.bomb) + .square > .flag:after {
  content: "❌";
  position:absolute;
  top:-0.4rem;
  left:-0.1rem;
}
  </style>
 </head>
 <body>
 <div id="game">
  <h1>Bomb CSSweeper</h1>
  <input type="checkbox" id="show-bombs" hidden>
  <input type="checkbox" id="flag-mode">
  <label for="flag-mode">🚩mode</label>
  <div class="pane"></div>
  <div class="score">Cleared:
    <br>
  </div>
  <div class="bombs">Bombs:
    <br>
  </div>
  <div class="message"></div>
  <div class="lost-game">
    <label for="show-bombs">Show Bombs</label>
  </div>
</div>
<script>
/*
  Using Javascript to :
  - generate a board of randomized size.
  - randomly place bombs
  - insert custom CSS to display board size properly
  - find and group empty & ajacent squares 
    for fast clearing
  - insert custom CSS to handle the group clearing. 
*/
// randomize board size and bomb count
var rows = Math.floor(10 + (Math.random() * 5));
var cols = Math.floor(10 + (Math.random() * 5));
var bombs = Math.floor(15 + (Math.random() * 10));
var i, s, l, fi, fs, fl;
var game = document.getElementById('game');
var pane = game.querySelector('.pane');
var grid = [];
//add stylesheet handle board size
var style = document.createElement('style');
//row wrapping.
style.innerHTML = ".square:nth-of-type(" + cols + "n+1) {clear:left;}\n";
game.insertBefore(style, pane);
//add the grid elements
for (var r = 1; r <= rows; r++) {
  grid[r] = [];
  for (var c = 1; c <= cols; c++) {
    //controls the showing of a grid
    i = grid[r][c] = document.createElement('input');
    i.type = 'checkbox';
    i.classList.add('open-square')
    i.id = 'open-r' + r + '-c' + c;
    i.r = r;
    i.c = c;
    game.insertBefore(i, pane);
    //the actual grid square
    s = document.createElement('span');
    s.classList.add('square');
    game.insertBefore(s, pane);
    //hide the square contents 
    //and switches the show control
    l = document.createElement('label');
    l.htmlFor = i.id;
    l.classList.add('open-label');
    s.appendChild(l);
    //flag switch control
    fi = document.createElement('input');
    fi.type = "checkbox";
    fi.classList.add('flag-square');
    fi.id = 'flag-r' + r + '-c' + c;
    s.appendChild(fi);
    //only visible is squre "flagged"
    //hide the square contents
    //and the show label
    fs = document.createElement('span');
    fs.classList.add('flag');
    s.appendChild(fs);
    //only visible in "flag mode" 
    //(if square not "shown") 
    //and switches the flag control
    fl = document.createElement('label');
    fl.htmlFor = fi.id;
    fl.classList.add('flag-label');
    s.appendChild(fl);
  }
}
//randomly assign bomb state to some
for (var b = 0; b < bombs; b++) {
  do {
    r = 1 + (Math.random() * rows) >> 0;
    c = 1 + (Math.random() * cols) >> 0;
    console.log(r, c, grid[r][c]);
  } while (grid[r][c].classList.contains('bomb'));
  i = grid[r][c];
  i.classList.add('bomb');
  //also increment
  //surronding square's count
  //to indicate number of adjacent
  //bombs.
  var list = getSurrounding(i)
  for (r = 0; r < list.length; r++) {
    i = list[r];
    var count = Number(i.getAttribute('data-count')) || 0;
    i.setAttribute('data-count', ++count);
    i = i.nextElementSibling;
    i.setAttribute('data-count', count);
  }
}
//locate the groups of "empty" squares
var group = 1;
//while an ungrouped empty square exists
while (i = document.querySelector('.open-square:not([data-count]):not(.grouped)')) {
  //create an array of empty squares to group
  var check = [i];
  do {
    //grab a square off the check list
    i = check.pop();
    //get surrounding squares
    list = getSurrounding(i)
    for (r = 0; r < list.length; r++) {
      i = list[r];
      //if they're not part of the group
      if (!i.classList.contains('group' + group)) {
        //mark them as so
        i.classList.add('grouped');
        i.classList.add('group' + group);
        //if they're also empty
        if (!i.getAttribute('data-count')) {
          //add the m to the group check array
          check.push(i);
          //and point their label to the group master switch
          i = document.querySelector('[for="' + i.id + '"]');
          i.htmlFor = 'group' + group;
        }
      }
    }
    //repeat until all empty squares are grouped
  } while (check.length);
  //create the master switch
  i = document.createElement('input');
  i.type = 'checkbox';
  i.classList.add('group-master');
  i.hidden = true;
  i.id = 'group' + group;
  //add styles to disply all squares in the group
  //and increment the cleared counter accordingly
  style.innerHTML += '#group' + group + ':checked ~ .group' + group + ' + .square > label { display:none; }\n' + '#group' + group + ':checked ~ .group' + group + ' { counter-increment:cleared total }\n';
  game.insertBefore(i, style);
  //and move on to the next group (if any)
  group++;
}
//grabs squares around a given square, inclusive
function getSurrounding(i) {
  var rs = Math.max(i.r - 1, 1);
  var re = Math.min(i.r + 1, rows);
  var cs = Math.max(i.c - 1, 1);
  var ce = Math.min(i.c + 1, cols);
  var result = [];
  for (r = rs; r <= re; r++) {
    for (c = cs; c <= ce; c++) {
      result.push(grid[r][c]);
    }
  }
  return result;
}
</script>
 </body>
</html>

实现结果：

在这里插入图片描述

L在前方
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML版扫雷
qq_44394562的博客
05-30 2596
页面初始化界面： 踩雷结束游戏图： 直接上HTML代码！ <!DOCTYPE html> <html lang='zh'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>扫雷</title> <style> html, body{
扫雷（high版）
weixin_44945327的博客
05-24 2556
在编辑这个游戏之前要创建两个数组，一个是放置雷的数组，还有一个是呈现在屏幕的数组。 这个游戏用到 的核心函数有： void init_board(char mine[ROWS][COLS], int rows, int cols, char set); 重置扫雷的棋盘。其中，传一个 set 字符，多加一个set字符是为了，省的还要再创建一个函数来初始化两个数组。其中用循环就可以重置，当然memse...
html实现扫雷小游戏
11-16
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
html5纯代码扫雷游戏实例
02-27
这是用html5纯代码制作的扫雷游戏，里边的注释非常多，非常适合html5的初学者学习。本实例对于学习了深入了解html5和canvas绘图，canvas响应事件非常有帮助。欢迎下载。
Html网页小游戏源代码
最新发布
爱编程的鱼的博客
04-12 1022
【代码】Html网页小游戏源代码。
热身赛—H - 扫雷？踩雷！！
qq_43656353的博客
09-15 1197
扫雷游戏 #include <stdio.h> #define N 101 //最大格数 char arr[N][N]; char brr[N][N]; int x[9] = {0, 0, 1, 1, 1, 0, -1, -1, -1}; //从一开始的八个方向 int y[9] = {0, 1, 1, 0, -1, -1, -1, 0, 1}; int main() { int n, m; int sum = 0; //统计八个方向的地雷数字 scanf("%d%d",
HTML+JavaScript实现扫雷小游戏
10-16
主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
洛谷P2327 [SCOI2005]扫雷【DP】【黄】
lppppppppps的博客
02-09 2407
Date：2022.02.09 题目描述 相信大家都玩过扫雷的游戏。那是在一个n×m的矩阵里面有一些雷，要你根据一些信息找出雷来。万圣节到了，“余”人国流行起了一种简单的扫雷游戏，这个游戏规则和扫雷一样，如果某个格子没有雷，那么它里面的数字表示和它8连通的格子里面雷的数目。现在棋盘是n×2的，第一列里面某些格子是雷，而第二列没有雷，如下图： 由于第一列的雷可能有多种方案满足第二列的数的限制，你的任务即根据第二列的信息确定第一列雷有多少种摆放方案。 输入格式 第一行为N，第二行有N个数，依次为第二列的格子中
html实现扫雷小游戏(附源码)
xcLeigh
11-17 7134
html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。
HTML 实现扫雷游戏，前端案例
05-06
根据用户选择的难易程度（有初、中、高三个级别，级别越高地雷和格子数量越多），随机产生一定个数的地雷并随机放在格子中。然后遍历格子，计算每个格子...实现网页版扫雷游戏 提高大家对 JavaScript 的理解与运用能力
扫雷网页版
06-05
JavaScript+CSS 写的扫雷，只有一个html文件
flash 版 扫雷（经典游戏）
02-20
flash 版扫雷，各位支持一下。谢谢了
html+JavaScript扫雷原创（详细说明）
05-28
html+JavaScript扫雷原创，代码可以修改性比较高，大家可以按照自己的修改，使用比较通俗的写法写的，很容易理解！
一个简单的扫雷小游戏的HTML和JavaScript
weixin_45783763的博客
01-18 712
以上代码创建了一个10x10的扫雷游戏网格，其中包含10个随机放置的炸弹。当玩家点击一个网格时，如果是炸弹格子，则游戏结束，否则会显示周围的炸弹数量，并将其颜色变为灰色。如果点击的是一个没有周围炸弹的空白格子，会递归地显示周围的格子。
C语言实现网页版扫雷
m0_74316391的博客
05-09 9237
C语言实现扫雷
盘点25个Html游戏Game源码网页爱好者不容错过
MarisTang的博客
12-03 938
盘点25个Html游戏Game源码网页爱好者不容错过
c++ raylib.h 扫雷
weixin_49924251的博客
10-15 577
用raylib.h做了个扫雷
网页版扫雷（HTML/CSS/JS实践）
alllliy的博客
10-09 5431
html JavaScript版扫雷 剩余雷数：0 个 持续时间: 0 秒 难度选择： 初级（10*10） 中级（15*15） 高级（20*20）
html做一个扫雷游戏
06-03
好的，下面是一个简单的 HTML 扫雷游戏实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>扫雷游戏</title> <style> table { border-collapse: collapse; } td { width: 25px; height: 25px; border: 1px solid gray; text-align: center; vertical-align: middle; font-size: 20px; font-weight: bold; } .covered { background-color: #999; } .uncovered { background-color: #ddd; } .mine { background-color: red; } </style> </head> <body> <h1>扫雷游戏</h1> <table id="gameBoard"></table> <script> const ROWS = 10; const COLS = 10; const MINES = 10; let gameBoard = document.getElementById("gameBoard"); let board = []; function createBoard() { for (let row = 0; row < ROWS; row++) { let tr = document.createElement("tr"); let rowArr = []; for (let col = 0; col < COLS; col++) { let td = document.createElement("td"); td.classList.add("covered"); td.setAttribute("data-row", row); td.setAttribute("data-col", col); td.addEventListener("click", handleCellClick); tr.appendChild(td); rowArr.push({mine: false, covered: true, flagged: false}); } gameBoard.appendChild(tr); board.push(rowArr); } } function handleCellClick(event) { let td = event.target; let row = Number(td.getAttribute("data-row")); let col = Number(td.getAttribute("data-col")); if (board[row][col].mine) { td.classList.remove("covered"); td.classList.add("mine"); alert("游戏结束！"); } else { uncoverCell(row, col); } } function uncoverCell(row, col) { let td = gameBoard.querySelector(`[data-row="${row}"][data-col="${col}"]`); if (!td || !board[row][col].covered) { return; } td.classList.remove("covered"); td.classList.add("uncovered"); board[row][col].covered = false; let mines = countMines(row, col); if (mines > 0) { td.innerText = mines; } else { uncoverCell(row - 1, col - 1); uncoverCell(row - 1, col); uncoverCell(row - 1, col + 1); uncoverCell(row, col - 1); uncoverCell(row, col + 1); uncoverCell(row + 1, col - 1); uncoverCell(row + 1, col); uncoverCell(row + 1, col + 1); } } function countMines(row, col) { let count = 0; if (row > 0 && col > 0 && board[row - 1][col - 1].mine) { count++; } if (row > 0 && board[row - 1][col].mine) { count++; } if (row > 0 && col < COLS - 1 && board[row - 1][col + 1].mine) { count++; } if (col > 0 && board[row][col - 1].mine) { count++; } if (col < COLS - 1 && board[row][col + 1].mine) { count++; } if (row < ROWS - 1 && col > 0 && board[row + 1][col - 1].mine) { count++; } if (row < ROWS - 1 && board[row + 1][col].mine) { count++; } if (row < ROWS - 1 && col < COLS - 1 && board[row + 1][col + 1].mine) { count++; } return count; } function plantMines() { let minesPlanted = 0; while (minesPlanted < MINES) { let row = Math.floor(Math.random() * ROWS); let col = Math.floor(Math.random() * COLS); if (!board[row][col].mine) { board[row][col].mine = true; minesPlanted++; } } } createBoard(); plantMines(); </script> </body> </html> ``` 这段代码会创建一个 10x10 的游戏面板，其中包含 10 个地雷。玩家需要点击方格，如果点击到地雷，游戏结束；否则，会显示周围的地雷数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值