html实现扫雷小游戏(附源码)

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量7.4k 收藏 63
点赞数 20
分类专栏： HTML5小游戏源码 文章标签： html windows 前端
BY xcSharp@126.com
本文链接：https://blog.csdn.net/weixin_43151418/article/details/127886480
版权

文章目录

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/127886480

html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。

实现功能

  • 左键单击
    在判断出不是雷的方块上按下左键，可以打开该方块。如果方块上出现数字，则该数字表示其周围3×3区域中的地雷数（一般为8个格子，对于边块为5个格子，对于角块为3个格子。所以扫雷中最大的数字为8）；如果方块上为空（相当于0），则可以递归地打开与空相邻的方块；如果不幸触雷，则游戏结束。

  • 标记
    在判断为地雷的方块上按下右键，可以标记地雷（显示为小红旗），重复一次或两次操作可取消标记。

  • 双击
    同时按下左键和右键完成双击，当双击位置周围已标记雷数等于该位置数字时操作有效，相当于对该数字周围未打开的方块均进行一次左键单击操作。地雷未标记完全时使用双击无效。若数字周围有标错的地雷，则游戏结束，标错的地雷上会显示一个“ ×”。 表情会变成哭脸。

1.扫雷设计

记得最早玩扫雷是在上学那会，那个时候还是windows xp系统，附带的小游戏，就喜欢这个，但是贼费时间。
抽了个闲暇之余，仿照那个扫雷游戏，用html实现了个网页版的。下面上效果图。

1.1 主界面

扫雷的主要的操作功能，都实现，第一次点击没有雷，左右同时点击事件、右键点击事件，标记雷时间，计时，等

请添加图片描述

1.2 扫雷难度

扫雷难度分为初级（9 * 9，共10个雷）、中级（1616，共40个雷）、高级（3016，共99个雷）、自定义（可以自己配置块数和雷数）。

请添加图片描述

1.3 附带功能

增加了几个功能点，游戏源码、表白源码，里面有一些好的资源源码，可以提供学习帮助。

请添加图片描述

2.效果和源码

2.1 动态效果

《扫雷》是一款大众类的益智小游戏，游戏规则是在最短的时间内，根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输，但许多玩过扫雷的人却仍然有一些规则不明白。

html实现扫雷

2.2 源代码

这是主界面的代码，其他图片、js、css等代码，见下面的 源码下载，里面有所有代码和介绍。

<!-- 
 /**
 *title:html实现扫雷
 * code url:https://blog.csdn.net/weixin_43151418/article/details/127886480
 */  -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" /> 
	<link rel="icon" type="image/png" href="./images/icon.png" /> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
	<title>扫雷小游戏 - xcLeigh</title>
	<script type="text/javascript" src="./js/index.js"></script>
	<link rel="Stylesheet" type="text/css" href="./css/index.css" />
</head>
<body oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;">
	<div class = "mine-wrap">
		<div class = "title clearfix">
			<div class="title-txt">扫雷</div>
			<ul class="window-control">
				<!-- <li class="window-min"></li>
				<li class="window-max"></li> -->
				<li class="window-close" onclick="window.close()"></li>
			</ul>
		</div>
		<div class="mine-main clearfix">
			<div class="mine-menu clearfix">
				<ul class="mine-menu-ul clearfix">
					<li class="menu-game">游戏关卡
						<ul class="menu-sub clearfix">
							<li><span class="menu-sub-left"><input type="radio" name="mine-type"value ="0"></span><span class="menu-sub-right">初级</span></li>
							<li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="1"></span><span class="menu-sub-right">中级</span></li>
							<li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="2"></span><span class="menu-sub-right">高级</span></li>
							<li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="3"></span><span class="menu-sub-right">自定义</span></li>

						</ul>
					</li>
					<li class="menu-game">游戏源码
						<ul class="menu-sub clearfix">
							<li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" target="_blank">html实现五子棋</a></span></li>
							<li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" target="_blank">html实现打飞机</a></span></li>
							<li><span class="menu-sub-left">最火</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/126465393" target="_blank">html实现吃月饼</a></span></li>
							<li><span class="menu-sub-left">最火</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127869325" target="_blank">html实现数独</a></span></li>
							<li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/125074948" target="_blank">html实现拼图</a></span></li>
							<li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" target="_blank">html实现贪吃蛇</a></span></li>
						</ul>
					</li>
					<li class="menu-game">表白源码
						<ul class="menu-sub clearfix">
							<li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" target="_blank">html实现爱情纪念册</a></span></li>
							<li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/126099643" target="_blank">html实现爱心告白</a></span></li>
							<li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/124970985" target="_blank">html实现浪漫表白求爱</a></span></li>
						</ul>
					</li>
					<li><a href="https://blog.csdn.net/weixin_43151418" target="_blank">关于我</a></li>
				</ul>
			</div>
			<div class="mine-con">
				<div class="game-tags clearfix">
					<div class="game-tag-images">
						<img src="./images/d0.bmp">
						<img src="./images/d0.bmp">
						<img src="./images/d0.bmp">
					</div>
					<div class="game-face">
						<img src="./images/face_normal.bmp" onclick = "mine1.init()" id="face">
					</div>
					<div class="game-time-images">
						<img src="./images/d0.bmp">
						<img src="./images/d0.bmp">
						<img src="./images/d0.bmp">
					</div>
				</div>
				<div class="mine-canvas">
					<canvas id="mine1" width="" height=""></canvas>
				</div>
			</div>
		</div>
	</div>
	<div style="position:absolute;left:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:999;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" target="_blank" style="text-decoration:none; font-weight:bold">打飞机</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" target="_blank" style="text-decoration:none; font-weight:bold">贪吃蛇</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" target="_blank" style="text-decoration:none; font-weight:bold">五子棋</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;left:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/126465393" target="_blank" style="text-decoration:none; font-weight:bold;">吃月饼</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div  style="position:absolute;left:0;bottom:0; width:100%;height:80px; line-height:80px; text-align:center; z-index:99;">
	  <a href="https://blog.csdn.net/weixin_43151418" target="_blank" style="text-decoration:none; font-weight:bold;color:white;">xcLeigh | 星空系列 | 扫雷小游戏</a>
	  </div>
</body>

源码下载

html实现扫雷小游戏(源码) 点击下载
在这里插入图片描述

     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/127886480（防止抄袭，原文地址不可删除）

