现在位置首页 / 项目实战 /正文

jquery版网页扫雷游戏源代码详细分析及Demo下载

作者: IT小兵 | 2014年5月16日| 热度:℃ | 评论: |参与:

在前几天分享了,jquery web版本的扫雷游戏。今天继续详细分析一下源代码和思路。

很多思路和解释都在代码中了。

Demo下载:

  http://pan.baidu.com/s/1zVfGU

【百度云盘,复制到 浏览器】


预览:扫雷(Jquery + html)

http://bbbzd.com/code/bomb/  



详细介绍之前,先说一下用到的全局变量:

var rows = 9; //存储行数

var cols = 9; //存储列数

var bombCount = 10;  //存储雷数

var WidthHeight = 20; //存储每个雷区高宽,默认 20px

var lblhelpCount = 1; //存储帮你排雷次数


/*初始时特定的值*/

var arrBomb; //雷,系统生成的 Id

var arrBlank;//空白的 Id

var arrNumber; //数字Id

var arrNumberContent; //数值单元格与值


/*操作过程中临时值*/

var arrDoBomb; //用户标记的雷 Id

var arrDomanage; //用户操作过得标记

var arrAllDivId; //生成的所有的id

var arrTemp; //空格遍历时,记录已经遍历的Id

var numResidue;//剩余雷数目

var beginTime;//计时开始时间

var isFinish;//是否结束

var focusDivId; //焦点Id

//以上变量都在 setDefaultValue()中初始化或赋实际的值。



  【1】 根据设置(行、列、雷数),校验成功后,生成雷坐标,例如:"1_1、2_3、4_5",存入定义好的全局数组变量 arrBomb(=new Array()) 中。


----代码片段1开始

   

 //获取随机雷位置坐标
function GetRandomBomb() {
    for (var i = 1; i <= bombCount; i++) {
        getRandom(); //多少个雷,参数都为 雷的设定数量。
    }
}
//获取随机数
function getRandom() {
    var randomId = parseInt(Math.random() * rows + 1).toString() + "_" + parseInt(Math.random() * cols + 1).toString();
    if ($.inArray(randomId, arrBomb) >= 0) { //如果随机的已经存在,就再获取一次
        getRandom();
    }
    else {
        arrBomb.push(randomId);
    }
}

----代码片段1结束




【2】 生成布局(div),并计算雷坐标周边的内容,并将得到的空格或数字存在全局数组变量。所有空格存入:arrBlank;数字存入:arrNumber;arrNumberContent;

 

    //按钮排雷开始
    $("#btnBegin").click(function () {
        if (setDefaultValue()) { //初始化值
            appendDiv(); //根据计算好的雷区,生成div ,并绑定鼠标和键盘事件
            setCss(); //设置样式,宽度 高度 等
        }
    });
//初始化值
function setDefaultValue() {
    var returnStr = true;
    arrBomb = new Array(); arrBlank = new Array(); arrNumber = new Array(); arrNumberContent = new Array();
    arrDoBomb = new Array(); arrDomanage = new Array(); arrAllDivId = new Array();
    arrTemp = new Array();
    focusDivId = "";
    beginTime = new Date(); isFinish = false;
    setTimeUsed();
    /**/
    var selectId = $("input[name='levels']:checked").attr("id");
    switch (selectId) {
     ...
    }
   ...
}
//根据计算好的雷区,生成div ,并绑定鼠标和键盘事件
function appendDiv() {
    GetRandomBomb(); //计算雷分布
    var strHtml = "", strHtml2 = "";  //strHtml2 对比分析用的
    for (var row = 1; row <= rows; row++) {
        strHtml += "<div  class=\"divRow\">";
        strHtml2 += "<div  class=\"divRow\">";
        for (var col = 1; col <= cols; col++) {
            var _id = row.toString() + "_" + col.toString();
            arrAllDivId.push(_id);
            if ($.inArray(_id, arrBomb) < 0) {
                //不是“雷”,是空格或显示数字
                var num = getTypeFromAround(_id); var text = ""; //空值
                if (num != 0) {
                    text = num.toString(); //数值
                }
                strHtml += "<div id=\"" + _id + "\" class=\"divCommon divCol \"></div>";
                strHtml2 += "<div id=\"" + _id + "_2\" class=\"divCommon divOpen\">" + text + "</div>";
            }
            else { //雷
                strHtml += "<div id=\"" + _id + "\" class=\"divCommon divCol\"></div>";
                strHtml2 += "<div id=\"" + _id + "_2\" class=\"divCommon divOpen divCol2\"><img src=\"bomb.png\" style=\"width:" + WidthHeight + "px;height:" + WidthHeight + "px\" ></div>";
            }
        }
        strHtml += "</div>";
        strHtml2 += "</div>";
    }
    $("#content").html(strHtml); //操作区域
    $("#content2").html(strHtml2); //结果区域,作弊
   
    ...//绑定鼠标和键盘事件
}
//设置样式,宽度 高度 等
function setCss() {
    var width = cols * (WidthHeight + 1); //cols * (31+1)
    var height = rows * (WidthHeight + 1);
    $("#contentField").css({ "width": (width + 50) + "px", "height": (height + 25) + "px" });
    // $("#progress").height(height);
    $("#content").css({ "width": width + "px", "height": height + "px" });
    $("#content2").css({ "width": width + "px", "height": height + "px" });
    ...
}

【3】 给div添加鼠标事件(左键事件、中键滚轮事件、右键事件)和键盘事件。

//根据计算好的雷区,生成div ,并绑定鼠标和键盘事件
function appendDiv() {
 	...
 	$("#content").html(strHtml); //操作区域
    $("#content2").html(strHtml2); //结果区域,作弊
    var iskeyCount = 0;
    /*键盘*/
    $(document).unbind("keydown");
    $(document).bind("keydown", function (e) {
        if (iskeyCount == 0) { //功能限制。 防止长按键盘的操作。不使用 keyUp 是因为按键弹起后再执行,感觉太慢有延迟感觉。 keypress 与 keydown 区别不大。
            if ($("#fieldset").is(":hidden") == false && isFinish == false) {
                keyDown(e.keyCode);
            }
            iskeyCount++;
        }
    });
    $(document).unbind("keyup");
    $(document).bind("keyup", function (e) {
        iskeyCount = 0;
    });
    //div大框上 鼠标点击
    $("#content .divCol").unbind("mousedown");
    $("#content .divCol").bind("mousedown", function (e) {
        //点击鼠标事件
        if (isFinish == false) {
            if (3 == e.which) { //右键
                divClickRight(focusDivId);
            }
            else if (1 == e.which) { //左键
                divClickLeft(focusDivId);
            }
            else if (2 == e.which) {
                divClickMiddle(focusDivId);
                return false;   //页面有滚动条时,取消点击鼠标滚轮时弹出的滚动方向圈(IE OK, FireFox不好用)
            }
            $("#" + focusDivId).focus();
        }
        else {
            $("custMessage").html("已经结束");
            clearMessage("custmessage");
        }
    });
    //div内各雷区,鼠标经过
    $.each($("#content .divCol"), function () {
        $(this).unbind("mouseover");
        $(this).bind("mouseover", function () {
            $("#" + focusDivId).removeClass("divColMouse");
            $(this).addClass("divColMouse"); //鼠标移到目标的上方
            focusDivId = this.id;
            $(this).focus();
        });
    });
    /*    38
      37  40  39
    */
}

下一篇将讲解,左键事件、 中键滚轮事件、右键事件等扫雷需要的鼠标和键盘事件的支持。敬请期待。

转发注明:IT分享  http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询