JS写怀旧小游戏系列（五）扫雷

最新推荐文章于 2021-01-20 10:28:06 发布
最新推荐文章于 2021-01-20 10:28:06 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： js 文章标签： 游戏 JavaScript 扫雷
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tigerdsh/article/details/8857399
版权

经典的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 + '">&nbsp;</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>
Tigerdush
关注
专栏目录
HTML扫雷实战
MilkiliciousDaddy的博客
10-10 1121
新买的电脑，配置贼高了，玩扫雷一点都不卡……(玩梗)扫雷，（Minesweeper，港台称为“踩地雷”）想必大多数人都玩过。它的实现也不困难。下面是利用Javascript扫雷的例子。 主文件 准备工作 创建场景 随机生成场景 右键标雷 左键开方块 自动打开周围的地雷 游戏实用工具 Check GameWin GameOver 主文件之后的事情 后记主文件主要的程序只在一个文件中，这里把它叫做 ga
js实现扫雷游戏
Zoey_dm的博客
10-24 252
使用js实现扫雷游戏的制作 使用原始的js实现扫雷游戏的制作 没有使用canvas 基本功能： 用户进入界面时启动计时功能 游戏难度设置 右键标记地雷，标记之后不能点击 显示剩余雷数（总的雷数减去插旗的数量） 自动连锁点开（当点开某个区块后，如果该区块的数字为 0，也就是九宫格内没有雷，那么将自动点开九宫格内的所有区块） 思路 地图的生成：采用二维数组的形式，用户点击开始界面 自动生成一个初...
扫雷游戏javascript版
Linyufa的专栏
05-01 981
最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏，在IE 9，Firefox 14，Chrome 9测试通过，。以下是源代码:   script type="text/javascript">  function StringBuffer(){    this._strings = new Array();  }  StringBuffer.protot
javaScript的扫雷代码
04-18
javaScript扫雷的代码， 由于兼容性问题，可以运行在Chrome和IE9之上，IE8以下暂时不能运行~~
用javascript实现win7系统扫雷游戏
刹那的博客
09-17 1717
闲来无事，想用javascrpt做些小游戏，感觉Win7系统中的扫雷游戏比较有意思，故花了一些时间通过b编写原生的javascript代码来实现网页版扫雷游戏。 首先，应该通过HTML+CSS写好网页的静态布局，如下所示： 扫雷 游戏(G)帮助(H) 游戏失败
用js制作游戏：扫雷，源代码
xh0112的博客
01-20 834
扫雷要求 游戏的区域： 9*9的区域 方格可以打开与标记 左键打开，显示数字，为周围格子的地雷数，右键标记 地雷 地雷随机分布 踩到地雷时，游戏结束 所有的地雷显示出来 连锁开大空方格 剩余地雷数与计时器 游戏胜利条件 所有的方格除了地雷都被打开了，则游戏胜利 一个方格所包含的信息： 坐标 x y 是否是一个地雷 周围的地雷数 = 9 二维数组中存储的是周围的地雷数 html格式代码 <body> <div class="level"> <bu
游戏开发-基于Python实现的怀旧游戏之扫雷游戏.zip
最新发布
04-02
游戏开发_基于Python实现的怀旧游戏之扫雷游戏
游戏开发-基于Python开发的怀旧小游戏之俄罗斯方块.zip
04-02
在本文中，我们将深入探讨如何使用Python编程语言开发一款经典的怀旧小游戏——俄罗斯方块。Python因其简洁易读的语法和丰富的库支持，成为初学者和专业开发者进行游戏开发的热门选择。通过学习这个项目，你可以了解...
童年怀旧小电视机网页版源码下载源码资源下载整理.zip
08-21
【标题】"童年怀旧小电视机网页版源码下载源码资源下载整理.zip" 提供的是一个关于创建具有怀旧风格的小电视机效果的网页版源码。这个源码资源可以帮助开发者或者网页设计师构建一个模拟传统电视机显示效果的网页，...
taxi-company-stage-one_game_shelter9gy_bluej写小游戏_company_
10-02
标题中的“taxi-company-stage-one_game_shelter9gy_bluej写小游戏_company_”似乎是一个项目或游戏的名称，其中包含了几个关键元素。首先，“taxi company”可能指的是游戏的主题，玩家可能需要管理或驾驶出租车。...
动物园看门人zookeeper消消乐flash小游戏经典益智游戏怀旧
01-12
动物园看门人zookeeper消消乐flash小游戏经典益智游戏怀旧
JS写怀旧小游戏系列（一）俄罗斯方块
∧︵∧全世界的屋顶 ∧︵∧
04-26 2334
这年头这么多用JS写怀旧小游戏的，我来做个总结，做个系列，今天第一天，俄罗斯方块！ body { background:#000; font:25px/25px 宋体;} #box { float:left;width:252px;border:#999 20px ridge;color:#9f9;text-shadow:2px 3px 1px #0f0; } #info { float:
常用JavaScript代码（持续更新）
∧︵∧全世界的屋顶 ∧︵∧
04-29 1587
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();   event.srcElement.releaseCapture();   事件按键 event.keyCode event.shiftKey event.altKey event.c
JS写怀旧小游戏系列（二）连连看
∧︵∧全世界的屋顶 ∧︵∧
04-26 1369
<!-- var RowMax = 42;//列数 var ColMax = 22;//行数 var PicMax = 26;//总图片数 var TimeMax = 60;//总时间 var OffSet = 32;//使用系统图标webdings（从asc2的32开始） var st;//倒计时 var TmpStr = ""; var TmpObj = null; var TmpTime
JS写怀旧小游戏系列（十）打砖块
∧︵∧全世界的屋顶 ∧︵∧
04-27 1360
玩法：              Javascript 写的“打砖块”游戏， S 键开始，左：4 ，右：6，保存为HTML即可 打砖块 <!-- var timerID = null var INT = 10 var loadFLG=0 var gameFLG=0 var missFLG=0 var
js正则限制input框输入的常用代码
∧︵∧全世界的屋顶 ∧︵∧
05-02 1236
1.只能输入数字和英文的：               onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"         ID="Text1" NAME="Text1">        2.只能输入数字的：               on
JavaScript DOM的本质及操作方法
∧︵∧全世界的屋顶 ∧︵∧
05-02 1159
虽然现在一些JavaScript框架，诸如jQuery、Prototype和MooTools能提高我们的前端开发效率，而且很好的解决了浏览器兼容性问题，但我们仍要打好javascript技术基础。文章将介绍JavaScript和文档对象模型(DOM)的本质。   JavsScript是可以在各种不同环境下使用的动态的、松散类型(loosely typed)、基于原型的编程语言。除了作为流行的W
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值