首页 / JAVASCRIPT / JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9089字，纯文字阅读大概需要13分钟。

内容图文

本文实例讲述了JavaScript扫雷游戏。分享给大家供大家参考，具体如下：

翻出年初写的游戏贴上来，扫雷相信大家都玩过，先上图：

JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】 - 文章图片

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript版扫雷</title>
<style>
  input{ margin:0; padding:0;}
  input{ outline:none;}
  #game_box{ width:400px; height:430px; margin:100px auto; border:#333 1px solid; background:#ccc -webkit-repeating-linear-gradient(top,#ccc,#000);background:#ccc -moz-repeating-linear-gradient(top,#ccc,#000);background:#ccc -o-repeating-linear-gradient(top,#ccc,#000);background:#ccc -ms-repeating-linear-gradient(top,#ccc,#000); box-shadow:0 0 50px 10px #333; box-shadow:0 0 50px 10px #333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CBCBCB', endColorstr='#000000');
   }
  #map{width:400px; height:348px;*height:380px;}
  #time{ height:18px; line-height:22px; text-align:center;margin:6px 0; margin-top:10px; _margin-top:40px; color:#fff; position:relative;}
  #time input{ width:40px; height:18px; line-height:18px; text-align:center;}
  #table_map{ width:336px; height:336px; border:none; border-left:#000 1px solid;border-top:#000 1px solid; margin:32px 32px 0px 32px; background:#D8ECF6; text-align:center; border-collapse: collapse}
  #table_map td{ width:20px; height:20px; border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; color:#333333; transition:all 0.7s; cursor:pointer;}
  #table_map td.mask{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; background:#333; }
  #table_map td.over{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; }
  .over_bg{ background:#E1E1E1;}
  @-webkit-keyframes round{
    from{ -webkit-transform:rotateX(0);}
    to{ -webkit-transform:rotateX(360deg);}
  }
  @-webkit-keyframes show{
    from{ -webkit-transform:rotateX(180deg) rotateY(0) scale(0);}
    to{ -webkit-transform:rotateX(360deg) rotateY(360deg) scale(1);}
  }
  @-moz-keyframes round{
    from{ -moz-transform:rotateX(0);}
    to{ -moz-transform:rotateX(360deg);}
  }
  @-moz-keyframes show{
    from{ -moz-transform:rotateX(180deg) rotateY(0) scale(0);}
    to{ -moz-transform:rotateX(360deg) rotateY(360deg) scale(1);}
  }
  @-ms-keyframes round{
    from{ -ms-transform:rotateX(0);}
    to{ -ms-transform:rotateX(360deg);}
  }
  @-ms-keyframes show{
    from{ -ms-transform:rotateX(180deg) rotateY(0) scale(0);}
    to{ -ms-transform:rotateX(360deg) rotateY(360deg) scale(1);}
  }
  #game_box{-webkit-animation:show 3s;-moz-animation:show 3s;-ms-animation:show 3s;}
</style>
</head>
<body>
<div id="game_box">
  <div id="map"></div>
  <div id="time">时间：<input type="text" value="0" disabled="disabled" />  炸弹：<input type="text" value="50" disabled="disabled" /></div>
</div>
<script>
// 2014年3月 by 王美建 QQ1207526854
  window.onload=function()
  {
    Game.init('game_box','map');
  };
  var Game={
    data : {  //关卡数据
      mine : 40, col : 16, row : 16
    },
    init : function(box_id,mapbox_id){ //初始化
      this.oBox = document.getElementById(box_id);
      this.mapBox = document.getElementById(mapbox_id)
      this.mapBox.innerHTML = this.createMap();
      this.oMap = this.mapBox.getElementsByTagName('table')[0];
      this.aTd = this.oMap.getElementsByTagName('td');
      this.time = document.getElementById('time').getElementsByTagName('input')[0];
      this.mineNum = document.getElementById('time').getElementsByTagName('input')[1];
      this.mineNum.value = this.data.mine;
      this.surplus = [];
      this.iCount = this.data.col*this.data.row-this.data.mine;
      this.createMine();
      this.addVal();
      this.play();
    },
    createMap : function() //生成画布
    {
      var html = '';
      var This = this.data;
      var i=0,j=0;
      function createTd()
      {
        var tds = '';
        for(j = 0; j < This.row; j++)
        {
          tds += '<td class = "mask" index='+ (This.col*i+j) +'></td>';
        };
        return tds;
      }
      for(i = 0; i < This.col; i++)
      {
        html += '<tr>' + createTd() + '</tr>';
      };
      return ('<table id="table_map" cellpadding="0" cellspacing="0" ><tbody>'+html+'</table></tbody>');
    },
    createMine : function(){ //生成炸弹
      var This = this.data;
      this.indexArr = [];
      this.mineArr = [];
      for(var i = 0,j = This.col*This.row; i < j; i++ )
      {
        this.indexArr.push(i) ;  //所有单元格的索引
      };
      for( var i = 0; i < This.mine; i++ ) //随机取出This.mine个做为炸弹的索引，不重复
      {
        var index = Math.round(Math.random()*(this.indexArr.length-1)); //索引
        this.mineArr.push(this.indexArr.splice(index,1)[0]);
      };
      this.mineArr.sort( function(a,b){return a-b;} );
    },
    addVal : function() //给有炸弹的td添加自定义属性hasMine值为true
    {
      for(var i = 0, j = this.mineArr.length; i < j; i++)
      {
        this.aTd[ this.mineArr[i] ].hasMine = true;
      };
    },
    play : function()
    {//鼠标左右键同时按下  ev.button=3
      this.timeOnoff = false;
      var This = this;
      this.markNum = [];
      this.oMap.oncontextmenu=function(ev)  //插旗标记
      {
        var ev = ev || window.event;
        var target = ev.srcElement || ev.target;
        if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' )
        {
          !target.mark ? (target.innerHTML = '▲',target.style.color = '#FFEFAD',target.mark = true,This.mineNum.value--,This.markNum.push( target.getAttribute( 'index' ) )) : (target.innerHTML = '',target.style.color = '#333333',target.mark = false,This.mineNum.value++,This.markNum.splice( This.findIndex( This.markNum,target.getAttribute( 'index' ) ),1 ));
        };
        return false;
      };
      this.oMap.onclick = function(ev)
      {
        var ev = ev || window.event;
        var target = ev.srcElement || ev.target;
        if(!This.timeOnoff) //开始计时
        {
          This.timeOnoff = true;
          This.timer=setInterval(function(){
            This.time.style.webkitAnimation = 'round 1s infinite';   //计时器翻转
            This.time.value++;
          },1000)
        };
        function openTd(aTd,meg,len)
        {
          var num = 0;
          var show = null;
          var t = Math.ceil( 15*This.data.col*This.data.row/len );  //未打开格子越多，翻开时间间隔越短
          show = setInterval(function(){
            aTd[ This.surplus[num] ].className = 'over';
            aTd[ This.surplus[num] ].style.webkitAnimation = 'round 1s 1';
            if( aTd[ This.surplus[num] ].hasMine && aTd[ This.surplus[num] ].className == 'over' )
            {
              aTd[ This.surplus[num] ].style.color = '#333333';
              aTd[ This.surplus[num] ].innerHTML = '★';
            }else{
              aTd[ This.surplus[num] ].innerHTML = '';
            };
            num++;
            if(num == len)
            {
              clearInterval(show);
              alert(meg);
            }
          },t)
        };
        function countSur() //统计没打开的格子的索引
        {
          var iCheck = 0;
          This.surplus = [];
          for( var i = 0,j = This.data.col*This.data.row; i < j; i++ )
          {
            if( This.aTd[i].className == 'mask' )
            {
              iCheck++;
              This.surplus.push( i );
            };
          };
          return iCheck;
        };
        if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && !target.hasMine )//没踩到雷
        {
          This.count( parseInt(target.getAttribute('index')) ); //递归
          target.style.webkitAnimation = 'round 1s 1';
          if( This.iCount <= 10 ) //通关检测
          {
            //console.log( 'iCheck='+iCheck+'iCount='+This.iCount )
            if( countSur() == This.data.mine ) //剩下格子数等于炸弹数而又没踩到炸弹，可不就是过关了
            {
              clearInterval( This.timer );
              This.time.style.webkitAnimation = '';   //停止计时器翻转
              openTd( This.aTd,'不错小伙子，过关了！用时：'+This.time.value+'s',This.surplus.length );
            };
          };
        }else if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && target.hasMine ){ //踩到雷
          clearInterval(This.timer);   //停止计时器
          This.time.style.webkitAnimation = '';   //停止计时器翻转
          var mineArr = This.mineArr;  //优化：全局变局部
          var aTd = This.aTd;
          for( var i = 0,j = mineArr.length; i < j; i++ )
          {
            aTd[ mineArr[i] ].style.color = '#333333';
            aTd[ mineArr[i] ].className = 'over';
            aTd[ mineArr[i] ].innerHTML = '★';   //显示炸弹标志
          };
          target.style.color = 'red';
          countSur();
          openTd( aTd,'小朋友，你输了~',This.surplus.length );
        };
      };
    },
    findIndex : function(arr,ele) //找到数组某个元素在数组中的位置
    {
      for(var i=0,j=arr.length;i<j;i++)
      {
        if(ele === arr[i])
        {
          return i;
        };
      };
      return -1;
    },
    count : function(iNow) //统计事件源周围炸弹
    {
      var arr = []; //事件源周围的格子索引
      var iNum = 0; //事件源周围炸弹个数
      var len = this.data.col;
      if( iNow % len == 0 )  //点击最左边的格子时
      {
        arr = [iNow+1,iNow-len,iNow-len+1,iNow+len,iNow+len+1];
      }else if( iNow == ( Math.floor( iNow/len ) + 1 ) *len -1 ){ //点击靠右边的格子时
        arr = [iNow-1,iNow-len,iNow-len-1,iNow+len,iNow+len-1];
      }else{ //点击不靠边的格子时
        arr = [iNow-1,iNow+1,iNow-len,iNow-len+1,iNow-len-1,iNow+len,iNow+len-1,iNow+len+1];
      };
      for( var i = 0; i < arr.length; i++ ) //统计周围炸弹
      {
        if( this.aTd[ arr[ i ] ] && this.aTd[ arr[ i ] ].hasMine )
        {
          iNum++;
        }
      };
      if( iNum == 0 )  //当前点击格子周围没有炸弹则递归
      {
        this.aTd[iNow].className = '';
        this.aTd[ iNow ].innerHTML == '▲' ? this.aTd[ iNow ].innerHTML = '' : '';
        for( var i = 0,j = arr.length; i < j; i++ )
        {
          if( this.aTd[ arr[ i ] ] && this.aTd[ arr[i] ].className == 'mask')
          {
            this.aTd[ arr[i] ].className = '';
            this.aTd[ arr[i] ].innerHTML == '▲' ? this.aTd[ arr[i] ].innerHTML = '' : '';
            this.iCount--;
            this.count( arr[i] );
          };
        };
      }else{ //当前点击格子周围有炸弹则显示炸弹个数
        this.aTd[iNow].innerHTML = iNum;
        this.aTd[iNow].style.color = '#333333';
        this.aTd[iNow].style.webkitAnimation = 'round 1s 1';
        this.aTd[iNow].className == 'mask' ? (this.aTd[iNow].className = '',this.iCount--) : '';
      };
    }
  };
</script>
</body>
</html>

完整实例代码点击此处本站下载。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】全部内容，希望文章能够帮你解决JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/347919.html

来源：【匿名】

【上一篇】JS仿京东移动端手指拨动切换轮播图效果【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】】教程文章相关的互联网学习教程文章

js自动下载【代码】

常用方法是利用a标签的属性download下载对应文件、图片等<a href=".." download="...."></a>但是如果想在页面加载完后即时下载可以用一下方法function download(){var a=document.createElement("a");a.href="";a.download=‘down.png‘ ;a.click(); } 简单方便不留痕迹，个人觉得比iframe方法简洁。还有一种就是利用iframe的特性。原文：http://www.cnblogs.com/AaronNotes/p/6491914.html

js 文件下载兼容ie【代码】

前置条件：后台接口返回二进制流文件一、设置前端请求的的responseType: ‘blob‘ 二、接收请求数据并调用下载var content = res.data // 接口返回的二进制流var filename = fileName.xls // 文件名，根据需要更改var blob = new Blob([content], {type: ‘application/vnd.ms-excel‘}) // 转化为blob对象 if (window.navigator.msSaveOrOpenBlob) { // IEnavigator.msSaveBlob(blob, filename) } else {var aTag = document.cre...

js下载篇【代码】

1、地址下载 // 地址下载,fileName暂无作用 export const urlDownload = (url, fileName = ‘下载文件‘) => {// 创建隐藏的可下载链接let eleLink = document.createElement(‘a‘)eleLink.download = fileNameeleLink.style.display = ‘none‘eleLink.href = url// 触发点击 document.body.appendChild(eleLink)eleLink.click()// 然后移除 document.body.removeChild(eleLink) } 2、转化text下载 // 内容转化为文件下载 expo...

