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 +'" oncontextmenu="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,yfunction _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]);}}// 计算周边雷数提示，每个雷周边的表格都+1function _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;
    }