xcLeigh
关注
  • 20
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
专栏目录
前端技术搭建扫雷小游戏（内含源码）
官方推荐
06-01 3万+
六一儿童节了，为你的小朋友来实现一个扫雷游戏吧！通过扫雷游戏也能让你更进一步的感受前端基础三件套的作用及搭配
前端技术搭建弹珠小游戏（内附源码）
热门推荐
官方推荐
05-08 7万+
上周我们实通过前端基础实现了小人逃脱，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个弹珠游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
扫雷游戏HTML源码下载
06-09
此为扫雷游戏HTML源码
html在线扫雷
yizhipipihe的博客
08-16 163
有手就行，下个版本推出标记雷的功能。
(附源码)HTML+JavaScript+Canvas编写2D小游戏
qq_43059415的博客
06-16 1286
（附源码）使用HTML+JavaScript+Canvas编写2D小游戏。第一次写文章，可能有些地方存在问题，如有不对的地方也请帮忙指出，谢谢。
JS扫雷小游戏(DOM (html+css+js))
路漫漫其修远兮，吾将上下而求索。
11-11 2370
JS扫雷小游戏
html5小游戏源码- 扫雷
weixin_45128635的博客
06-29 1万+
<!doctype html> <html> <head> <meta name="author" content="苏道涵"/> <meta name="keywords" content="扫雷，html5小游戏"/> <meta name="description" content="经典扫雷小游戏"/> <met...
html扫雷源码原理,js实现扫雷源代码
weixin_29912207的博客
06-05 434
经过一段时间学习，对javascript有了一个初步的了解自己制作了一个扫雷，源代码+详细注释放在后面，先看下效果图。初始化界面：游戏界面：难易程度切换：游戏结束：思路采用构造函数的形式进行全局开发生成游戏棋盘利用双层for循环创建设定的棋盘大小为每个单元格的dom元素创建一个属性，该属性用于保存单元格的所有信息，如x,y坐标,value,是否为雷等随机生成炸弹利用随机数，随机生成炸弹x,y坐标，...
前端搭建小人逃脱游戏（内附源码）
官方推荐
04-17 2万+
通过简单的js代码来制作有趣的小游戏，让前端小白或者初学者有趣的掌握内容
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
html实现扫雷小游戏
11-16
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
Js扫雷大战游戏源码.html
10-23
Js扫雷大战游戏，本扫雷游戏界面和Windows中的扫雷界面几乎一样，在游戏的过程中，你同样觉得这几乎不是用JavaScript来编写开发的，对，这就是JS版的扫雷游戏，这款扫雷可以选择初级、中级、高级难度级别，玩法和...
扫雷HTML5游戏源码
06-19
扫雷HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
在线网页版扫雷游戏HTML源码.zip
02-20
初始已自动翻开一片区域。格子里的数字表示它周围有几个雷。...扫雷游戏起源于1973年的"方块"游戏。1992年微软发布的Windows 3.1中加入该游戏，从此风靡全世界。玩扫雷游戏，可以锻炼观察和推理能力，培养细心和耐心。
前端技术搭建贪吃蛇小游戏（内含源码）
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1084
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2404
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Html在图片上划一个矩形区域，并且获取区域坐标
zxb11c的博客
07-25 207
【代码】Html在图片上划一个矩形区域，并且获取区域坐标。
java实现扫雷游戏(附完整源码)
06-09
好的，下面是Java实现扫雷游戏的完整源码： ```java import java.util.Random; import java.util.Scanner; public class MineSweeper { private int[][] board; // 扫雷游戏面板 private boolean[][] revealed; // 记录位置是否被揭示 private int mines; // 雷的个数 private int size; // 面板大小 private boolean gameOver; // 游戏是否结束 public MineSweeper(int size, int mines) { this.size = size; this.mines = mines; this.board = new int[size][size]; this.revealed = new boolean[size][size]; this.gameOver = false; initBoard(); } // 初始化面板，随机放置雷 private void initBoard() { Random random = new Random(); int count = 0; while (count < mines) { int x = random.nextInt(size); int y = random.nextInt(size); if (board[x][y] != -1) { // 如果该位置不是雷，就放置雷 board[x][y] = -1; count++; } } } // 显示游戏面板 private void displayBoard() { System.out.println(); System.out.print(" "); for (int i = 0; i < size; i++) { System.out.print(i + " "); } System.out.println(); for (int i = 0; i < size; i++) { System.out.print(i + " "); for (int j = 0; j < size; j++) { if (revealed[i][j]) { // 如果该位置已经被揭示 if (board[i][j] == -1) { // 如果该位置是雷 System.out.print("* "); } else { // 如果该位置不是雷 System.out.print(board[i][j] + " "); } } else { // 如果该位置还没有被揭示 System.out.print(". "); } } System.out.println(); } } // 获取某个位置周围雷的数量 private int getSurroundingMines(int x, int y) { int count = 0; for (int i = x - 1; i <= x + 1; i++) { for (int j = y - 1; j <= y + 1; j++) { if (i >= 0 && i < size && j >= 0 && j < size && board[i][j] == -1) { count++; } } } return count; } // 揭示某个位置 private void reveal(int x, int y) { if (!revealed[x][y]) { // 如果该位置还没有被揭示 revealed[x][y] = true; if (board[x][y] == -1) { // 如果该位置是雷，游戏结束 gameOver = true; return; } if (getSurroundingMines(x, y) == 0) { // 如果该位置周围没有雷，递归揭示周围的位置 for (int i = x - 1; i <= x + 1; i++) { for (int j = y - 1; j <= y + 1; j++) { if (i >= 0 && i < size && j >= 0 && j < size) { reveal(i, j); } } } } } } // 运行游戏 public void run() { Scanner scanner = new Scanner(System.in); while (!gameOver) { displayBoard(); System.out.print("请输入要揭示的位置(x y)："); int x = scanner.nextInt(); int y = scanner.nextInt(); if (x >= 0 && x < size && y >= 0 && y < size) { // 如果位置合法 reveal(x, y); } } displayBoard(); System.out.println("游戏结束！"); } public static void main(String[] args) { MineSweeper game = new MineSweeper(10, 10); // 创建一个大小为10x10，雷数为10的扫雷游戏 game.run(); } } ``` 这个程序实现了一个简单的扫雷游戏，可以自定义面板大小和雷的数量。玩家每次输入要揭示的位置，程序会判断该位置是否是雷，如果是雷则游戏结束，否则会递归揭示周围的位置直到所有不是雷的位置都被揭示出来。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xcLeigh

万水千山总是情，打赏两块行不行

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

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

打赏作者

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

抵扣说明：

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

余额充值