扫雷，学习资料：渡一教育实现扫雷视频，基本上所有都是原生js的，一个小bug用jquery解决，如果解决了bug再改，用了jq的地方会标注即写上js写法，大致实现效果如下

完整代码github地址：https://github.com/yuriaFan/mine-clearance

HTML部分，因为是学习+练习就只写了很普通的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/index.css"><script src="js/jquery.js"></script><title>Document</title>
</head>
<body><div id="content"><!-- 顶端按钮 --><div id="level"><button class="active">初级</button><button>中级</button><button>高级</button><button class="big">重新开始</button></div><!-- 棋盘 --><div id="gameBox"><!-- js动态添加的 --></div><!-- 底部文本 --><div id="bottomText"><div class="text">剩余雷数：<span class="mineNum"></sapn></div></div></div><script src="js/index.js"></script>
</body>
</html>

三个部分，上部按钮，中部扫雷界面（‘棋盘’），下部剩余雷数text，中部‘棋盘’是用添加上去的

CSS部分，前面部分是对基础界面的样式修改，后面td.one-td.eight部分是给实现扫雷点击后出现的数字改颜色用的

注意 td的border-color，是用来实现‘棋盘’上宛如砖块一样的立体效果，设置上方和左侧为白色，其他地方为想要的颜色即可，

