前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >扫雷小游戏-纯网页版下载_扫雷游戏下载手机版

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

作者头像
全栈程序员站长
发布2022-09-20 10:09:17
2.1K0
发布2022-09-20 10:09:17
举报
文章被收录于专栏:全栈程序员必看

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

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

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

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

一、知识点介绍

1. Html + CSS + JQuery库

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

2. 扫雷游戏的玩法

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

二、关键代码说明

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

扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
扫雷小游戏-纯网页版下载_扫雷游戏下载手机版
代码语言:javascript
复制
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
复制
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
复制
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
复制
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
复制
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
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档