西安网站建设 美科动,wordpress 更换首页,wordpress图片尺寸,设计彩票网站开发目录先看下最终的效果#xff1a;首先来分析一个扫雷游戏具有哪些功能分析完成后我们就开始一步步的实现1. 相关html和css2. 我们使用类来完成相应功能3. 之后我们则是要定义一个地图4. 对地图进行渲染5. 对开始按钮添加点击事件6. 现在我们可以实现鼠标左击扫雷的功能7. 给单…
目录先看下最终的效果首先来分析一个扫雷游戏具有哪些功能分析完成后我们就开始一步步的实现1. 相关html和css2. 我们使用类来完成相应功能3. 之后我们则是要定义一个地图4. 对地图进行渲染5. 对开始按钮添加点击事件6. 现在我们可以实现鼠标左击扫雷的功能7. 给单元格添加右键点击事件8. 定义一个生成指定范围随机数的函数9. 限制执行次数10. 在布雷时需要进行校验11. 布雷的校验规则12. 限制布雷功能执行次数13. 统计周围地雷的数量14. 再次将数据渲染到html中15. 设置点击样式并进行递归16. 给reset按钮添加事件17. 定义游戏结束功能18. 定义游戏胜利功能以下是完整js代码结语碎碎念先看下最终的效果 首先来分析一个扫雷游戏具有哪些功能
需要一个地图来表示扫雷游戏会有不同的难度第一下点击是不会触发雷的每个非雷格子都会显示与它相近的单元格中雷的个数点击一个非雷格子会自动将上下左右的非雷格子点开右击单元格可以进行标注再次右击可以取消当点击到地雷单元格时就会游戏结束当所有非雷单元格都点开时则游戏胜利…
分析完成后我们就开始一步步的实现
1. 相关html和css
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {box-sizing: border-box;margin: 0;padding: 0;}article {text-align: center;}main {margin: auto;flex-wrap: wrap;display: flex;width: 500px;height: 500px;}maindiv {margin: 5px;font-size: 0px;background-color: antiquewhite;border: 1px solid blue;}/*不同难度下单元格不同的样式*/.width5 {width: 90px;height: 90px;}.width10 {width: 40px;height: 40px;}.width20 {margin: 2.5px;width: 20px;height: 20px;}/*select鼠标左键点击*/.select {font-size: 12px;background-color: aqua;}/*select2鼠标右键点击*/.select2 {font-size: 0px;background-color: blue;}/style
/headbody!-- 整个扫雷内容区 --article idminebutton idstart开始/buttonselect idselect!--value是不同难度下的地图大小data-level是不同难度下一个非雷单元格周围一圈最多能有多少雷的规定--option value5 data-level4简单/optionoption value10 data-level6普通/optionoption value20 data-level9困难/option/selectbutton idresetreset/buttonmain/main/articlescript src./javascript/4.js/scriptscriptvar main document.querySelector(#mine);//实例化一个扫雷游戏的类var mines new MineSweeping(main);/script
/body/html2. 我们使用类来完成相应功能
class MineSweeping {constructor(root) {this.btn root.querySelector(#start);this.reset root.querySelector(#reset)this.main root.querySelector(main);this.select root.querySelector(#select);}
}3. 之后我们则是要定义一个地图
这里我们使用二维数组来实现其中有一点需要注意在扫雷当中对于边角边缘内部的布雷方式是不同即在内部单元格周围一圈最多可以有8个雷但在边缘或者边角的话最多就只有5个甚至是3个雷为了以后在布雷时更方便的对此单元格进行校验判断周围一圈的雷的数量是否合理在边角在边缘在内部三种情况都需要进行单独判断我们在定义地图时需要额外再扩大一层比如我们界面当中的地图是5 * 5的但我们在定义时的二维数组是6 * 6的这么做的话我们巧妙地将原本地图边缘区域的单元格变成了内部单元格进行校验的时候也会更加方便了
this.row [];
this.col [];
//传入数组的长度因为我们定义的地图是一个边长相等的正方形所以只传一个值就可以了
init (num) {for (let i 0; i num; i) {for (let j 0; j num; j) {this.col.push(0);}this.row.push(this.col);this.col [];}
}4. 对地图进行渲染
即把二维数组在html中写出来
addMap (map) {for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {let div document.createElement(div);div.className width (this.num - 2);//给div添加自定义属性表示该div在二维数组中对应的位置div.setAttribute(data-row, i - 1);div.setAttribute(data-col, j - 1)this.main.appendChild(div);}}}5. 对开始按钮添加点击事件
因为是当用户点击了开始按钮之后我们才进行的初始化地图和渲染地图所以需要对开始按钮加一个点击事件
constructor(root) {//num为地雷数量level为不同难度下单元格周围最大的地雷数量this.num;this.level;}
this.btn.addEventListener(click, this.startInit)startInit () {this.num parseInt(this.select.value) 2;let index this.select.selectedIndex;this.level parseInt(this.select[index].getAttribute(data-level));this.init(this.num)this.addMap(this.row)}6. 现在我们可以实现鼠标左击扫雷的功能
因为如果给每个单元格都添加点击事件的话性能开销就会比较大我们这里就使用事件委托的形式进行事件委托即把原本需要添加给子节点的事件委托到父节点中核心原理就是DOM元素中的事件冒泡
this.main.addEventListener(click, this.gameStart)gameStart (e) {//这其中的涉及的函数下文会讲到this.flag this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);this.flag this.countAroundMines(this.row);this.flag this.addMapMine(this.row);this.flag false;this.selectAround(this.row, parseInt(e.target.getAttribute(data-row)) 1, parseInt(e.target.getAttribute(data-col)) 1);this.gameWin();}7. 给单元格添加右键点击事件 constructor(root) {this.main.addEventListener(mousedown, (e) {document.oncontextmenu function (e) {e.preventDefault();};if (e.button 2) {e.target.classList.toggle(select2)}})}8. 定义一个生成指定范围随机数的函数
方便下面布雷功能的展开 //获取一个大于等于min并且小于等于max的随机值getRandomIntInclusive (min, max) {min Math.ceil(min);max Math.floor(max);return Math.floor(Math.random() * (max - min 1)) min;}9. 限制执行次数
在扫雷游戏中用户的第一次点击是不会触发雷的所以我们布雷的功能需要在用户第一次点击之后运行
//传入了三个参数map为地图num为地雷的个数div为当前点击的单元格
initMine (map, num, div) {num parseInt(num);let x;let y;while (num 0) {x this.getRandomIntInclusive(1, this.num - 2);y this.getRandomIntInclusive(1, this.num - 2);while (map[x][y] -1 || (div.getAttribute(data-row) x - 1 div.getAttribute(data-col) y - 1) || this.isNumberMines(map, x, y)) {x this.getRandomIntInclusive(1, this.num - 2);y this.getRandomIntInclusive(1, this.num - 2);}//可以布雷时就将二维数组中对应下标的值赋值为-1map[x][y] -1;num--;}}10. 在布雷时需要进行校验
我们首先判断当前单元格是否已经有地雷然后还需判断这个单元格是否为当前点击的单元格最后还需判断单元格周围的地雷数量是否合理 while (map[x][y] -1 || (div.getAttribute(data-row) x - 1 div.getAttribute(data-col) y - 1) || this.isNumberMines(map, x, y)) {x this.getRandomIntInclusive(1, this.num - 2);y this.getRandomIntInclusive(1, this.num - 2);}11. 布雷的校验规则
判断此单元格周围的雷数是否合理不合理就不能布雷
//传入三个参数map为地图xy为当前单元格坐标isNumberMines (map, x, y) {//count即周围地雷的数量let count 0;for (let i x - 1; i x 1; i) {for (let j y - 1; j y 1; j) {if (map[i][j] -1) {count;}}}//不同难度等级有不同的限制if (this.level 9) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else if (x 1 || y 0 || x this.num - 2 || y this.num - 2) {if (count 6) {return true;}} else {if (count 9) {return true;}}}if (this.level 6) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else if (x 1 || y 0 || x this.num - 2 || y this.num - 2) {if (count 6) {return true;}} else {if (count 7) {return true;}}}if (this.level 4) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else {if (count 5) {return true;}}}}12. 限制布雷功能执行次数
因为布雷功能只会在第一次点击之后执行一次以后所有点击都将不会再次执行布雷所以我们需要一个标志来限制布雷功能的执行次数
class MineSweeping {constructor(root) {this.flag true;}gameStart (e) {this.flag this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);this.flag false;}
}13. 统计周围地雷的数量
布完雷之后我们还需要对没有雷的单元格进行统计周围地雷数量并把统计结果赋值到对应的数组元素当中同样这个功能也会只执行一次 gameStart (e) {this.flag this.countAroundMines(this.row);this.flag false;}
//传入一个参数map为地图
countAroundMines (map) {let count;for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {count 0;if (map[i][j] ! -1) {for (let ii i - 1; ii i 1; ii) {for (let jj j - 1; jj j 1; jj) {if (map[ii][jj] -1) {count;}}}map[i][j] count;}}}}14. 再次将数据渲染到html中
我们在统计完之后就需要把这些结果包括地雷地雷数量等数据渲染到html中这个功能同样只会执行一次 gameStart (e) {this.flag this.addMapMine(this.row);this.flag false;}
//传入一个参数map为地图
addMapMine (map) {//获取到当前html中所有的单元格let div this.main.querySelectorAll(div);let t 0;for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {if (map[i][j] -1) {div[t].innerHTML 雷;} else {div[t].innerHTML map[i][j];}}}}15. 设置点击样式并进行递归
以上做完之后我们还需对当前单元格设置点击样式并实现如果点击了非雷单元格则要同时点开其上下左右四个格子直到遇到地雷为止
selectAround (map, x, y) {let div this.main.querySelectorAll(div);//对此刻传入的单元格进行判断如果不在规定的范围内x与y的范围以及单元格本身是否被点击了则终止函数执行因为有递归if (x 1 || y 1 || x this.num - 2 || y this.num - 2 || div[(x - 1) * (this.num - 2) y - 1].classList.contains(select)) {return;//如果此时单元格为地雷} else if (map[x][y] -1) {//判断此单元格是否被右键标记有则移除标记添加左键点击样式if (div[(x - 1) * (this.num - 2) y - 1].classList.contains(select2)) {div[(x - 1) * (this.num - 2) y - 1].classList.remove(select2);}div[(x - 1) * (this.num - 2) y - 1].classList.add(select);//触发游戏结束this.gameOver();} else {if (div[(x - 1) * (this.num - 2) y - 1].classList.contains(select2)) {div[(x - 1) * (this.num - 2) y - 1].classList.remove(select2);}div[(x - 1) * (this.num - 2) y - 1].classList.add(select);//开始对该单元格上下左右进行递归if (map[x][y 1] ! -1) {this.selectAround(map, x, y 1);}if (map[x][y - 1] ! -1) {this.selectAround(map, x, y - 1);}if (map[x - 1][y] ! -1) {this.selectAround(map, x - 1, y);}if (map[x 1][y] ! -1) {this.selectAround(map, x 1, y);}}}16. 给reset按钮添加事件 constructor(root) {this.reset.addEventListener(click, this.gameReset)}gameReset () {this.flag true;this.main.innerHTML ;this.row [];this.col [];}17. 定义游戏结束功能 gameOver () {setTimeout(() {alert(over);this.gameReset();}, 100)}18. 定义游戏胜利功能 this.main.addEventListener(click, this.gameStart)gameStart (e) {//每点击一次就判断一次是否胜利this.gameWin();}
gameWin () {let flag true;let div this.main.querySelectorAll(div);for (let i 0; i (this.num - 2) * (this.num - 2); i) {if (div[i].innerHTML ! 雷) {if (!div[i].classList.contains(select)) {flag false;break;}}}if (flag) {setTimeout(() {alert(win);this.gameReset();}, 100)}}至此整个扫雷游戏就基本写完了
以下是完整js代码
class MineSweeping {constructor(root) {this.btn root.querySelector(#start);this.reset root.querySelector(#reset)this.main root.querySelector(main);this.select root.querySelector(#select);this.num;this.level;this.flag true;this.row [];this.col [];this.btn.addEventListener(click, this.startInit)this.main.addEventListener(click, this.gameStart)this.main.addEventListener(mousedown, (e) {document.oncontextmenu function (e) {e.preventDefault();};if (e.button 2) {e.target.classList.toggle(select2)}})this.reset.addEventListener(click, this.gameReset)}//因为用户第一次点击时单元格不为雷所以布雷放在触发点击事件之后并且保证布雷只会执行一次gameStart (e) {this.flag this.initMine(this.row, (this.num - 2) * (this.num - 2) / 2.5, e.target);this.flag this.countAroundMines(this.row);this.flag this.addMapMine(this.row);this.flag false;this.selectAround(this.row, parseInt(e.target.getAttribute(data-row)) 1, parseInt(e.target.getAttribute(data-col)) 1);this.gameWin();}//开始初始化地图startInit () {this.num parseInt(this.select.value) 2;let index this.select.selectedIndex;this.level parseInt(this.select[index].getAttribute(data-level));this.init(this.num)this.addMap(this.row)}//定义地图init (num) {for (let i 0; i num; i) {for (let j 0; j num; j) {this.col.push(0);}this.row.push(this.col);this.col [];}}//开始在二维数组中布雷initMine (map, num, div) {num parseInt(num);let x;let y;while (num 0) {x this.getRandomIntInclusive(1, this.num - 2);y this.getRandomIntInclusive(1, this.num - 2);while (map[x][y] -1 || (div.getAttribute(data-row) x - 1 div.getAttribute(data-col) y - 1) || this.isNumberMines(map, x, y)) {x this.getRandomIntInclusive(1, this.num - 2);y this.getRandomIntInclusive(1, this.num - 2);}map[x][y] -1;num--;}}//布雷的校验规则判断此单元格能否布雷isNumberMines (map, x, y) {let count 0;for (let i x - 1; i x 1; i) {for (let j y - 1; j y 1; j) {if (map[i][j] -1) {count;}}}if (this.level 9) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else if (x 1 || y 0 || x this.num - 2 || y this.num - 2) {if (count 6) {return true;}} else {if (count 9) {return true;}}}if (this.level 6) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else if (x 1 || y 0 || x this.num - 2 || y this.num - 2) {if (count 6) {return true;}} else {if (count 7) {return true;}}}if (this.level 4) {if ((x 1 y 1) || (x 0 y this.num - 2) || (x this.num - 2 y 0) || (x this.num - 2 y this.num - 2)) {if (count 4) {return true;}} else {if (count 5) {return true;}}}}//获取一个大于等于min并且小于等于max的随机值getRandomIntInclusive (min, max) {min Math.ceil(min);max Math.floor(max);return Math.floor(Math.random() * (max - min 1)) min;}//渲染地图addMap (map) {//0-7for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {let div document.createElement(div);div.className width (this.num - 2);div.setAttribute(data-row, i - 1);div.setAttribute(data-col, j - 1)this.main.appendChild(div);}}}//开始渲染地雷及非雷单元格周围地雷数量addMapMine (map) {let div this.main.querySelectorAll(div);let t 0;for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {if (map[i][j] -1) {div[t].innerHTML 雷;} else {div[t].innerHTML map[i][j];}}}}//在二维数组中统计非雷单元格周围的地雷数量并赋值到对应元素中countAroundMines (map) {let count;for (let i 1; i map[0].length - 1; i) {for (let j 1; j map[0].length - 1; j) {count 0;if (map[i][j] ! -1) {for (let ii i - 1; ii i 1; ii) {for (let jj j - 1; jj j 1; jj) {if (map[ii][jj] -1) {count;}}}map[i][j] count;}}}}//给点击的单元格设置样式如果用户点击了非雷单元格则程序会自动帮用户点击此单元格上下左右四个单元格中同样非雷的单元格直到遇到地雷selectAround (map, x, y) {let div this.main.querySelectorAll(div);if (x 1 || y 1 || x this.num - 2 || y this.num - 2 || div[(x - 1) * (this.num - 2) y - 1].classList.contains(select)) {return;} else if (map[x][y] -1) {if (div[(x - 1) * (this.num - 2) y - 1].classList.contains(select2)) {div[(x - 1) * (this.num - 2) y - 1].classList.remove(select2);}div[(x - 1) * (this.num - 2) y - 1].classList.add(select);//如果点击了地雷则触发游戏结束this.gameOver();} else {if (div[(x - 1) * (this.num - 2) y - 1].classList.contains(select2)) {div[(x - 1) * (this.num - 2) y - 1].classList.remove(select2);}div[(x - 1) * (this.num - 2) y - 1].classList.add(select);if (map[x][y 1] ! -1) {this.selectAround(map, x, y 1);}if (map[x][y - 1] ! -1) {this.selectAround(map, x, y - 1);}if (map[x - 1][y] ! -1) {this.selectAround(map, x - 1, y);}if (map[x 1][y] ! -1) {this.selectAround(map, x 1, y);}}}//重置游戏gameReset () {this.flag true;this.main.innerHTML ;this.row [];this.col [];}//游戏结束gameOver () {setTimeout(() {alert(over);this.gameReset();}, 100)}//游戏胜利gameWin () {let flag true;let div this.main.querySelectorAll(div);for (let i 0; i (this.num - 2) * (this.num - 2); i) {if (div[i].innerHTML ! 雷) {if (!div[i].classList.contains(select)) {flag false;break;}}}if (flag) {setTimeout(() {alert(win);this.gameReset();}, 100)}}} 结语碎碎念
第一次写这种教程也不知道怎么样写才能带来更好的阅读体验如果觉得写的不行的话非常抱歉
这是我第一次进行知识输出以前则是一直只有输入感觉写完这篇文章之后自己确实有点感悟但具体在哪还没感觉出来
其实代码写的还有很多问题的就比如那个布雷功能只能对当前已经布置下的地雷进行校验未来要是在另一个位置布雷则会影响之前已经布下的地雷具体来说就是简单难度最多一圈只有4个雷但实际运行下来最多却有5个。另外样式也不美观自己需要学习的地方还有很多。
如果这篇文章有帮到你的话我会很高兴 最后祝我们变得更强:。