#content{height: 900px;margin: 0 auto;width: 800px;
}
#level{height: 25px;width: 280px;margin: 0 auto;
}
#level button{height: 25px;line-height: 25px;width: 60px;text-align: center;background: rgb(73, 139, 141);;color: white;padding: 0px;margin: 0px;border: 0px;border-radius: 5px;outline: none;cursor: pointer;
}
#level button.active{background: #0bb9b6;
}
#level button.big{width: 80px;
}
#gameBox{padding-top: 20px;
}
#bottomText{height: 20px;width: 200px;margin: 0 auto;line-height: 20px;
}
/* .mineNum{height: 20px;width: 50px;} */
table{border-spacing: 1px;background-color: #929196;margin: 0 auto;
}
td{height: 20px;width: 20px;background-color: #ccc;padding: 0;border: 1px solid;border-color: #fff #a1a1a1 #a1a1a1 #fff;text-align: center;line-height: 20px;font-weight: bold;
}
.mine{background:#c9c9c9 url(../images/mine.png) no-repeat center;background-size: cover;
}
.flag{background:#ccc url(../images/flag.png) no-repeat center;background-size: cover;
}
td.zero{background-color: #d9d9d9;border-color: #d9d9d9;
}
td.one{color: red;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.two{color: green;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.three{color: yellow;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.four{color: blue;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.five{color: blueviolet;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.six{color: brown;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.seven{color: cadetblue;background-color: #d9d9d9;border-color: #d9d9d9;
}
td.eight{color: coral;background-color: #d9d9d9;border-color: #d9d9d9;
}

JS部分！

首先使用的是面向对象思想，在部分地方会对写好的函数进行调用，函数是写在原型上的。

第一步先写了构造函数，写上了后期所需要用到的各种变量，用在后期生成‘棋盘’的时候。

//面向对象思想
function Mine(tr,td,mineNum){this.tr=tr;//行数this.td=td;//列数this.mineNum=mineNum;//雷的总数this.squares=[];//存储所有方块的信息，二维数组，以行列的信息存储this.tds=[];//存储所有单元格的DOM对象(二维数组)this.surplusMine=mineNum;//剩余雷的数量this.allRight=false;//玩家标注的小红旗是否全是雷，判断是否游戏成功this.parent=document.getElementById('gameBox');}

然后是createDom()，生成‘棋盘’，用的是table，td，tr，但是ul和li也是能够实现的

生成基础‘棋盘’后，写格子的点击事件调用了play函数，后面会讲到这个函数

Mine.prototype.createDom=function(){var This=this;var table=document.createElement('table');for(var i=0;i<this.tr;i++){var domTr=document.createElement('tr');//通过构造函数传入的行数来生成trthis.tds[i]=[];for(var j=0;j<this.td;j++){//列var domTd=document.createElement('td');//同上domTd.pos=[i,j];//存储对应的位置，行与列（后面会用到坐标，坐标和行与列的关系是x y恰好相反）domTd.onmousedown=function(){//当对应的格子被点击时This.play(event,this);//This 实例对象 this 被点击的Td}this.tds[i][j]=domTd;domTr.appendChild(domTd);}table.appendChild(domTr);}this.parent.innerHTML="";this.parent.appendChild(table);
}

然后init函数

其中使用了一个random函数，用于随机生成雷的位置，用td*tr得到大于需要雷的数量的有序数，用排序+random得到随机数，通过mineNum的大小来确定随机数的数量，最后返回一个数组。

Mine.prototype.randomNum=function(){var square=new Array(this.td*this.tr);for(var i=0;i<square.length;i++){square[i]=i;}square.sort(function(){return 0.5-Math.random()});return square.slice(0,this.mineNum);
}
Mine.prototype.init=function(){var rn=this.randomNum();//雷的位置var n=0;//作为访问随机数字的位置的索引,即rn的索引for(var i=0;i<this.tr;i++){this.squares[i]=[];for(var j=0;j<this.td;j++){n++;//取方块在数组里的数组用行与列的方式去取，取方块周围对应的数字用坐标if(rn.indexOf(n)!=-1){this.squares[i][j]={type:'mine',x:j,y:i};}else{this.squares[i][j]={type:'number',x:j,y:i,value:0};}}}this.update();this.createDom();this.parent.oncontextmenu=function(){return false;}// this.mineNumDom=document.getElementsByClassName('mineNum');// this.mineNumDom.innerHTML=this.surplusMine;$('.mineNum').html(this.surplusMine);//出bug,用原生无法显示,未解决，原生实现应该就是上面两行，但是也不知道哪里出的问题}

上方init函数

定义一个n用于一会比较用，两个for循环用rn.indexOf(n)来判断rn即随机数有哪些，若存在随机数数组中，则未squares里对应的坐标位赋值type:'mine'，否则则为number。

update()晚点再说，大致就是刷新。

this.parent.oncontextmenu是用于取消鼠标右键的点击事件，为一会给右键点击添加旗子												


											

前端基础练习项目——网页版扫雷相关推荐
	

    
						
  1. javascript实战项目——网页版贪吃蛇
		
    前言 这是一个网页版本的贪吃蛇项目,用了html和js实现,代码有很多注释,方便阅读,是一个不错的练手项目. 代码 1.html代码 <!DOCTYPE html> <html la ...
    
		
    2. 
						
  2. C语言实现网页版扫雷
		
    扫雷作为一款流行的小游戏,我们一定玩过吧,今天我将用简短的C语言代码实现扫雷小游戏,源码在最后哦: 一.首先我们从主函数开始写 1.我们需要打印菜单提醒玩家进行选择,因为玩家可能玩多局所以我们要用循坏 ...
    
		
    3. 
						
  3. 网页版扫雷游戏···
		
    闲的没事 写个扫雷, 算法 不太好·····凑合 <!DOCTYPE html> <html> <head> <metacharset="utf-8 ...
    
		
    4. 
						
  4. Spring Boot入门（9）网页版计算器
		
    介绍   在写了前八篇Spring Boot项目的介绍文章后,我们已经初步熟悉了利用Spring Boot来做Web应用和数据库的使用方法了,但是这些仅仅是官方介绍的一个例子而已.   本次分享将介绍 ...
    
		
    5. 
						
  5. 网页版几何画板开发笔记(一)
		
    2019独角兽企业重金招聘Python工程师标准>>> 近期在做项目网页版简易几何画板 geo.js. 时间一长, 加上年纪大了, 就容易忘记, 所以这里写下来些笔记. 实现了一个全 ...
    
		
    6. 
						
  6. 【前端基础1-HTML和CSS】
		
    前端基础 HTML决定网页的内容: CSS决定网页的美观程度: Javascript决定网页的特效. 1 HTML HTML的英文全称是Hyper Text Markup Language,即超文本标 ...
    
		
    7. 
						
  7. （硅谷课堂项目）Java开发笔记4：前端基础知识（二）
		
    文章目录 (硅谷课堂项目)Java开发笔记4:前端基础知识(二) 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm 2. ...
    
		
    8. 
						
  8. 结对项目-小学生四则运算系统网页版项目报告
		
    结对作业搭档:童宇欣 本篇博客结构一览: 1).前言(包括仓库地址等项目信息) 2).开始前PSP展示 3).结对编程对接口的设计 4).计算模块接口的设计与实现过程 5).计算模块接口部分的性能改进 ...
    
		
    9. 
						
  9. 网页游戏老手村《梦幻西游网页版》项目开发经验分享
		
    基于白鹭引擎研发的页游大作<梦幻西游网页版>仅用时数天步入iOS免费版TOP3,截至目前,这款产品将近20天位列畅销榜Top 10,目前基本稳定在Top 20,首月仅iOS平台流水便破亿, ...
    
		
    10. 
						
  10. 项目__网页版聊天室
		
    项目内容 使用开源websocket框架mongoose编写网页版本的群聊即时通信工具,使用http+mongoose+session+mysql+jsoncpp的技术构成,从而实现一个网页版的聊天室 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. JS字符串类型转日期然后进行日期比较
		
    2. 
						
  2. J2SE的30个基本概念
		
    3. 
						
  3. tcp socket 异常关闭总结
		
    4. 
						
  4. matlab gui实例_App Designer 自学实例8
		
    5. 
						
  5. Targeted Resumes How to Write a Targeted Resume By Alison Doyle
		
    6. 
						
  6. 【微软的VDI】Windows Server 2012 RDS存储相关
		
    7. 
						
  7. 一道求因子之和面试算法题
		
    8. 
						
  8. java迭代器怎么用_Java中迭代器的使用
		
    9. 
						
  9. 阿里云盘tv版 v1.0.6电视版
		
    10. 
						
  10. 一个完整的产品设计都要哪些设计流程
		
    11. 
						
  11. Biotin-PEG2000-Pyrene 含有生物素和芘丁酸的PEG，Pyrene-PEG2000-Biotin
		
    12. 
						
  12. 【spark】map算子n种简化写法
		
    13. 
						
  13. okvis 基于关键帧视觉惯性传感器非线性优化SLAM 论文翻译+博客总结
		
    14. 
						
  14. 抖音SEO优化：最详细抖音视频SEO教程
		
    15. 
						
  15. 计算机的数学知识的手抄报图片大全,数学手抄报图片大全获奖作品
		
    16. 
						
  16. 计算机课有平时成绩吗,大学计算机基础课程平时成绩评定方法探究.doc
		
    17. 
						
  17. 笔记本屏幕亮度调节的详细步骤
		
    18. 
						
  18. 14.[保护模式]TSS任务段
		
    19. 
						
  19. r语言抓取维基百科表格数据
		
    20. 
						
  20. 什么是Portable Version?
		
    21. 
		

	


热门文章
	

    
									
  1. 纪中游记 - Day 3
			
    2. 
						
  2. UE4+LiveLinkFace面部动作捕捉
			
    3. 
						
  3. NVIDIA英伟达控制面板打不开解决办法win10
			
    4. 
						
  4. cocos creator 打包apk_Cocos Creator Android打包 apk
			
    5. 
						
  5. 大学物理复盘 | 简明大学物理学第一章——质点运动学思维导图梳理（复习专用）
			
    6. 
						
  6. lammps教程：EAM势参数设置详解
			
    7. 
						
  7. GPS信号防丢失、干扰和欺骗——基于雷达的解决方案
			
    8. 
						
  8. 设置某一个行列的颜色和写保护属性
			
    9. 
						
  9. 初学“深入浅出MFC”之（一）
			
    10. 
						
  10. 西电计科院微机原理与系统设计课程笔记（车向泉版）
			
    11.