`
楚天阔
  • 浏览: 43779 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

初学JS,写了个扫雷,聊以纪念

阅读更多



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Untitled Document</title>
		<script type="text/javascript"> 
var bgObj; 
 
function showWin(strInfo){
 
  var sWidth,sHeight; 
  sWidth=screen.width; 
  sHeight=screen.height; 
 
  bgObj=document.createElement("div"); 
bgObj.setAttribute( "id", "bgDiv"); 
bgObj.style.position="absolute"; 
bgObj.style.top="0"; 
bgObj.style.background="#cccccc"; 
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; 
bgObj.style.opacity="0.6"; 
bgObj.style.left="0"; 
bgObj.style.width=screen.width+"px"; 
bgObj.style.height=screen.height+"px"; 
document.body.appendChild(bgObj);
 
//main.style.display='block';
main.style.visibility = "visible";
main.style.zIndex = "50"; 
main.style.width="100%";
document.getElementById("warnInfo").innerHTML="<h2>"+strInfo+"</h2>";
 
}
 
function  closeWin(){
  init();
  document.body.removeChild(bgObj);
  main.style.visibility = "hidden";
  
 
}
</script>

		
		<style type="text/css">
			/*初始状态*/
			.f0{background-color:#425ccd}
			/*鼠标悬停状态*/
			.f1{background-color:#609aff}
			/*扫雷状态*/
			.f2{background-color:#cbd8ea}
			/*地雷状态*/
			.f3{background-color:#cbd8ea;background-image:url("mine2.png")}
			/*扫出的地雷*/
			.f4{background-color:#cbd8ea;background-image:url("mine.png")}
			td {width:18px;}
			tr {height:18px;} 
			font{font-weight:bolder;}
			.n1{color:#4050be}
			.n2{color:#1e6902}
			.n3{color:#b05964}
			.n4{color:#010184}
			.n5{color:#8c2d34}
			.n6{color:#ff0080}
			.n7{color:#ff8000}
			.n8{color:#00ffff}	
			#main{position:absolute;z-index:50; visibility:hidden}
		</style>
		 
		<script type='text/javascript'>
			//配置信息 宽度 高度 地雷数量(默认为 9 9 10)
			var setting = {width:9,height:9,mine:10};
			var minePostionArray = [];
			var mineWarnArray=[];   //警告信息数组,记忆生成
			var notMineNum;   //非雷区的数量
			var realnotMineNum;
			function $(id){
				return document.getElementById(id);
			}
			
			Array.prototype.has= function(num){
				//可以优化查询算法
				var flag =false;
				for(var i=0;i<minePostionArray.length;i++){
					if(num==minePostionArray[i]){
						flag = true;
						break;
					}
				}
				return flag;
			}
			
			function init(){
				setting = {width:9,height:9,mine:10};
			 	minePostionArray = [];
			 	mineWarnArray=[];
				initSetting();
				initMainArea(setting.width,setting.height,setting.mine);
				initMine(setting.width,setting.height,setting.mine);
			}
			
			
		//初始化配置
		function initSetting(){
			//获得选中的难度
				var level = document.FrmSetting.level;
				var checkLevel = 0;
				for(var i =0 ; i<4 ; i++){
					if(level[i].checked==true){
						checkLevel = i;
						break;
					}
				}
				//根据难度配置setting
				switch(checkLevel){
					case 0:setting = {width:9,height:9,mine:10};break;
					case 1:setting = {width:16,height:16,mine:40}; break;
					case 2:setting = {width:16,height:30,mine:99}; break;
					case 3:setting = {width:$('width').value,height:$('height').value,mine:$('mine').value};break;
				}
				
				notMineNum=0;
				realnotMineNum = setting.width*setting.height-setting.mine;
		}
		
		//初始化扫雷游戏主区域界面
		function initMainArea(width,height,mine){
			
			var innerHtml = ["<table cellpadding='0' cellspacing='0' border='1' bordercolor='black'>"];
			for(var i=0;i<height;i++){
				innerHtml.push("<tr>");
				for(var j=0;j<width;j++){
					var id= i*width+j;
					innerHtml.push("<td class='f0' id='"+id+"' onmouseover='mouseover(this);' onmouseout='mouseout(this);' onclick='mouseclick(this);'>&nbsp;</td>");
				}
				innerHtml.push("</tr>");
			}
			innerHtml.push("</table>");
			var obj = document.getElementById("MainArea");

			obj.innerHTML = innerHtml.join("");
			
		}
		
		//初始化地雷
		function initMine(width,height,mine){	
			var basicArray = [];
			var allBlank = width*height;
			for(var m=0;m<allBlank;m++){
				basicArray[m]=m;
				mineWarnArray[m]=-1;
			}
			for(var n=0;n<mine;n++){
				var randomNum = Math.floor(Math.random()*(basicArray.length));
				minePostionArray.push(basicArray[randomNum]);
				basicArray.splice(randomNum,1);
			}
			minePostionArray.sort(function(a,b){return a-b});	
			//alert(minePostionArray);
		}
		
		
		function mouseover(obj){
			if(obj.className=="f0"){
				obj.className="f1";
			}
			
		}
		function mouseout(obj){
			if(obj.className=="f1"){
				obj.className="f0";
			}
			
		}
		function mouseclick(obj){
			if(obj.className=="f1"){
				var index = obj.id;
				if(minePostionArray.has(index)){
					//该位置有地雷
					for(var i = 0 ;i<minePostionArray.length;i++){
						$(minePostionArray[i]).className="f4";
					}
					obj.className="f3";
					showWin("技术还不到家哈。。。");
				}else{
					//该位置无雷
					obj.className="f2";
					showNum(index);
				}
				
			}
		}
		
		function showNum(index){
			notMineNum++;
			mineWarnArray[index]=-2;
			var x = index%setting.width;
			var y = Math.floor(index/setting.width);
			//alert(index+" "+x+" "+y);
			var count = 0 ;
			point1:for(var i = x-1 ; i<=x+1 ; i++){
				for(var j= y-1 ; j<=y+1 ;j++){
					if(i<0){
						continue point1;
					}
					if(i>setting.width-1){
						break point1;
					}
					if(0 <= j && j <= setting.height-1){
						var postion = j*setting.width+i;
						//alert(postion+" "+i+" "+j);
						if (mineWarnArray[postion] == -1) {
							if (minePostionArray.has(postion)) {
								count++;
							}else{
								mineWarnArray[postion] =-2;
							}
						}
					}
				}
			}
			$(index).innerHTML = (count==0)?"&nbsp;":"<font class='n"+count+"'>"+count+"</font>";
			$(index).className="f2";
			mineWarnArray[index] = count;			
			if(notMineNum==realnotMineNum){
				for(var i = 0 ;i<minePostionArray.length;i++){
						$(minePostionArray[i]).className="f4";
					}
				showWin("恭喜您过关了。。。。");
			}
            if(count == 0){

				point2:for (var i = x - 1; i <= x + 1; i++) {

                    for (var j = y - 1; j <= y + 1; j++) {
						if(i<0){
							continue point2;
						}
						if(i>setting.width-1){
							break point2;
						}

                        if (0 <= j && j <= setting.height-1) {

                            var num =j*setting.width+i; 
							//alert(num);
							if(mineWarnArray[num]<0){
								showNum(num);
							}
                        }

                    }

                }
				/*
index = index-0;
				if(x>0){
					if(mineWarnArray[index-1]<0){
						showNum(index-1);
					}
				}
				if(x<setting.width-1){
					if(mineWarnArray[index+1]<0){
						showNum(index+1);
					}
				}
				if(y>0){
					if(mineWarnArray[index-setting.width]<0){
						showNum(index-setting.width);
					}
				}
				if(y<setting.height-1){
					if(mineWarnArray[index+setting.width]<0){
						showNum(index+setting.width);
					}
				}
				if (x > 0 && y > 0) {
					if (mineWarnArray[index - setting.width - 1] < 0) {
						countRound(index - setting.width - 1);
					}
				}
				if(x > 0 && y<setting.height-1){
					if(mineWarnArray[index-setting.width+1]<0){
						countRound(index-setting.width+1);
					}
				}
				if(x<setting.width-1 && y>0 )	{
					if(mineWarnArray[index+setting.width-1]<0){
						countRound(index+setting.width-1);
					}
				}
				if(x<setting.width-1 && y<setting.height-1){
					if(mineWarnArray[index+setting.width+1]<0){
						countRound(index+setting.width+1);
					}
				}
*/
            }
		}
		
		</script>
	</head>
	<body bgcolor="#c8c8c8">
		
		
		
		<form name="FrmSetting">
			<font size="4">难度</font>
		    <div>
				<input type="radio" name="level" value="0" checked="checked"><b>初级</b>(10个雷,9*9平铺网格)<br/>
				<input type="radio" name="level" value="1"><b>中级</b>(40个雷,16*16平铺网格)<br/>
				<input type="radio" name="level" value="2"><b>高级</b>(99个雷,16*30平铺网格)<br/>
				<input type="radio" name="level" value="3"><b>自定义</b> 高度(9-24)(H)<input type="text" id="height" value="9" size="2">&nbsp;&nbsp;宽度(9-30)(W)<input type="text" id="width" value="9" size="2">&nbsp;&nbsp;雷数(10-668)(M)<input type="text" id="mine" value="10" size="3">
			</div>
			<input type="button" value="开始游戏" onclick="init();">
		</form>
		 <div id="main" align="center">
		   <span id="warnInfo"></span>
           <input type="button" value="再玩一盘" onclick="closeWin();"/>
        </div>
		<div align="center" id="MainArea"></div>
	</body>
</html>
<!--
逻辑层 -- 有雷 无雷
表示层--  初始状态(0) 点击状态 (1) 扫雷状态(2) 引爆状态(3)
雷的全部数量
-->

  • 大小: 61.6 KB
分享到:
评论
6 楼 楚天阔 2010-03-17  
javaxiang 写道
做的还可以,稍微改一下可能会更好,有个标记雷的操作,第一次点击不要出现雷德情况


非常感激您的意见。
5 楼 楚天阔 2010-03-17  
mikehuhu 写道
怎么没有发现可以标记有雷的操作??

嗯。那个鼠标右击还没做。
多谢提醒~
4 楼 chenchendf 2010-03-17  
很不错啊!!!
3 楼 freish 2010-03-17  
一直没搞清楚扫雷怎么玩。。。
2 楼 javaxiang 2010-03-17  
做的还可以,稍微改一下可能会更好,有个标记雷的操作,第一次点击不要出现雷德情况
1 楼 mikehuhu 2010-03-17  
怎么没有发现可以标记有雷的操作??

相关推荐

    用c#做的扫雷游戏,适合初学者学习

    初学c#时自己做的扫雷,非常简单的设计,适合初学者学习

    JAVA初学者_扫雷源码

    【JAVA初学者_扫雷源码】是一个适合初级JAVA学习者参考的项目,它展示了如何用JAVA编程语言实现经典游戏“扫雷”。这个项目对于理解JAVA基础语法、控制流程、面向对象编程等概念非常有帮助。 1. **JAVA基础语法**:...

    JS扫雷游戏源码

    JS扫雷游戏是一款经典的逻辑型小游戏,通过JavaScript语言实现,为编程初学者提供了一个良好的实践平台。本项目旨在帮助开发者深入理解和运用JavaScript基础,同时提升逻辑思维能力。下面我们将从核心代码、功能实现...

    jquery+纯生javascript写的适合初学者

    标题中的“jquery+纯生javascript写的适合初学者”暗示了这个压缩包可能包含了一系列使用JavaScript和jQuery库编写的示例代码或教程,旨在帮助初学者理解这两种技术的基础和交互方式。JavaScript是一种广泛用于Web...

    android写的扫雷,适合初学者

    带图片的Toast,下面的“你赢了”这个Toast使用了自定义的布局,可以显示图片和文字。 3. 自定义Button控件,可以看到标记是否为雷,显示附近地雷数量的按钮控件,初学者可以很容易的学习到Android开发中常用的...

    学习c#,模仿做的一个 扫雷小游戏

    "学习c#,模仿做的一个 扫雷小游戏" 这个标题表明了这个项目是一个基于C#编程语言开发的扫雷游戏,是作者为了学习C#而进行的一个实践项目。扫雷游戏是一款经典的逻辑推理游戏,通过在网格中标记雷区来完成挑战,通常...

    JAVA版扫雷的实现,适合初学者参考。

    一个用java写的扫雷程序,采用GUI实现界面,代码700行,注释全面,适合初学者学习。

    扫雷小游戏 适合初学者 主要练习递归

    总结,通过分析和实践这个C++实现的扫雷小游戏,初学者不仅可以掌握递归这一重要编程技巧,还能提升对C++语言的理解,以及增强游戏开发和调试的能力。同时,对于已有的扫雷游戏代码,可以进行扩展和优化,比如增加...

    java扫雷代码详解

    本篇文章将对Java扫雷程序的代码进行详细解读,通过代码注释的形式,帮助初学者深入理解扫雷游戏的工作原理和实现细节。 ### Java扫雷程序的设计 在Java中创建扫雷游戏的第一步是继承JFrame类,这一步是为了扩展...

    java实现的扫雷游戏,初学java的试制品.zip

    java实现的扫雷游戏,初学java的试制品.zipjava实现的扫雷游戏,初学java的试制品.zip java实现的扫雷游戏,初学java的试制品.zipjava实现的扫雷游戏,初学java的试制品.zip java实现的扫雷游戏,初学java的试制品....

    MFC扫雷游戏源码 自己做的 适合初学者

    总的来说,这个"自己做的MFC扫雷游戏源码"项目是一个非常好的学习资源,它涵盖了Windows应用开发、C++编程、游戏逻辑设计以及源码学习等多个方面的知识,对初学者来说,既能锻炼编程技能,也能提升对游戏开发的理解...

    用javascript编写的扫雷游戏(原理很简单,适合初学者)

    用最简单的js函数编写的扫雷小游戏 每一个方格里调用一个函数, 除了java我想这样也是可以实现的吧

    基于原生JavaScript实现的扫雷小游戏.zip

    《基于原生JavaScript实现的扫雷小游戏.zip》是一个精简且功能丰富的Web开发项目,它展示了如何仅使用JavaScript这门前端核心语言来构建一款经典的桌面风格扫雷游戏。该资源包含了HTML、CSS以及JavaScript文件,...

    用java写的一个扫雷小程序源代码

    之前刚接触java的时候想写个扫雷小游戏来练练手,但是下载的都是不完整的 不然就是不能运行的 故上传一个自己已经测试好的,给初学者参考下 其中Mine 为主函数

    扫雷1.0简易版使用js、html、css进行制作.zip

    在扫雷中,当用户揭开一个格子,JavaScript会找到对应的DOM元素,并更新它的内容和样式,以反映出游戏的实时状态。 7. **条件判断与循环**:在JavaScript中,大量使用了条件判断(if...else语句)和循环(for,...

    扫雷java代码(很适合初学者参考)

    前不久我写的一个扫雷,进行了代码优化,简明,适合初学者参考学习gui的基本操作。分数就3分吧,别嫌太贵啊。

    Python简易扫雷素材包(图片+代码)

    在本资源包中,我们有一个基于Python实现的简易扫雷游戏。这个项目是初学者学习Python编程和图形用户界面(GUI)设计的一个很好的实践案例。下面将详细解析其中涉及的知识点: 1. **Python基础**:`扫雷.py` 文件是...

    java 写的个扫雷,处女作

    【标题】:“java 写的个扫雷,处女作” 这个项目是一个使用Java编程语言实现的扫雷游戏。作为作者的初次尝试,它展示了如何使用Java进行图形用户界面(GUI)开发,尤其是使用Java的基础GUI库AWT(Abstract Window ...

    扫雷的java程序.rar_JAVA 扫雷_java 游戏_扫雷_游戏编程

    【标题】"扫雷的java程序.rar"是一个Java语言实现的扫雷游戏项目,适合初学者学习游戏编程。这个程序提供了基本的扫雷游戏逻辑,让开发者能够了解如何在Java环境中构建一个简单的交互式游戏。 【描述】描述指出,这...

    用java写的扫雷游戏

    【标题】:“用Java写的扫雷游戏”是一个基于Java编程语言实现的经典扫雷游戏项目,旨在帮助学习者理解和掌握Java编程的基本概念以及游戏开发的基本流程。这个项目可能包含多个源代码文件,每个文件对应游戏的不同...

Global site tag (gtag.js) - Google Analytics