技术标签： 小白学习扫雷
前端小白初长成:
看着大佬牛逼的视频,我也跟着敲了一下,感觉扫雷这个游戏,很适合像我们这种学前端的小白,对于封装函数思想,感觉函数封装很牛逼,比较复杂的是一步一步实现的过程,思路必须特别清晰你才能够把它完整的写完,不然bug是很多的.以上这里是html页面
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">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="mine">
<div class="level">
<button class="active">初级</button>
<button>中级</button>
<button>高级</button>
<button>重新开始</button>
</div>
<div class="gameBox">
<!-- 表格用js动态生成 -->
</div>
<div class="info">
剩余雷数:
<span class="mineNum"></span>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>css部分:
#mine {
margin: 50px auto;
}
.level {
text-align: center;
margin-bottom: 10px;
}
.level button {
padding: 5px 15px;
background-color: #02a4ad;
border: none;
color: #fff;
border-radius: 3px;
outline: none;
cursor: pointer;
}
.level .active {
background-color: #00abff;
}
table {
border-spacing: 1px;
background: #939196;
margin: 0 auto;
}
td {
padding: 0;
width: 20px;
height: 20px;
background: #ccc;
border: 2px solid;
border-color: #fff #a1a1a1 #a1a1a1 #fff;
text-align: center;
line-height: 20px;
font-weight: 700;
}
.info {
margin-top: 10px;
text-align: center;
}
td.zero {
border-color: #d9d9d9;
background: #d9d9d9;
}
td.one {
border-color: #d9d9d9;
background: #d9d9d9;
color: #0332fe;
}
td.two {
border-color: #d9d9d9;
background: #d9d9d9;
color: #019f02;
}
td.three {
border-color: #d9d9d9;
background: #d9d9d9;
color: #ff2600;
}
td.four {
border-color: #d9d9d9;
background: #d9d9d9;
color: #93208f;
}
td.five {
border-color: #d9d9d9;
background: #d9d9d9;
color: #ff7f29;
}
td.six {
border-color: #d9d9d9;
background: #d9d9d9;
color: #ff3fff;
}
td.seven {
border-color: #d9d9d9;
background: #d9d9d9;
color: #3fffbf;
}
td.eight {
border-color: #d9d9d9;
background: #d9d9d9;
color: #22ee0f;
}
.mine {
width: 20px;
height: 20px;
background: #d9d9d9 url("../images/lei.png") no-repeat center;
background-size: cover;
}
.flag {
background: #ccc url("../images/qizi.png") no-repeat center;
background-size: cover;
}JavaScript部分:
(function (w) {
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.querySelector('.gameBox');
}
// 生成n个随机的数字
Mine.prototype.randomNum = function () {
// 随机生成一个空数组,但是没有长度,长度等于表格的总数
var square = new Array(this.tr * this.td);
for (var i = 0; i < square.length; i++) {
square[i] = i;
}
// 把生成的数组随机排序
square.sort(function () {
return 0.5 - Math.random()
});
// console.log(square);
// 截取随机生成的数组的前99个
return square.slice(0, this.mineNum);
}
Mine.prototype.init = function () {
// this.randomNum();
// 雷在格子里的位置
var rn = this.randomNum();
var n = 0; //用来找到格子对应的索引
for (var i = 0; i < this.tr; i++) {
this.squares[i] = [];
for (var j = 0; j < this.td; j++) {
// this.squares[i][j] = [];
// 取一个方块在数组里的数据要使用行于列的形式去取,找方块周围的方块的时候要用坐标的形式去取,行于列的形式跟坐标x,y的形式是玩完全相反的
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.parent.oncontextmenu = function () {
return false;
}
// console.log(this.squares);
this.updateNum();
this.createDom();
// 剩余雷数
this.mineNumDom = document.querySelector('.mineNum');
this.mineNumDom.innerHTML = this.surplusMine;
}
// 找某个方格周围的8个格子
Mine.prototype.getAround = function (square) {
var x = square.x;
var y = square.y;
var result = []; //把找到的格子的坐标返回出去
// 通过一个坐标,找到周围8个盒子的坐标
// x-1,y-1 x,y-1 x+1,y-1
// x-1,y x,y x+1,y
// x-1,y+1 x,y+1 x+1,y+1
// 双重循环遍历9个小9宫格(通过'坐标'去循环9宫格)
for (var i = x - 1; i <= x + 1; i++) {
for (var j = y - 1; j <= y + 1; j++) {
// 排除4个角落,周围是类和自己不用循环到
// 是个角落的判断 i<0 j<0 i>this.td-1 j>this.tr-1
// 自己 i=x && j=y
// 旁边是个雷的情况也要排除 this.square[j][i].type =='mine'
if (
i < 0 || //格子超出左边
j < 0 || //盒子超出上边
i > this.td - 1 || //格子超出右边
j > this.tr - 1 || //格子超出下边
(i == x && j == y) || //格子是自己
this.squares[j][i].type == 'mine' //格子是雷
) {
continue;
}
result.push([j, i]); //要以行与列的形式返回出去,因为到时候需要用它去取出数组里的数据
}
}
return result;
}
// 更新所有的数字
Mine.prototype.updateNum = function () {
for (var i = 0; i < this.tr; i++) {
for (var j = 0; j < this.td; j++) {
// 只需要更新的是雷周围的数字,找雷周围的8个格子,如果是数字就累加
if (this.squares[i][j].type == 'number') {
continue;
}
// 获取到每一个雷周围的数字
var num = this.getAround(this.squares[i][j]);
// console.log(num);
for (var k = 0; k < num.length; k++) {
// num[k] = [0, 1];
// num[k][0] = 0;
// num[k][1] = 1;
this.squares[num[k][0]][num[k][1]].value += 1;
}
}
}
// console.log(this.squares);
}
// 创建表格
Mine.prototype.createDom = function () {
var that = this;
var table = document.createElement('table');
for (var i = 0; i < this.tr; i++) {
var domTr = document.createElement('tr');
this.tds[i] = [];
for (var j = 0; j < this.td; j++) {
var domTd = document.createElement('td');
// 给单元格一个按下事件
domTd.pos = [i, j]; //把格子对应的行与列存到格子上,为了下面通过这个值数组里取到对应的数据
domTd.onmousedown = function () {
that.play(event, this); //this->点击的那个domTd
}
// domTd.innerHTML = '0';
this.tds[i][j] = domTd;
// 显示随机的雷
// if (this.squares[i][j].type == 'mine') {
// domTd.className = 'mine';
// }
// 显示随机的数字
// if (this.squares[i][j].type == 'number') {
// domTd.innerHTML = this.squares[i][j].value;
// }
domTr.appendChild(domTd);
}
table.appendChild(domTr);
}
this.parent.innerHTML = ''; //避免多次点击创建多个
this.parent.appendChild(table);
}
Mine.prototype.play = function (ev, obj) {
if (ev.which == 1 && obj.className != 'flag') { //后面的条件是限制用户标完小红旗后不能在左点击
// console.log(obj);
// 点击的是左键
var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
// console.log(curSquare);
var color = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
if (curSquare.type == 'number') {
// 用户点到的是数字
// console.log('数字');
var This = this;
obj.innerHTML = curSquare.value;
obj.className = color[curSquare.value];
// 判断点击的是0的情况
if (curSquare.value == 0) {
// 1.当用户点击的是数字0,显示自己
// 2.找四周(2.1.如果四周的值不为0,那就显示到这里,不需要再找了)
// (2.2 如果四周有0,显示自己,又找四周又以这个0为中心点找0,直到找到的数字不为0为止)
// 循环递归找四周
obj.innerHTML = ''; //如果点击的是数字0就不显示
function getAllZero(square) {
var around = This.getAround(square); //找到了周围的n个格子
for (var i = 0; i < around.length; i++) {
var x = around[i][0]; //行
var y = around[i][1]; //列
This.tds[x][y].className = color[This.squares[x][y].value];
if (This.squares[x][y].value == 0) {
//如果以某个格子为中心找到格子值为0,那就需要接着调用函数(递归)
if (!This.tds[x][y].check) {
// 给对应的td添加一个属性,这条属性用于决定这个格子有没有被找过,如果有,他的值为true,下一次就不会再找了
This.tds[x][y].check = true;
getAllZero(This.squares[x][y]);
}
} else {
// 如果以某个格子为中心找到四周的格子的值不为0,那就把它显示出来
This.tds[x][y].innerHTML = This.squares[x][y].value;
}
}
}
getAllZero(curSquare);
}
} else {
// 用户点的是是雷
// console.log('雷');
this.gameOver(obj);
}
}
// 用户点击右键
if (ev.which == 3) {
// 如果右击的是数字,那就不能点击
if (obj.className && obj.className != 'flag') {
return;
}
obj.className = obj.className == 'flag' ? '' : 'flag';
if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
this.allRight = true; //用户标的小红旗都是雷
} else {
this.allRight = false;
}
if (obj.className == 'flag') {
this.mineNumDom.innerHTML = --this.surplusMine;
} else {
this.mineNumDom.innerHTML = ++this.surplusMine;
}
if (this.surplusMine == 0) {
//剩余雷的数量为0,证明用户已经标完小红旗,判断游戏是否游戏成功
if (this.allRight) {
alert('恭喜你,游戏通过')
} else {
alert('游戏失败');
this.gameOver();
}
}
}
}
// 游戏失败函数
Mine.prototype.gameOver = function (clickTd) {
// 1. 显示所有的雷
// 2. 取消所有格子的点击事件
// 3. 给点中的那个雷显示红色
for (var i = 0; i < this.tr; i++) {
for (var j = 0; j < this.td; j++) {
if (this.squares[i][j].type == 'mine') {
this.tds[i][j].className = 'mine';
}
// 取消格子的点击事件
this.tds[i][j].onmousedown = null;
}
}
if (clickTd) {
clickTd.style.backgroundColor = 'red';
}
}
// 上面button的功能
var btns = document.querySelectorAll('.level button');
var mine = null;
var ln = 0;
var arr = [
[9, 9, 10],
[16, 16, 40],
[28, 28, 99]
];
for (let i = 0; i < btns.length - 1; i++) {
btns[i].onclick = function () {
btns[ln].className = '';
this.className = 'active';
mine = new Mine(...arr[i]);
mine.init();
ln = i;
}
}
btns[0].onclick(); //初始化
btns[3].onclick = function () {
mine.init();
}
// var mine = new Mine(28, 28, 99);
mine.init();
// console.log(mine.getAround(mine.squares[0][0]));
})(window)
文章浏览阅读3.4k次，点赞6次，收藏39次。实验目的(1) 理解状态图的基本概念；(2) 理解活动图的基本概念；(3) 掌握在Rational Rose中绘制状态图和活动图的操作方法。实验内容一 、用状态图描述一个银行贷记卡(对象)在激活期的部分行为细节。激活期两种基本状态：借记(InCredit)和透支(Overdrawn)，可进行存款(deposit)和取款(withdraw)等操作。根据操作交易中涉及的交易金额(amt)和..._状态图收付款
文章浏览阅读233次。克拉克是一名人格分裂患者.某一天克拉克变成了一名数论研究者,在研究数字.他想到了一个题:给定非负整数 x 和正整数 k ,可以做若干操作,每次操作是以下两种方法之一:1. x=x−k 2. x=⌊x√⌋2 现在克拉克想知道,这个整数最少经过多少次操作可以变成 0 . Input 第一行是一个正整数T(1≤T≤100),表示数据组数. 每组数据只有一行两个..._一行一个整数,表示最少操作数。若无论如何都不能将所有的 ai 变成非负整数,输出 -
文章浏览阅读60次。5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。若包含，则为maven项目，否则为非maven项目。JAVA + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件；4.开发环境为Eclipse/idea，数据库为mysql 使用java语言开发。_java实现宠物认领
文章浏览阅读1.5k次，点赞4次，收藏4次。Random是UnityEngine命名空间下的用于生成生成随机数据的静态类_untiy声明random变量
文章浏览阅读33次。springboot基于微信小程序的自习室图书馆座位预约系统。springboot基于JAVA技术的智慧购菜微信小程序。开发软件：eclipse/myeclipse/idea。springboot关于英雄联盟云顶之弈的辅助小程序。springboot人力资源管理系统的核心设计与实现。springboot基于H5的“解压小馆”APP。springboot基于微信小程序的美食推荐系统。springboot基于微信小程序的在线答题系统。springboot客户管理平台的设计及实现。
文章浏览阅读429次。最近重新看了下冒泡排序算法代码: NSMutableArray *numarr = [NSMutableArray arrayWithObjects:@1,@3,@2,@5,@4, nil]; for (int i = 1; i
文章浏览阅读1.8k次，点赞6次，收藏7次。在使用华为云在线服务Api、在线推理时经常会遇到认证鉴权的问题。而在认证鉴权的时候，往往需要通过Token认证通用请求。这种提示多半是因为发送的请求没有携带Token或者是Token过期或错误。Token是系统颁发给IAM用户的访问令牌，承载用户的身份、权限等信息。调用IAM以及其他云服务的接口时，可以使用本接口获取的IAM用户Token进行鉴权。Token可通过调用获取用户Token接口获取。本文记录通过接口服务调用获取用户的Token的解决方案，记录时以华为云为例，其他的平台原理方案类似。_incorrect iam authentication information: x-auth-token not found
文章浏览阅读714次。手机远程云服务器登录密码是什么 内容精选换一换只有运行中的云服务器云主机才允许用户登录。Windows操作系统用户名“Administrator”。首次登录云耀云服务器，请先通过“重置密码”功能设置登录密码。重置密码：选中待重置密码的云耀云服务器，并选择“操作”列下的“ 重置密码”。重置密码：选中待重置密码的云耀云服务器，并选择“操作”列下的“ 重置密码”。请根据需要选择登录方式，登只有运行中的云..._手机服务器地址用户名密码
文章浏览阅读1.6w次，点赞10次，收藏8次。一、问题 如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。 审查元素时看到，遮罩层的z-index为2042。 将遮罩层隐藏，查看弹框的z-index为2043。二、原因 z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在..._el-dialog z-index
文章浏览阅读480次。 笔者所在学校校园网通过光纤上网，用一台浪潮NP50做Internet连接共享服务器，服务器内网卡的IP地址作为其他计算机的网关。由于最近对病毒的查杀不及时，电子备课室中有几台微机感染了病毒，上网升级杀毒软件，进行杀毒，发现感染的都是同一种病毒。 杀毒完毕，发生了一个奇怪的现象，就是杀过毒的这几台微机都不能上网了。这种现象可是笔者第一次遇到，查看网卡的IP地址、网关、DNS地址都正确。_能上qq不能上网
文章浏览阅读773次，点赞16次，收藏11次。WBFJ-1750型微扰法复介电常数测试系统全新架构，更高精度采用了全新的内部架构，具备更加强大的数据处理能力，响应速度更快，能轻松实现4端口S参数测量，差分（平衡）测量，时域测量、带宽、Q值等一键测量。并且其动态范围高达135dB，有着极低的相位噪声，可以帮助工程师在苛刻的测试场景下仍获得准确可靠的测试结果。
文章浏览阅读2.8k次。AcDbDatabase* pDb = new AcDbDatabase(Adesk::kFalse);pDb->readDwgFile(strFileName);AcDbDatabase * pOldDb = acdbCurDwg();acdbHostApplicationServices()->setWorkingDatabase(pDb);下面就可以使用 ac_acdbhostapplicationservices()->setworkingdatabase(pdb)