js下载文件

window.downloadFile = function (sUrl) { //iOS devices do not support downloading. We have to inform user about this.if (/(iP)/g.test(navigator.userAgent)) {alert(‘Your device does not support files downloading. Please try again in desktop browser.‘);return false;} //If in Chrome or Safari - download via virtual link clickif (window.downloadFile.isChrome || window.downloadFile.isSafari) {//Creati...

JS夸页面通信极简方案&纯前端实现文件下载【图】

由于笔者之前维护了几个比较老的项目是用jquery全家桶开发的，其中有些需求是需要跨页面交互和父子页面通信，故借此总结一下。另一块是前端实现文件下载功能，虽然方法很多，为了不用重复造轮子，在此还是总结一波，毕竟多页面下的应用场景还是很多的。文章摘要实现页面之间通信的方法实现父子页面和子页面与子页面之间通信的方法前端实现文件下载功能由于本文介绍的主要还是基于javascript，不涉及任何框架方面的问题（如果想研究...

html网页中加载js脚本下载下来是乱码（文件编码格式）【代码】【图】

问题描述：在一个index.html网页中，引入了jquery脚本，但是却出现错误，提示$ is not defined<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src=‘js/jquery-1.9.1.min.js‘></script></head> <body>window.onload=function (){console.log($); //$ is not defined} </body> </html> 在控制台下，发现jquery返回的是乱码格式，所以才会出现上述错误。正常情况下，应该是这样...

JavaScript实现打包下载【代码】

npm下载jszipnpm install jszip npm install file-saver 函数import JSZip from "jszip"; import { saveAs } from "file-saver";//data=[{index:xx, ..., blob:xx}{...}]downAllRecord(data: any) {let zip = new JSZip();//初始化for (let i = 0; i < data.length; i++) {let obj = data[i];zip.file(obj.index + ".webm", obj.blob);}zip.generateAsync({ type: "blob" }).then(function(content: Blob) {saveAs(content, "Sound...

javascript从网络下载随机笑话【代码】

/**** 讲笑话函数(调试用)* @param callback 回调函数*/function randomText(callback) {var result =‘‘;$.ajax({type:"get",url:"http://www.mxnzp.com/api/jokes/list/random",dataType:"json",async:false,success:function(response){var code = response.code;var data = response.data;if(code == 1 && data.length > 1) {var text = data[0].content;callback(text);result = text;}},error:function (res) {console.log(...

js 下载文件不直接打开的方法【代码】

1function downloadfile(url) {2var xmlHttp = null;3if (window.ActiveXObject) {4// IE6, IE5 浏览器执行代码 5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");6 } elseif (window.XMLHttpRequest) {7// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 8 xmlHttp = new XMLHttpRequest();9 } 10//2.如果实例化成功，就调用open（）方法：11if (xmlHttp != n...

js下载文件兼容性写法【代码】

// 通用下载方法 export function download(fileName) {/** 使用window.location.href pc端下载正常，平板下载后文件内容为空* // window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;* *///兼容平板下载的写法var url = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;var fileName = fileName;ajax(url, function(xhr) {downloadFi...

javascript – 如何通过XMLHttpRequest()下载时避免缓存数据【代码】

我正在为Chrome浏览器编写扩展程序(后来希望移植到Firefox).扩展程序从我的服务器下载配置文件 – 通过XMLHttpRequest的xml文件.我发现它是一次下载文件,每次后续调用似乎只是使用文件的缓存原始版本.无论我是否更改服务器上的文件都无关紧要. 我读过你可以试试 xmlhttp.setRequestHeader(‘Pragma’,’Cache-Control：no-cache’); 所以我已经做到了这一点,但它似乎没有任何区别.我可以获得新文件的唯一方法似乎是删除浏览器缓存 ...

jQuery实现的指纹扫描效果实例(附演示与demo源码下载)【图】

本文实例讲述了jQuery实现的指纹扫描效果。分享给大家供大家参考，具体如下：运行效果截图如下：点击此处查看在线演示效果。具体代码如下： <!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>demo</title><style type="text/css">body {background:black;}.dialog {width:300px; height:300px; position:fixed; left:50%; margin-left:-150px; border:2px dashed green;top:50px;}.dialog .shape {background:black;...

JsEasy简介 JsEasy是什么?与下载【图】

JsEasy是辅助您进行Ajax开发的开源javascript+Css库. 它提供了一系列的扩展,让您的Ajax开发变得简洁,优雅,高效. 与其他一些类似库相比,JsEasy显得更为轻巧,高效,在这个讲究用户体验的年代,每减少一秒钟的等待就意味着多一分成功的可能. 同时JsEasy把Javascript和Css相结合,在提供Javascript脚本的同时,也提供了各式各样的Css Skin(皮肤),为你制作个性化的Web提供了充分可能.你所需要做的就是为每个用户生成一个他所喜好的Css文件,J...

javascript – d3.js下载图为svg图像【代码】

我一直在寻找从d3.js下载生成的svg的方法,我最终得到了phantom.js,这看起来有点矫枉过正(或者至少令人生畏,因为问题的“简单性”)或者svg-crowbar.js这显然只适用于chrome(我需要firefox). 我还发现了以下代码：//Encode the SVG var serializer = new XMLSerializer(); var xmlString = serializer.serializeToString(d3.select('svg').node()); var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString); //Use the downlo...

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)_jquery【图】

本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考，具体如下：运行效果截图如下：点击此处查看在线演示。完整实例代码点击此处本站下载。具体代码如下：jQuery实现点赞数字累加动画效果*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";} .tip{text-align:center;padding-top:10%;font-size:2em;}$("html,bod...

首页 / JAVASCRIPT / JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程