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 相关文章推荐
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序实现联动选择器
Feb 15 Javascript
vue全屏事件开发详解
Jun 17 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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相当简单的分页类
2008/10/02 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
js form action动态修改方法
2008/11/04 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python for和else语句趣谈
2019/07/02 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
《兰亭集序》教学反思
2014/02/11 职场文书
爱情寄语大全
2014/04/09 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang