js实现简单扫雷


Posted in Javascript onNovember 27, 2020

本文实例为大家分享了js实现简单扫雷的具体代码,供大家参考,具体内容如下

实现效果:

js实现简单扫雷

总体思想:这个扫雷难点主要就两点:第一点就是雷的随机分布,我这里使用js动态生成了10X10的table表格,然后设定生成20个雷,然后在生成每个格子代表的数字,雷我们用9表示,因为0-8要被其他非雷格子使用,然后我们只要一格是雷区那么周围的格子都加一,这样我们的雷区就生成好了,然后玩法的编写主要难点就是在当点击数字为0时的格子时要把它周围的0区也显示出来,因此这里我们使用递归来实现

1、界面的生成

//生成界面
 function init() {
 document.write("<table border='1px' rules='all' cellpadding='10px '> ")
 for (var i = 1; i < 11; i++) {
 document.write("<tr>");
 for (var j = 1; j < 11; j++) {
 document.write("<td class='game'>" + arr3[i][j] + "</td>");
 }
 document.write("</tr>");
 }
 document.write("</table>")
 var t = document.getElementsByTagName('table')[0];
 var td = document.getElementsByTagName('td');
 for (var i = 0; i < td.length; i++) {
 td[i].style.background='#ffffff';
 td[i].style.opacity = '0';
 td[i].style.transition = 'all 4s'
 }
 //样式添加
 t.style.margin = '0px auto';


 document.close()
 }

2、我们表格是10X10的,但是后面的操作要计算每个格子的值,因此当格子在边界的话数组就会越界,所以我们这边定义二维数组12X12来表示10X10的表格中的数值,雷我们随机生成20个

//初始化数组
 function initarr() {
 var arr = new Array(12);
 for (var i = 0; i < 12; i++) {
 arr[i] = new Array(12);
 for (var j = 0; j < 12; j++) {
 arr[i][j] = 0;
 }
 }
 return arr;
 }
 //随机生成雷
 function rangemine() {
 var arr = initarr();

 var num = 0;
 for (var index = 0; index < 20; index++) {
 while (true) {
 var row = Math.floor(Math.random() * 10) + 1;
 var col = Math.floor(Math.random() * 10) + 1;
 if (arr[row][col] != 9) {
 arr[row][col] = 9;
 break;
 }
 }
 }
 return arr;
 }

3、生成每块对应的数值我们实现方法为遍历数组,如果为雷,则雷周围的八块的数值+1

//生成每块所对应的数字
 function num() {
 var arr2 = rangemine();

 for (var i = 1; i < 11; i++) {
 for (var j = 1; j < 11; j++) {
 if (arr2[i][j] >= 9) {
 arr2[i][j + 1] += 1;
 arr2[i][j - 1] += 1;
 arr2[i - 1][j] += 1;
 arr2[i + 1][j] += 1;
 arr2[i - 1][j + 1] += 1;
 arr2[i - 1][j - 1] += 1;
 arr2[i + 1][j - 1] += 1;
 arr2[i + 1][j + 1] += 1;

 }
 }
 }
 for (var i = 1; i < 11; i++) {
 for (var j = 1; j < 11; j++) {
 if (arr2[i][j] > 8) {
 arr2[i][j] = 9;
 }
 }
 }
 return arr2;

 }

4、添加监听器,我这里添加了touch事件,touch事件只用于移动端,因此pc端要运行要模拟移动端

//添加监听器
 function gostart() {
 var t = document.getElementsByTagName('td');
 for (var i = 0; i < t.length; i++) {
 {
 t[i].addEventListener('touchstart', start);
 t[i].addEventListener('touchend', end);
 }
 }
 }
 gostart();
 //开始函数
 function start(e) {
 console.log((e.touches[0]));
 var a = e.touches[0];

 }
 //结尾函数
 function end(e) {
 var a = e.touches[0];
 mix(e.srcElement.parentElement.rowIndex + 1, e.srcElement.cellIndex + 1, e.srcElement.parentElement);
 /* startgame(e.srcElement.parentElement.rowIndex,e.srcElement.cellIndex,e.srcElement); */
 }

5、递归实现扫雷,对周围没有雷的格子进行递归将其周围也是0的格子展示出来

//递归消除点到0块时显露出其他的块
 function mix(x, y, e) {
 var flag=0;

 if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 0) {
 //防止无限递归
 e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
 e.parentElement.rows[x - 1].cells[y - 1].innerHTML="";
 e.parentElement.rows[x - 1].cells[y - 1].style.background = '#a4eaff';
 arr3[x][y] = 10;
 mix(x, y + 1, e);
 mix(x, y - 1, e);
 mix(x + 1, y, e);
 mix(x - 1, y, e);
 mix(x + 1, y + 1, e);
 mix(x - 1, y + 1, e);
 mix(x + 1, y - 1, e);
 mix(x - 1, y - 1, e);
 } else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] > 0 && arr3[x][y] < 9) {
 //颜色变红且透明度变为1
 arr3[x][y]=-1;
 e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
 e.parentElement.rows[x - 1].cells[y - 1].style.backgroundColor = '#a4eaff';
 //判断是否结束
 for(var i=1;i<arr3.length-1;i++){
 for(var j=1;j<arr3[i].length-1;j++){
 if(arr3[i][j]!=-1||arr3[i][j]!=9){
 flag=1;
 break;
 }
 }
 }
 if(flag==0){
 alert('成功');
 }
 return;
 } else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 9) {
 alert('你踩到地雷啦!!!');
 arr3 = num();
 //移除原来的表格
 var s = document.getElementsByTagName('table')[0];
 s.parentNode.removeChild(s);
 init();
 gostart();

 }

 }

