JS_小游戏_扫雷

自己写的扫雷，图片都是直接载ＸＰ系统里的。。。-_-!!

 

HTML:

 

<div> <input type="radio" name="level" value="1" checked="checked"/> 初级 <input type="radio" name="level" value="2" /> 中级 <input type="radio" name="level" value="3" /> 高级  <input type="button" value="开始" id="j_start" /> </div> <br /> <div id="j_mine_wrap"></div>

 

 

 

CSS

 

/*S= CSS Reset*/ body,div,dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6,pre,code, form,fieldset,legend,input,button, textarea,p,blockquote,th,td { margin:0; padding:0;} fieldset ,img { border:0;} h1,h2,h3,h4,h5,h6 { font-size:100%; font-variant:normal;} input , button , textarea , select { font-size:100%;} ul,ul { list-style:none;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:collapse; border-spacing:0;} caption, th { text-align: left; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { text-decoration: none; color: #000; } a:hover { text-decoration: underline; } /*E= CSS Reset*/ #mine{ border-top:1px solid #808080; border-left:1px solid #808080; border-bottom:1px solie #fff; border-right:1px solid #fff; } #mine td, #mine td.n1, #mine td.n2, #mine td.n3, #mine td.n4, #mine td.n5, #mine td.n6, #mine td.n7, #mine td.n8, #mine td.open, #mine td.que, #mine td.tag, #mine td.mine1, #mine td.mine2, #mine td.error{ background: #ccc url(mine.png) no-repeat 0 0; } #mine td{ width: 16px; height: 16px; background-position: -16px -48px; } #mine td.n2{ background-position: -16px 0px; } #mine td.n3{ background-position: -32px 0px; } #mine td.n4{ background-position: -48px 0px; } #mine td.n5{ background-position: 0px -16px; } #mine td.n6{ background-position: -16px -16px; } #mine td.n7{ background-position: -32px -16px; } #mine td.n8{ background-position: -48px -16px; } #mine td.que{ background-position: 0px -32px; } #mine td.tag{ background-position: -16px -32px; } #mine td.mine1{ background-position: -32px -32px; } #mine td.mine2{ background-position: -48px -32px; } #mine td.error{ background-position: 0px -48px; } #mine td.open{ background-position: -32px -48px; }

 

JS

 

function $(elem) { return document.getElementById(elem) || elem; } var mine = (function(){ var list_tagMine = []; // 已经标记为tag的雷 var list_randomMine; // 随机产生雷在一维数组上 var isLocked = 0; // 点到雷，则锁定 var matrixTable = []; // 表格对应的矩阵表 var matrixTable_rows; var matrixTable_column; var mineState = {yes: -1, no: 0}; // 有没有雷 var num_mine; // 地雷数量 var num_Checked = 0; // 点开的非雷数量 var total_Checked = 0; // 非雷数量 var TDTAG = { // 对应td元素的class名称 TAG: 'tag', ERROR: 'error', CHECKED: 'checked', QUE: 'que', OPEN: 'open', MINE1: 'mine1', MINE2: 'mine2' } var table_id = "mine"; var wrap; // 表格的外层容器 function config(w) { wrap = w; } // 创建表格界面 function _createTable(rows, column) { if (typeof wrap == 'undefined') return; var table = []; table.push('<table id="'+ table_id +'" οncοntextmenu="return false">'); for (var i=0; i<rows; i++) { table.push('<tr>'); for (var j=0; j<column; j++) { table.push('<td id="' + i + '_' + j + '" title="" class=""></td>'); } } table.push('</table>'); wrap.innerHTML = table.join(''); } // 生成矩阵，默认无雷 function _createMatrix(rows, column) { for (var i=0; i<rows; i++) { matrixTable[i] = []; for (var j=0; j<column; j++) { matrixTable[i][j] = mineState.no; } } matrixTable_rows = matrixTable.length; matrixTable_column = matrixTable[0].length; } // function init(rows, column, n) { var x = rows || matrixTable_rows; var y = column || matrixTable_column; var z = n || num_mine; isLocked = 0; list_randomMine = []; list_tagMine = []; matrixTable = []; num_Checked = 0; num_mine = z; total_Checked = 0; wrap.innerHTML = ''; _createTable(x, y); _createMatrix(x, y); _createMine(z); _setMatrixMine(); _checkWin(); _tdEvent(); } // 从一维数组中随机挑出雷 function _createRandom(from, count) { var arr = []; var list = []; for (var i=0; i<from; i++) { arr.push(i+1); } for (var j=0; j<count; j++) { var len = arr.length; var n = parseInt(Math.random() * len); list.push(arr.splice(n, 1)[0]); // splice后是个数组，把值传进去 } return list; } function _createMine(n) { list_randomMine = _createRandom(matrixTable_rows * matrixTable_column, n); } // 根据表格td的n值得到对应矩阵x,y function _getMatrixElem(n) { var x, y; x = Math.floor(n / matrixTable_column); // 模为零，则x=x-1; 同时y=matrixTable_column-1; y = (n % matrixTable_column) == 0 ? [matrixTable_column, --x][0]-1: (n % matrixTable_column) -1; return {x: x, y:y}; } // 根据地雷数组填充到矩阵中 function _setMatrixMine() { var len = list_randomMine.length; for (var i=0; i<len; i++) { var tmp = _getMatrixElem(list_randomMine[i]); matrixTable[tmp.x][tmp.y] = mineState.yes; _calTipCount(tmp.x, tmp.y); } } // 得到一个元素周边的坐标，返回集合数组 function _getMineRound(x, y) { var arr = []; var x = parseInt(x); var y = parseInt(y); for (var i=x-1; i<=x+1; i++) { if (i<0 || i>=matrixTable_rows) continue; for (var j=y-1; j<=y+1; j++) { if (j<0 || j>=matrixTable_column) continue; if (i==x && j==y) continue; arr.push([i, j]); } } return arr; } // 循环处理函数 function _map(arr, func) { var len = arr.length; for (var i=0; i<len; i++) { func(arr[i]); } } // 计算周边雷数提示，每个雷周边的表格都+1 function _calTipCount(x, y) { _map(_getMineRound(x, y), function(arr) { if (matrixTable[arr[0]][arr[1]] !== mineState.yes) { matrixTable[arr[0]][arr[1]]++; } }) } // 表格注册事件，左键、右键和左键双击 function _tdEvent() { var td = $(table_id).getElementsByTagName("td"); // 单击(左键、右键事件) for (var i=0; i<td.length; i++) { (function(k){ td[k].onmousedown = function(e){ if (isLocked) return ; var e = e || event || window.event; var which = e.which || e.button; var aId = this.id.split("_"); var x = aId[0]; var y = aId[1]; if (which == 1) { // 如果是标记雷，左键无反应 if (this.className == TDTAG.TAG || this.className == TDTAG.ERROR) { return false; } // _check(x, y); } else if (which == 2 || which == 3) { if (this.title == TDTAG.CHECKED) return; if (this.className == TDTAG.TAG) { this.className = TDTAG.QUE; } else if (this.className == '') { this.className = TDTAG.TAG; list_tagMine.push(this.id); } else { this.className = ''; } } } })(i) } // 双击事件 for (var i=0; i<td.length; i++) { (function(k){ td[k].ondblclick = function(){ var arr_id = this.id.split("_"); _research(arr_id[0]-0, arr_id[1]-0); } })(i) } } // 如果某区域已标完周边地雷，则双击时打开其余周边区域 function _research(x, y) { var v = matrixTable[x][y]; var count = 0; // 是雷或为空就退出 if (v <= mineState.no) { return; } var a = _getMineRound(x, y); for (var i=0; i<a.length; i++) { var p = a[i]; if ( $(p[0] + '_' + p[1]).className == TDTAG.TAG ) { count++; } } if (v !== count) return; _map(_getMineRound(x, y), function(arr){ _check(arr[0], arr[1], 1); }) } // 显示所有地雷 function _showMine() { var td = $(table_id).getElementsByTagName("td"); var len = list_randomMine.length; var l = list_tagMine.length; for (var i=0; i<len; i++) { // 已经标记为雷，则不变化 if (td[list_randomMine[i]-1].className !== TDTAG.TAG) { td[list_randomMine[i]-1].className = TDTAG.MINE2; } } // 检查玩家标记的雷 for (var i=0; i<l; i++) { var p = list_tagMine[i].split("_"); var v = matrixTable[parseInt(p[0])][parseInt(p[1])]; if (v !== -1) { $(parseInt(p[0]) + '_' + parseInt(p[1])).className = TDTAG.ERROR; } } } // 检查点击或搜索的区域 function _check(x, y, closeMine, d) { if (isLocked) return; var v = parseInt(matrixTable[x][y]); var sClass; var td = $(table_id).getElementsByTagName("td"); var closeMine = closeMine || 0; var d = d || 0; // 已经操作过则返回 if ($(x+ '_' +y).title == TDTAG.CHECKED || $(x+ '_' +y).className == TDTAG.TAG) return; if (v == mineState.yes) { sClass = 'mine1'; } else if (v == 0) { sClass = 'open'; } else if (v > 0) { sClass = 'n' + v; } if (!d) { if (v == mineState.yes) { // 是雷且已标记过 if ($(x+'_'+y).className == TDTAG.TAG) { return; } else { // 点中雷，结束游戏 _showMine(); $(x+'_'+y).className = sClass; isLocked = 1; alert('踩雷了，都是浮云啊.再来一局吧'); } } } if ( closeMine && (v == -1) ) { $(x+'_'+y).className = ''; } else { $(x+'_'+y).className = sClass; } if (v !== -1) { $(x+'_'+y).title = TDTAG.CHECKED; num_Checked++; } // 完成 if (num_Checked == total_Checked) { isLocked = 1; //　扫出所有空区域，则把最后未标记的雷自动标记出来 for(var i=0; i<td.length; i++) { if (td[i].className == "") { td[i].className = TDTAG.TAG; } } alert('英雄！扫雷英雄啊!'); return; } // 空区域，则搜索周边直到区域显示有雷数 if (v == 0) { setTimeout(function(){ _map(_getMineRound(x, y), function(arr){ if ( $(arr[0] + '_' + arr[1]).title !== TDTAG.CHECKED ) _check(arr[0], arr[1], 1, 1); }) }, 100) } } // 计算成功的条件值 function _checkWin() { var n = list_randomMine.length; var allCountOfMind = matrixTable.length * matrixTable[0].length; total_Checked = allCountOfMind - n; } return { cfg: config, init: init, s: _showMine } })() function main() { mine.cfg($('j_mine_wrap')); mine.init(9, 9, 10); } main(); var level = [ [9,9,10], [16,16,40], [16,30,99] ] $('j_start').onclick = function(){ var obj = document.getElementsByName('level'); var len = obj.length; var l; for(var i=0; i<len; i++) { if (obj[i].checked) { l = obj[i].value; } } var v = level[l-1]; mine.init(v[0], v[1], v[2]); }  

 

 

 

 

 

* 2011/01/25 bug修复:

　　描述：有时点击到空区域时会把隔着数字标记区的另一边空白区扫出来，特别情况下会出现一击扫出所有雷的情况。狂汗！！

　　检查：通过FireBug的单步调试，定位到_getMineRound函数，第一次点击时会返回超过8个元素，肯定是不对的。再追查发现在_check函数中　x+'_'+y时把x,y转换成了string,再传入_getMineRound中时引发错误。

　　解决：新的_getMineRound函数

function _getMineRound(x, y) {
        var arr = [];
        var x = parseInt(x);
        var y = parseInt(y);
       
        for (var i=x-1; i<=x+1; i++) {
            if (i<0 || i>=matrixTable_rows) continue;

            for (var j=y-1; j<=y+1; j++) {
                if (j<0 || j>=matrixTable_column) continue;
                if (i==x && j==y) continue;

                arr.push([i, j]);
            }
        }
       
        return arr;
    }