网页版扫雷小游戏

扫雷小游戏（原生js）

实验介绍

1. 实验简介
   先上一张效果图
   

   
   
   
   

2. 源代码获取（非本文章中代码）

$ git clone https://github.com/shiyanlou/js-minesweeper 

3. 学习网页
   实验楼-网页版扫雷
   
   

实现原理

扫雷游戏的规则:

游戏面板上有一些格子，每个格子中有一个数字（空白表示数字为 0）或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的就是把数字格子找出来，时间花的越少越好。

根据用户选择的难易程度（有初、中、高三个级别，级别越高地雷和格子数量越多），随机产生一定个数的地雷并随机放在格子中。然后遍历格子，计算每个格子中的数字，标记在格子上。玩家左键点击格子时显示格子内容（如果遇到地雷则挑战失败，游戏结束），右键点击格子时标记格子为地雷，真到正确标记所有地雷并打开所有非地雷格子，挑战成功，游戏结束。

实验步骤

1. 页面布局

 
  
 
    
   
 
    

      剩余雷数: 
      0 个 
    
 
    

      持续时间: 
      0 秒 
    
 
    
 
     
 
      
难度选择：
 
        初级(10*10) 
   中级(15*15) 
   高级(20*20) 
 
 
 
 





 
     
 
    
 
    开始新游戏 
    
 
     
提示：
 
     
 
      
点击“开始新游戏”开始计时
 
      
游戏过程中点击“开始新游戏”则重新开始
 
     
 
    
 
   
 
  
 

2. css布局

*{ padding:0px; margin: 0px; } #box{ width: auto; height: auto; float: left; border: 1px solid indianred; margin: 100px auto; } #game{ float: left; background:#CCC; } #game td{ width: 32px; height:32px; border:2px outset #EEE; text-align:center; cursor:pointer; font-size: 25px; line-height: 32px; } #game td:hover{ background-color:#AAA; } /* 为雷区 */ .landMine{ background-image:url('http://labfile.oss.aliyuncs.com/courses/144/mine.png'); background-position:center; background-repeat:no-repeat; } /* 鼠标右键点击标志 */ .flag{ background-image:url('http://labfile.oss.aliyuncs.com/courses/144/flag.png'); background-position:center; background-repeat:no-repeat; } /* 不是雷区，普通区 */ #game td.normal{ border:2px solid #EEE; background-color:#AAA; } #control{ display: inline; float: left; margin-left: 30px; width: 200px; height: auto; text-align: center; } #restMine{ margin-top: 10%; font-size: 16px; } #control form{ margin-top:10%; } #control fieldset{ height: 100px; } #control form legend{ text-align:left; margin-left: 10px; } #control label{ font-size: 14px; padding: 10px; } #useTime{ margin-top: 10%; font-size:16px; } #startGame { margin-top: 20px; padding: 0.5em; width: 100px; } #info{ text-align: left; margin-top: 20px; } #info ul{ text-indent: 10px; font-size: 13px; } 

3. 创建表格

function $(id) { return typeof id==="string"?document.getElementById(id):null; } //作为全局的函数 

传入行数，列数来创建表格

//创建表格函数 function createTable(rowCount,colCount){ var table=$('game'); empty(table); //每次创建都要先清空表格 for(var i=0;i 
  

4. 扫雷.js

//初始化表格并监听难度点击事件 var jms=new JMS('game'); function initTable() { var hardList=document.getElementsByName("difficultLevel"); var tdCountArr=[10,15,20];//难度的数组 var flag=true; //监听难度点击事件 for(var i=0;i 
  

5. jms.js代码

(function(){ function $(id) { return typeof id==="string"?document.getElementById(id):null; } var JMS=function (id,rowCount,colCount) { if(!(this instanceof JMS)) { return new JMS(); } this.startTime=null;//开始时间 this.endTime=null;//结束时间 this.rowCount=rowCount||10;//行数，默认为10 this.colCount=colCount||10;//列数 this.table=$(id);//表格区 this.tdArr=this.table.getElementsByTagName('td');//一个个的小块 this.status=false;//游戏的状态，true为开始，false为结束 this.arr=[];//td对应的数值数组 this.remarkedMine=0;//标记的雷数 this.mineCount=10;//雷数 this.currentStepCount=0;//步数，包括自动打开的空白区域和点击的非0区域 this.markCallback=null;//标记的回调函数，用于实时更新雷数 this.endCallback=null;//结束的回调函数 this.doc=document;//当前文档的引用 this.doc.oncontextmenu=function () { //右键禁止默认行为 return false; } } JMS.prototype={ //初始化数组，全部为0 initGame:function () { //td对应的数值数组，全为0 for(var i=0;i 
  
    0 && j > 0) { if (this.arr[i - 1][j - 1] == 9) { this.arr[i][j]++; } } if (i > 0) { if (this.arr[i - 1][j] == 9) { this.arr[i][j]++; } } if (i > 0 && j < this.colCount - 1) { if (this.arr[i - 1][j + 1] == 9) this.arr[i][j]++; } if (j > 0) { if (this.arr[i][j - 1] == 9) { this.arr[i][j]++; } } if (j < this.rowCount - 1) { if (this.arr[i][j + 1] == 9) { this.arr[i][j]++; } } if (i < this.rowCount - 1 && j > 0) { if (this.arr[i + 1][j - 1] == 9) this.arr[i][j]++; } if (i < this.rowCount - 1) { if (this.arr[i + 1][j] == 9) this.arr[i][j]++; } if (i < this.rowCount - 1 && j < this.colCount - 1) { if (this.arr[i + 1][j + 1] == 9) this.arr[i][j]++; } } } }, //绑定事件 bindCells:function(){ //保留全局的this，到绑定事件时this会更改 var self=this; for(var i=0;i 
   
     显示所有->清除绑定->显示结束（js单线程，有一定的时间延迟，设置一个定时器) fail:function () { this.end(); this.showAll(); this.clearBind(); setTimeout(function (){alert("GAME OVER")},100); }, //开始游戏接口 ,初始化游戏->生成雷区数组->计算非雷数 play:function () { this.initGame(); this.landMine(); this.calculateNoLandMineCount(); }, //游戏开始 ，步数、标记雷数为0-> begin:function () { this.currentStepCount=0; this.remarkedMine=0; this.clearIfo(); this.bindCells(); }, //游戏结束，结束时间->状态更改->结束回调函数 end:function () { this.endTime=new Date(); this.status=false; if(this.endCallback){ this.endCallback(); } } } window.JMS=JMS; //对象全局化 })(); 
    
  

总结

主要使用 JavaScript 实现了网页版的经典小游戏扫雷，代码有一些冗余，根据网上提供的思路自己写的，代码有一些小BUG，是单选点击BUG。仅保存，具体学习案例和代码开头已经给出。读者可以根据自己的需要选择。本文只作为学习笔记