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简易缓动插件(源码打包)
Feb 16 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python中分数的相关使用教程
2015/03/30 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
财务人员个人求职信范文
2013/12/04 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
网络管理专业求职信
2014/03/15 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
公司2015年终工作总结
2015/05/26 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript