JS写怀旧小游戏系列（五）扫雷
来源：互联网 发布：revit2018 硬件优化 编辑：程序博客网 时间：2024/04/28 10:45
经典的window小游戏扫雷，支持IE9,chrome,firefox,safari,opera等现代浏览器！~IE8以下没测试~
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>JS扫雷</title><script type="text/javascript">var $ = function(id){return document.getElementById(id)};var minesweeper = {}; //雷区对象var mineArray = []; //地雷组var _differendNumber = null; //生成不同位置的随机地雷var overcomeMineLenth = {overcome:0, minelength:10}; function CreateBox(y,x,mine){ //构造雷格对象this.position = 1; //1在雷区里面，0不在this.y = y;this.x = x;this.mine = mine; //1有雷，0无this.on = 0; //0未扫，1已扫，2已标记this.t_l = {y:y-1, x:x-1}; //左上格子坐标this.t_c = {y:y-1, x:x}; //上this.t_r = {y:y-1, x:x+1}; //右上this.b_l = {y:y+1, x:x-1}; //左下this.b_c = {y:y+1, x:x}; //下this.b_r = {y:y+1, x:x+1}; //右下this.l = {y:y, x:x-1}; //左 this.r = {y:y, x:x+1}; //右} function getMineSweeper(){var oCount = parseInt($('oCount').innerHTML);var y, x, max, boxslist=[],has=[];switch(oCount){ //取得雷区长宽case 10: y = 9; x = 9;break;case 40: y = 16; x = 16;break;case 99: y = 16; x = 30;break;}max = y*x;$('oMain').style.width = 24*x+2+'px';for(var i=0; i<y; i++){ //生成格子 boxslist[i] = [];for(var j=0; j<x; j++){boxslist[i].push(new CreateBox(i,j,0));}}for(var k=0; k<oCount; k++){ //生成随机雷格数组序号 var new_num = Math.floor(Math.random()*max+1); getDifferentNumber(new_num,has,max); new_num = _differendNumber; has.push(new_num);}function setMine(arr){ for(var i=0; i<has.length; i++){ var mineX = arr[i] % x == 0 ? x : arr[i] % x; var mineY = Math.ceil(arr[i] / x); boxslist[mineY-1][mineX-1].mine = 1; } } mineArray = has; overcomeMineLenth.minelength = mineArray.length; setMine(has);function getDifferentNumber(n,has,max){ //生成不重复的随机数 var _has = has; var _max = max; var _n = n; var isin = 0; for(var i=0; i<_has.length; i++){ if(_n==has[i]){ isin = 1; } } if(isin==1){ //如果相同，递归执行 var _num = Math.floor(Math.random()*_max+1); arguments.callee(_num,_has,_max); }else{ _differendNumber = _n; }}minesweeper.len = max;minesweeper.x = x;minesweeper.y = y; minesweeper.boxslist = boxslist; //雷格数组}function mineSweeperToHTML(obj){ //布雷到页面HTML var x_len = obj.x; var y_len = obj.y; var arr = obj.boxslist; var str = ''; for(var i=0; i<arr.length; i++){ var _tr = '<tr>'; for(var j=0; j<arr[i].length; j++){ var id = 'box-' + i + '-' + j ; var _mineclass = 'hidden'; //arr[i][j].mine==0?'':'mine' _tr += '<td id="' + id + '" class="' + _mineclass + '"> </td>'; } _tr += '</tr>'; str += _tr ; } $('mineField').innerHTML = '<table>' + str + '</table>'; //添加事件 var boxs = $('mineField').getElementsByTagName('td'); var len = boxs.length; for(var k=0; k<len; k++){ boxs[k].onclick = function(){ mineBoxClick(this); } boxs[k].onmousedown = function(event){ addFlag(this,event); } }} function mineBoxClick(ele){ //格子点击 var ele_id = ele.getAttribute('id'); var ele_id_arr = ele_id.split('-'); var y = parseInt(ele_id_arr[1]); var x = parseInt(ele_id_arr[2]); var box = minesweeper.boxslist[y][x]; var eleclass = ele.getAttribute('class'); if(eleclass!='hidden'){return false;} //如果已经点击，返回false // var ele = $('box-'+y+'-'+x); box.on = 1; if(box.mine==0){ //不是雷 overcomeMineLenth.overcome += 1; var tl,tc,tr,bl,bc,br,l,r; //获取周围的格子对象 var out = {position:0, mine:0}; var maxY = minesweeper.y - 1; var maxX = minesweeper.x - 1; if(box.t_l.y < 0 || box.t_l.y > maxY || box.t_l.x < 0 || box.t_l.x > maxX){ tl = out ; }else{ tl = minesweeper.boxslist[box.t_l.y][box.t_l.x]; } if(box.t_c.y < 0 || box.t_c.y > maxY || box.t_c.x < 0 || box.t_c.x > maxX){ tc = out ; }else{ tc = minesweeper.boxslist[box.t_c.y][box.t_c.x]; } if(box.t_r.y < 0 || box.t_r.y > maxY || box.t_r.x < 0 || box.t_r.x > maxX){ tr = out ; }else{ tr = minesweeper.boxslist[box.t_r.y][box.t_r.x]; } if(box.b_l.y < 0 || box.b_l.y > maxY || box.b_l.x < 0 || box.b_l.x > maxX){ bl = out ; }else{ bl = minesweeper.boxslist[box.b_l.y][box.b_l.x]; } if(box.b_c.y < 0 || box.b_c.y > maxY || box.b_c.x < 0 || box.b_c.x > maxX){ bc = out ; }else{ bc = minesweeper.boxslist[box.b_c.y][box.b_c.x]; } if(box.b_r.y < 0 || box.b_r.y > maxY || box.b_r.x < 0 || box.b_r.x > maxX){ br = out ; }else{ br = minesweeper.boxslist[box.b_r.y][box.b_r.x]; } if(box.l.y < 0 || box.l.y > maxY || box.l.x < 0 || box.l.x > maxX){ l = out ; }else{ l = minesweeper.boxslist[box.l.y][box.l.x]; } if(box.r.y < 0 || box.r.y > maxY || box.r.x < 0 || box.r.x > maxX){ r = out ; }else{ r = minesweeper.boxslist[box.r.y][box.r.x]; } var round = tl.mine + tc.mine + tr.mine + bl.mine + bc.mine + br.mine + l.mine + r.mine; switch(round){ //周围格子元素样式设置 case 8:ele.setAttribute('class','on8');ele.innerHTML = 8 ; break; case 7:ele.setAttribute('class','on7');ele.innerHTML = 7 ; break; case 6:ele.setAttribute('class','on6');ele.innerHTML = 6 ; break; case 5:ele.setAttribute('class','on5');ele.innerHTML = 5 ; break; case 4:ele.setAttribute('class','on4');ele.innerHTML = 4 ; break; case 3:ele.setAttribute('class','on3');ele.innerHTML = 3 ; break; case 2:ele.setAttribute('class','on2');ele.innerHTML = 2 ; break; case 1:ele.setAttribute('class','on1');ele.innerHTML = 1 ; break; default: ele.setAttribute('class','on'); //如果有空格，继续搜索 if(tl.position!=0 && tl.on==0) {$('box-' + tl.y + '-' + tl.x).click()} if(tc.position!=0 && tc.on==0) {$('box-' + tc.y + '-' + tc.x).click()} if(tr.position!=0 && tr.on==0) {$('box-' + tr.y + '-' + tr.x).click()} if(bl.position!=0 && bl.on==0) {$('box-' + bl.y + '-' + bl.x).click()} if(bc.position!=0 && bc.on==0) {$('box-' + bc.y + '-' + bc.x).click()} if(br.position!=0 && br.on==0) {$('box-' + br.y + '-' + br.x).click()} if(l.position!=0 && l.on==0) {$('box-' + l.y + '-' + l.x).click()} if(r.position!=0 && r.on==0) {$('box-' + r.y + '-' + r.x).click()} } if(overcomeMineLenth.overcome+overcomeMineLenth.minelength == minesweeper.len){ alert('恭喜，你赢了！'); $('start').onclick(); } }else{ //是雷 for(var i=0; i<mineArray.length; i++){ var mineElement = $('mineField').getElementsByTagName('td'); mineElement[mineArray[i]-1].setAttribute('class','mine'); } ele.setAttribute('class','boom'); $('start').setAttribute('src','http://www.cssha.com/wp-content/uploads/2012/09/sad.gif'); //移除添加事件 var boxs2 = $('mineField').getElementsByTagName('td'); var len = boxs2.length; for(var k=0; k<len; k++){ boxs2[k].onclick = function(){ return false; //mineBoxClick(this); } boxs2[k].onmousedown = function(event){ return false; //addFlag(this,event); } } }} function addFlag(ele,event){ //标记红旗 var e = event || window.event; if(e.button=='2'){ var _c = ele.getAttribute('class'); if(_c=='hidden'){ ele.setAttribute('class','flag'); $('oCount').innerHTML = parseInt($('oCount').innerHTML) - 1; }else if(_c=='flag'){ ele.setAttribute('class','hidden'); $('oCount').innerHTML = parseInt($('oCount').innerHTML) + 1; }else{ return false; } }} function startGame(){ //开始游戏 getMineSweeper(); mineSweeperToHTML(minesweeper);overcomeMineLenth.overcome = 0;} function chooseDifficulty (){ //难度选择 var arr = document.getElementsByName('radio'); var len = arr.length; for(var i=0; i<len; i++){arr[i].onclick = function(){$('oCount').innerHTML = this.value;$('start').setAttribute('src','http://www.cssha.com/wp-content/uploads/2012/09/happy.gif');startGame();} }}function getDifficulty(){ //获取已选难度 var arr = document.getElementsByName('radio'); var len = arr.length; for(var i=0; i<len; i++){ if(arr[i].checked){ $('oCount').innerHTML = arr[i].value; } }}window.onload = function(){ chooseDifficulty () startGame(); $('start').onclick = function(){this.setAttribute('src','http://www.cssha.com/wp-content/uploads/2012/09/happy.gif');getDifficulty();startGame(); }$('oMain').style.display = 'block';$('loading').style.display = 'none'; document.oncontextmenu = function(){ return false;}}</script><style type="text/css">*{ padding: 0; margin: 0; } table { /*border-collapse: collapse; */border-spacing: 0; } fieldset,img { border: 0; } strong{ font-weight:bold;} body{background:url("http://www.cssha.com/wp-content/uploads/2012/05/bg1.png"); text-align:center; font-size:12px;} .solid-border-up{border:2px solid #fff; border-right:2px solid #848484; border-bottom:2px solid #848484;}.solid-border-down{border:2px solid #848484; border-right:2px solid #fff; border-bottom:2px solid #fff;}.main{width:200px; height:auto; background:#CECFCE; margin:20px auto; padding:4px;}.top { padding:5px;}.top table{width:100%;}.top table td{text-align: left;}.count { width: 26px; height: 20px; line-height:20px; background:#000; color:red; text-align:center;}#start { margin-top:2px; }.mine-field { margin:8px 0 0 0; font-weight:bold}.mine-field td {width:20px; height:21px; border:2px solid #fff; border-right:2px solid #848484; border-bottom:2px solid #848484; cursor:default; overflow:hidden;}.mine-field td.on {border:1px solid #B4B4B4; border-right:1px solid #B4B4B4; border-bottom:1px solid #B4B4B4;}.mine-field td.on1 {color:#00CD00;}.mine-field td.on2 {color:#00BFFF;}.mine-field td.on3 {color:#CD0000;}.mine-field td.on4 {color:#BF3EFF;}.mine-field td.on5 {color:#8B0000;}.mine-field td.on6 {color:#C71585;}.mine-field td.on7 {color:#CDCD00;}.mine-field td.on8 {color:#000000;}.mine-field td.flag {background:url("http://cssha.com/wp-content/uploads/2012/09/flag.gif") no-repeat center center;}.mine-field td.mine, .mine-field td.boom {background:url("http://cssha.com/wp-content/uploads/2012/09/mine.gif") no-repeat center center;}.mine-field td.boom {background-color:red;} #hananTOP h3{color:#000; border-bottom:1px solid #ccc; margin-bottom:10px; padding:10px; text-align:center;}#hananTOP h3 img{ }#hananBottom {border-top:1px solid #ccc; margin-top:10px; padding:10px;text-align:center;}</style></head><body><div id="hananTOP"><h3><a href="http://www.cssha.com/"><img src="http://www.cssha.com/wp-content/uploads/2012/04/logo1.gif" alt="前端手记"></a><p>JS版扫雷游戏</p></h3></div><div class="main solid-border-up" id="oMain" style="width: 213px; display:none"><div class="solid-border-down top"><table><tr><td style="width: 42px;"><div class="solid-border-down count" id="oCount">10</div></td><td><input title="点击开始游戏" type="image" src="/wp-content/uploads/2012/09/happy.gif" id="start" /></td><td style="text-align: right;"><label><input type="radio" name="radio" checked="checked" value="10" />初级</label><label><input type="radio" name="radio" value="40" />中级</label><label><input type="radio" name="radio" value="99"/>高级</label></td></tr></table></div><div class="mine-field solid-border-down" id="mineField"></div></div><img src="http://www.cssha.com/wp-content/uploads/2012/09/loading.gif" id="loading"><div id="hananBottom">by <a href="http://www.cssha.com/">阿安</a></div><span style="display:none"><script src="http://s95.cnzz.com/stat.php?id=3377831&web_id=3377831" language="JavaScript"></script></span></body></html>
- JS写怀旧小游戏系列（五）扫雷
- JS写怀旧小游戏系列（一）俄罗斯方块
- JS写怀旧小游戏系列（二）连连看
- JS写怀旧小游戏系列（三）五子棋
- JS写怀旧小游戏系列（四）贪吃蛇
- JS写怀旧小游戏系列（六）躲人游戏
- JS写怀旧小游戏系列（七）吃方块
- JS写怀旧小游戏系列（八）九宫格数独
- JS写怀旧小游戏系列（九）中国象棋
- JS写怀旧小游戏系列（十）打砖块
- js扫雷小游戏
- 1000行代码写小游戏（五）
- 扫雷小游戏
- 扫雷小游戏
- 扫雷小游戏
- 扫雷小游戏
- 扫雷小游戏
- 扫雷小游戏
- ELF文件格式详解
- ELF文件格式概要介绍
- C++中的static关键字
- 如何在WINCE中添加WebServer组件
- 【且听我说“镶嵌数据集建库”】概述篇：影像建库包括的内容有哪些
- JS写怀旧小游戏系列（五）扫雷
- ORA-16038错误解决
- dhcp
- 在固定位置显示二进制图片
- myeclipse下 配置 多个相同版本的tomcat实例
- cocosbuilder
- android常用的代码片段
- Linux内核 hlist_head/hlist_node结构解析
- 算法书籍推荐及网络资源 [转]
