Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

作者头像
全栈程序员站长
发布于 2022-09-20 02:09:17
发布于 2022-09-20 02:09:17
2.6K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

这两天在恶补前端的相关知识,看到JQuery的动画部分时,突然心血来潮想做一个扫雷的网页版,于是花了差不多一天的时间完成了一个初始版本,权当对这几天学习成果的一个回顾,若某处功能有更好实现方式欢迎留言一起讨论。 ========== 原创作品 作者:未闻 出处:博客园 ==========

先看看最后实现的效果:如何内嵌一个页面?

一、知识点介绍

1. Html + CSS + JQuery库

  • 要创建界面UI,所以需要用到各类Html标签还有CSS的布局美化。
  • 要实现各类逻辑功能,所以需要用到JQuery的选择器、事件等知识。

2. 扫雷游戏的玩法

  • 翻开某个格子,如果是雷,那么就会Boom,游戏结束。
  • 如果是空白,则代表以这个格子为中心的九宫格范围内没有雷。
  • 如果是数字,则根据数字代表这个格子为中心的九宫格范围内存在多少颗雷。
  • 正确标记出所有的雷,并翻开多余的格子,则游戏胜利。

二、关键代码说明

1. 创建数据地图,接下来只需要根据数据地图创建对应UI就可以了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function createMap() { //初始化为0 for (var i = 0; i < num; i++) { map[i] = new Array(); mark[i] = new Array(); for (var j = 0; j < num; j++) { map[i][j] = 0; mark[i][j] = 0; } } var count = 0; // 生成雷 while (count < boomNum) { var row = Math.floor(Math.random() * (num - 1)); var col = Math.floor(Math.random() * (num - 1)); if (isMine(row, col)) { // 这个位置已经有雷,重新生成位置 continue; } count++; map[row][col] = 100; // 周围的雷数标记+1 searchAround(row, col, function (posX, posY) { map[posX][posY]++; }); //for (var i = 0; i < at.length; i++) { // var posX = row + at[i][0]; // var posY = col + at[i][1]; // // 不要超出地图范围 // if (posX < 0 || posY < 0 || posX > map.length || posY > map[0].length) // continue; // map[posX][posY]++; //}  } }

View Code

2. 创建界面UI

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function createUI() { // 生成界面 for (var i = 0; i < num; i++) { for (var j = 0; j < num; j++) { var l = offsetX + i * boxSize; var t = offsetY + j * boxSize; // 创建容器Box var box = $("<div></div>").addClass("box").css({ "left": l + "px", "top": t + "px" }).attr({ "row": i, "col": j }); // 创建遮罩层 var cover = $("<div></div>").addClass("cover").width(boxSize - 1).height(boxSize - 1);// 遮罩层,这样就直接看不到底下是不是雷 // 创建实际内容 var content = $("<div></div>").addClass("content").width(boxSize - 1).height(boxSize - 1).hide();// 内容,可能是空白,可能是个提示数字,也可能就是个雷 if (map[i][j] >= 100) { // 如果是雷,则把格子数据替换成一张Gif图。 var boom = $("<img></img>").attr("src", "./imgs/boom.gif").width(40).height(40); content.css("margin", "0px").html(boom); } else if (map[i][j] > 0) { content.text(map[i][j]); } box.append(cover).append(content); $("#panel").append(box); } }; }

View Code

3. 注册几个核心事件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function registerEvents() { $(".box").hover(function () { var row = $(this).attr("row"); var col = $(this).attr("col"); if (mark[row][col] == 0) $(this).children(".cover").css("backgroundColor", "lightgray"); }); $(".box").mouseleave(function () { var row = $(this).attr("row"); var col = $(this).attr("col"); if (mark[row][col] == 0) $(this).children(".cover").css("backgroundColor", "black"); }); $(".box").dblclick(function () { // 挖格子,看运气是不是雷 sweeper($(this)); }); $(".box").click(function () { var row = $(this).attr("row"); var col = $(this).attr("col"); mark[row][col] = mark[row][col] == 1 ? 0 : 1; // 旗子标记 var color = mark[row][col] == 1 ? "red" : "black"; $(this).children(".cover").css("backgroundColor", color); valid(); // 验证是否成功通关。  }); }

View Code

4. 挖格子功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function isMine(row, col) { return map[row][col] >= 100; } function sweeper(box) { var row = box.attr("row"); var col = box.attr("col"); if (isMine(row, col)) { $(".cover").fadeOut("slow").siblings(".content").fadeIn("slow"); box.delay(1).queue(function () { $("#msg").text("Boom!!!游戏结束.").show("slow"); }); return; } // 如果遇到空白,则自动挖开以此为中心的九宫格,并且递归搜索。  autoSweeper(row, col); valid(); }

View Code

5. 增加了一个简单的深搜,挖到空白格子则自动挖出以此为中心的九宫格,并且遇到同样空白格子会继续挖。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function autoSweeper(row, col) { var cover = $(".box[row=" + row + "][col=" + col + "]").children(".cover"); if (cover.is(":hidden")) return; cover.hide("fast").siblings(".content").show("fast", function () { if (map[row][col] != 0) return; // 如果挖到空白格子,则自动挖四周  searchAround(row, col, autoSweeper); }); } function searchAround(row, col, action) { for (var i = 0; i < at.length; i++) { var posX = parseInt(row) + at[i][0]; var posY = parseInt(col) + at[i][1]; // 不要超出地图范围 if (posX < 0 || posY < 0 || posX >= map.length || posY >= map[0].length) continue; action(posX, posY); } }

View Code

6. 简单验证下是否达成通关条件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function valid() { var count = boomNum; for (var i = 0; i < num; i++) { for (var j = 0; j < num; j++) { if (mark[i][j] == 1 && map[i][j] >= 100) { count--; } } } if (count == 0) { $(".cover").fadeOut("fast").siblings(".content").fadeIn("fast"); $(".cover").delay(1).queue(function () { $("#msg").text("恭喜你!成功过关.").show("slow"); }); } }

View Code

三、参考资料

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167659.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
C语言小游戏:扫雷
扫雷的详细规则是随便点开一个方格,根据展开方格的数字去推断其相邻九宫格内未展开方格下面是否是地雷,最终任务就是点开所有没有地雷的方格,以找出所有的地雷。 要取得高分,就必须在尽量短的时间内清除所有的地雷。 得分计算方法:扫雷得分=分数基数X难度系数/扫雷时间,其中分数基数为10000,难度系数=每局地雷数/每局总格子数,扫雷时间按毫秒计算。
对编程一片赤诚的小吴
2024/01/23
7310
C语言小游戏:扫雷
手把手教你使用JavaScript打造一款扫雷游戏
扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏。废话不多说,直接看下效果;
前端皮皮
2022/08/17
7060
手把手教你使用JavaScript打造一款扫雷游戏
计算机初级选手的成长历程——扫雷详解
大家好,很高兴又和大家见面啦!在上一篇内容中,我们详细介绍了三子棋的编写思路,相信大家在阅读完上一篇后对相关的知识点及其运用也有了相应的提升。下面我们就来开始介绍今天的内容——扫雷。
蒙奇D索隆
2023/10/13
2.4K0
计算机初级选手的成长历程——扫雷详解
龙年到,一起来玩龙年小游戏吧
每到春节期间,游戏里总是充满过节气氛,今年是龙年,咱也来凑个热闹,那就整一个龙年拼图小游戏吧。
鳄鱼儿
2024/05/21
1750
龙年到,一起来玩龙年小游戏吧
扫雷
一直想发表扫雷这种锻炼思维的游戏,其实扫雷弄个标题栏可以随意选择挑战难度是效果最佳的,但是呢easyx图形库没有标题栏,所以就委屈各位看官一级一级打上去了。由于调试过程中玩的次数太多了,录视频就录这几关吧,后面的难度递增,需要你们去挑战了,我老了,玩不动了。
DeROy
2020/05/12
7700
扫雷
Python游戏开发,pygame模块,Python实现扫雷小游戏
游戏界面左上角的数字代表所有方格中埋有雷的数目,右上角是一个计时器。你要做的就是根据提示找出方格中所有的雷。
玖柒的小窝
2021/12/14
2.3K0
Python游戏开发,pygame模块,Python实现扫雷小游戏
【纯手工扫雷“不含一点添加剂”】完全c语言版
扫雷包括雷区、地雷计数器(位于左上角,记录剩余地雷数)和计时器(位于右上角,记录游戏时间),确定大小的矩形雷区中随机布置一定数量的地雷(初级为9*9个方块10个雷,中级为16*16个方块40个雷,高级为16*30个方块99个雷,自定义级别可以自己设定雷区大小和雷数,但是雷区大小不能超过24*30),玩家需要尽快找出雷区中的所有不是地雷的方块,而不许踩到地雷。
比特大冒险
2023/04/16
3130
【纯手工扫雷“不含一点添加剂”】完全c语言版
用 Python 实现自动扫雷!
相信许多人很早就知道有扫雷这么一款经典的游(显卡测试)戏(软件),更是有不少人曾听说过中国雷圣,也是中国扫雷第一、世界综合排名第二的郭蔚嘉的顶顶大名。
用户8544541
2022/03/24
7560
用 Python 实现自动扫雷!
微信小程序-实战巩固(二)
刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 \(≧▽≦)/。迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上:免费的果然不靠谱/(ㄒoㄒ)/~~,后
小古哥
2018/03/08
1.7K1
微信小程序-实战巩固(二)
鸿蒙小游戏-数字华容道 自定义组件的踩坑记录
前两天看到HarmonyOS开发者官网上发布的一个挑战HarmonyOS分布式趣味应用的帖子,然后有个想法想搞一个小游戏出来,结果三天的时间都卡在了自定义组件上,使用了各种方式方法去实现功能,但是还是没有达到预期的效果,暂时先做个小总结,其实坑有的时候真的很深…
爱吃土豆丝的打工人
2021/11/10
4090
鸿蒙小游戏-数字华容道 自定义组件的踩坑记录
【CodeBuddy】三分钟开发一个实用小功能之:九宫格图片切割&生成器
我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接: 腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
Jimaks
2025/05/22
1360
【CodeBuddy】三分钟开发一个实用小功能之:九宫格图片切割&生成器
【C语言】扫雷(可展开空白版与鼠标操作版)
扫雷游戏是一款经典的单人电脑游戏,最初由微软公司开发。玩家需要根据数字提示,在不触雷的情况下揭开所有格子。这是一款考验逻辑思维和运气的游戏,而我们将用C语言来实现它。
DevKevin
2024/03/19
1790
九宫格随机抽奖(html篇)
实现九宫格随机抽奖的方法还是有很多的,博主的方法仅供小伙伴们参考,还请多多指教!🧐一、代码思路实现:当点击中间的马上抽奖按钮,会自动开始顺时针跳转,并且能够随机慢慢地停止,然后弹出当前停止所获得的奖品1、CSS样式排版:(1)500*500px的带class:banner属性的金色边框(2)中间包裹一个460*460px的class:content内容(方便对九个格子进行排版)(3)九个格子按常规顺序(从左到右,从上到下)放置,有统一的class:box属性,及各自放置图片的属性【除了中间的按钮class:
申小兮
2023/04/25
2.8K0
九宫格随机抽奖(html篇)
Java实现扫雷小游戏【优化版】
大家好,又见面了,我是你们的朋友全栈君。 🍁🍁大家好!上一期我们使用GUI技术写了一个简单的扫雷小游戏,今天对这个Java应用程序更新迭代,增加了难度选择等功能,修复了已知的几个问题。成为初学者学习的好项目!Java实现扫雷小游戏【完整版】 ---- 🌕文章目录 🍊效果展示 🍁难度选择展示 🍁游戏界面展示 🍊代码展示 🍁主类:GameWin类 🍁底层地图MapBottom类 🍁顶层地图MapTop类 🍁底层数字BottomNum类 🍁初始化地雷BottomRay类 🍁工具GameUtil类 🍁难度选择
全栈程序员站长
2022/09/14
1.6K0
Java实现扫雷小游戏【优化版】
【小三传奇】这是一个关于游戏的故事
本文讲述了一个基于JavaScript实现的简单数字消除小游戏,通过代码示例和截图说明了实现过程。游戏开始时,玩家可以输入1-9之间的数字,然后通过方向键操作数字,进行合并和消除。游戏结束后,会显示玩家的得分。这个小游戏的代码实现较为简单,但有趣味性,可以作为技术社区中的一种趣味活动,让社区成员在休闲娱乐中学习和交流。
IMWeb前端团队
2017/12/29
6990
【小三传奇】这是一个关于游戏的故事
情人节程序员用HTML网页表白【情人节表白网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/21
2.9K1
情人节程序员用HTML网页表白【情人节表白网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
Canvas 进阶(三)ts + canvas 重写”辨色“小游戏
之前写过一篇文章 ES6 手写一个“辨色”小游戏, 感觉好玩挺不错。岂料评论区大神频出,其中有人指出,打开控制台,输入以下代码:
小皮咖
2019/11/05
1.2K0
Canvas 进阶(三)ts + canvas 重写”辨色“小游戏
【熟视C语言】手把手教你学会用C语言编写井字棋小游戏
本篇文章将手把手带你通过C语言中简单的分支循环语句,使用二维数组编写一个井字棋小游戏。
Crrrush
2023/06/23
2450
【熟视C语言】手把手教你学会用C语言编写井字棋小游戏
大一C语言必做项目扫雷超详解
首先,我们需要一个二维数组来存储哪些地方有雷,但这个二位数组应该是多大的?不妨先初始化一个9行9列的二维数组进行尝试。
fhvyxyci
2024/09/24
1620
大一C语言必做项目扫雷超详解
中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世
在正文开始之前,先引入一下故事背景:其实,自己最初选择编程行业,也是想自己开发一个小游戏啥的,主要是为了娱乐。没想到进入了编程行业之后,就变成了后端Java 开发者,虽然可能和自己期望的有点差距,但是在Java 语言行业待久了,也就习惯了。只是心里对于做一个小游戏的念想一直还在。恰逢中国版Cursor—- 腾讯云CodeBuddy 来了,对于小游戏的实现也看到了曙光,下面闲话少说,先来介绍一下我们今天的主角。什么是CodeBuddy?
六月的雨在Tencent
2025/05/13
8680
推荐阅读
相关推荐
C语言小游戏:扫雷
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验