6、全部js代码:

function initarr() {
 var arr = new Array(12);
 for (var i = 0; i < 12; i++) {
 arr[i] = new Array(12);
 for (var j = 0; j < 12; j++) {
 arr[i][j] = 0;
 }
 }
 return arr;
 }
 //随机生成雷
 function rangemine() {
 var arr = initarr();

 var num = 0;
 for (var index = 0; index < 20; index++) {
 while (true) {
 var row = Math.floor(Math.random() * 10) + 1;
 var col = Math.floor(Math.random() * 10) + 1;
 if (arr[row][col] != 9) {
 arr[row][col] = 9;
 break;
 }
 }
 }
 return arr;
 }
 //生成每块所对应的数字
 function num() {
 var arr2 = rangemine();

 for (var i = 1; i < 11; i++) {
 for (var j = 1; j < 11; j++) {
 if (arr2[i][j] >= 9) {
 arr2[i][j + 1] += 1;
 arr2[i][j - 1] += 1;
 arr2[i - 1][j] += 1;
 arr2[i + 1][j] += 1;
 arr2[i - 1][j + 1] += 1;
 arr2[i - 1][j - 1] += 1;
 arr2[i + 1][j - 1] += 1;
 arr2[i + 1][j + 1] += 1;

 }
 }
 }
 for (var i = 1; i < 11; i++) {
 for (var j = 1; j < 11; j++) {
 if (arr2[i][j] > 8) {
 arr2[i][j] = 9;
 }
 }
 }
 return arr2;

 }

 var arr3 = num()
 //生成界面
 function init() {
 document.write("<table border='1px' rules='all' cellpadding='10px '> ")
 for (var i = 1; i < 11; i++) {
 document.write("<tr>");
 for (var j = 1; j < 11; j++) {
 document.write("<td class='game'>" + arr3[i][j] + "</td>");
 }
 document.write("</tr>");
 }
 document.write("</table>")
 var t = document.getElementsByTagName('table')[0];
 var td = document.getElementsByTagName('td');
 for (var i = 0; i < td.length; i++) {
 td[i].style.background='#ffffff';
 td[i].style.opacity = '0';
 td[i].style.transition = 'all 4s'
 }
 //样式添加
 t.style.margin = '0px auto';


 document.close()
 }
 init();
 //添加监听器
 function gostart() {
 var t = document.getElementsByTagName('td');
 for (var i = 0; i < t.length; i++) {
 {
 t[i].addEventListener('touchstart', start);
 t[i].addEventListener('touchend', end);
 }
 }
 }
 gostart();
 //开始函数
 function start(e) {
 console.log((e.touches[0]));
 var a = e.touches[0];

 }
 //结尾函数
 function end(e) {
 var a = e.touches[0];
 mix(e.srcElement.parentElement.rowIndex + 1, e.srcElement.cellIndex + 1, e.srcElement.parentElement);
 /* startgame(e.srcElement.parentElement.rowIndex,e.srcElement.cellIndex,e.srcElement); */
 }

 
 //递归消除点到0块时显露出其他的块
 function mix(x, y, e) {
 var flag=0;

 if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 0) {
 //防止无限递归
 e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
 e.parentElement.rows[x - 1].cells[y - 1].innerHTML="";
 e.parentElement.rows[x - 1].cells[y - 1].style.background = '#a4eaff';
 arr3[x][y] = 10;
 mix(x, y + 1, e);
 mix(x, y - 1, e);
 mix(x + 1, y, e);
 mix(x - 1, y, e);
 mix(x + 1, y + 1, e);
 mix(x - 1, y + 1, e);
 mix(x + 1, y - 1, e);
 mix(x - 1, y - 1, e);
 } else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] > 0 && arr3[x][y] < 9) {
 //颜色变红且透明度变为1
 arr3[x][y]=-1;
 e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
 e.parentElement.rows[x - 1].cells[y - 1].style.backgroundColor = '#a4eaff';
 //判断是否结束
 for(var i=1;i<arr3.length-1;i++){
 for(var j=1;j<arr3[i].length-1;j++){
 if(arr3[i][j]!=-1||arr3[i][j]!=9){
 flag=1;
 break;
 }
 }
 }
 if(flag==0){
 alert('成功');
 }
 return;
 } else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 9) {
 alert('你踩到地雷啦!!!');
 arr3 = num();
 //移除原来的表格
 var s = document.getElementsByTagName('table')[0];
 s.parentNode.removeChild(s);
 init();
 gostart();

 }

 }

7、总结

这次的扫雷最大的缺点就是不能保证第一次不点到雷,还有就是是否还没有进行测试。。因为我也没有玩过一整局可能会有些许小bug

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
element中table高度自适应的实现
Oct 21 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 #Javascript
javascript实现扫雷简易版
Aug 18 #Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 #Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 #Javascript
openLayer4实现动态改变标注图标
Aug 17 #Javascript
openlayers4实现点动态扩散
Aug 17 #Javascript
Vue实现计算器计算效果
Aug 17 #Javascript
You might like
php中的比较运算符详解
2013/10/28 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
php pdo操作数据库示例
2017/03/10 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python实现自动访问网页的例子
2020/02/21 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
如何写好自荐信
2014/04/07 职场文书
企业宣传策划方案
2014/05/29 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
四年级数学上册教学计划
2015/01/20 职场文书