网页版扫雷小游戏

扫雷小游戏（原生js）

实验介绍

1. 实验简介
   先上一张效果图
   
2. 源代码获取（非本文章中代码）

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

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

实现原理

扫雷游戏的规则:

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

除边界上的格子外，每个格子周围有 8 个格子：上、下、左、右、4 个斜角。所以数字范围是 0~8。
所以我们的算法如下:

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

目录结构：

实验步骤

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。仅保存，具体学习案例和代码开头已经给出。读者可以根据自己的需要选择。本文只作为学习笔记