`
zpsailor
  • 浏览: 43714 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JS编写的扫雷游戏（简单易懂）

游戏网页游戏J#ChromeJavaScript 
阅读更多

初学JavaScript,这是自己仿照windows下面的扫雷游戏用写成的，网页上的扫雷游戏。通过这个程序的编写让我更加熟悉js的面向函数编程的思想和模式。同时深刻的体会到，要学好一门语言，一定得多动手写些代码。这里将代码分享出来，欢迎大家批评指正。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS扫雷游戏</title>
<script type="text/javascript" src="Mine.js"></script>
<script type="text/javascript">
 document.oncontextmenu=function(){   
  event.returnValue=false   
  }   
</script>
<link type="text/css" rel="stylesheet" href="Mine.css">
</head>
<body onload="Interface(8,8);">
  <p>
  目前剩余雷数:<span id="markNum" style="color: red"></span>个
  </p>请选择难度：
  <select id="level" onchange="selectLevel(this.value);">
  <option value="1">初级玩家
  <option value="2">普通玩家
  <option value="3">高级玩家
  </select>
  <table id="mainTab" cellpadding="0" cellspacing="0">
    <tbody id="mainInt"></tbody>
  </table>
</body>
</html>

 

 

 

   

@CHARSET "UTF-8";
 .myButton{
 width: 30px;
 height: 30px;
 background: silver;
 }
  .myButton0{
 width: 30px;
 height: 30px;
 color:gray;
 background:gray;
 }
 .myButton1{
 background: gray;
 color:blue;
 font-size:10px;
 width: 30px;
 height: 30px;
 }
 .myButton2{
 background: gray;
 font-size:10px;
 color:green;
 width: 30px;
 height: 30px;
 }
  .myButton3{
 background: gray;
 color:yellow;
 width: 30px;
 height: 30px;
 }
  .myButton4{
 background: gray;
 color: aqua;
 width: 30px;
 height: 30px;
 }
  .myButton5{
 background: gray;
 color: fuchsia;
 width: 30px;
 height: 30px;
 }
  .myButton6{
 background: gray;
 color:lime;
 width: 30px;
 height: 30px;
 }
  .myButton7{
 background: gray;
 color: teal;
 width: 30px;
 height: 30px;
 }
 
 .myButton8{
 background: gray;
 color: navy;
 width: 30px;
 height: 30px;
 }
 
 .myButton_{
 background: gray;
 color: red;
 width: 30px;
 height: 30px;
 }

 

  

   

/**********************************************
 * JavaScript扫雷游戏                         
 *                                            
 * @author : Sailor
 * 
 * @version : 1.0
 * 
 * Date : 2010-03-15
 * 
 * Email : zpsailor@yahoo.com.cn
 *  
 **********************************************/

var Mine;//用来记录每个小方块应对应的值
var markNum=8;//用来记录用户标记的数目
/**
 * 布局游戏界面 size是布局大小，number是布雷数
 */
function Interface(size,number){
	markNum=number;
	var mainFrame=$("mainInt");
	$("markNum").innerText=markNum;
	mainFrame.innerText="";
	var mine=new Array(size);
	for(var i=0;i<size;i++){
		mine[i]=new Array(size);
	}
	mine=randomNumber(mine,number);
	Mine=mine;
	for(var i=0;i<size;i++){
		mainFrame.appendChild(createRow(i,size,mine));
	}
}

/**
 * randomNumber
 * 参数mine,num分别表示一个二维数组和布雷的数目 
 */
 function randomNumber(mine,num) {
 	var mine=mine;
 	var rows=mine.length;
 	var cols=mine.length;
 	var i=0;

//完成布雷工作
 	while(i<num){
 		var row=Math.ceil((rows*Math.random()))-1;
 		var col=Math.ceil((cols*Math.random()))-1;
 		if(mine[row][col]!="雷"){
 			mine[row][col]="雷";
 			i++;
 		}
 	}
 	
 	//完成雷数提示工作
 	for(var i=0;i<rows;i++){
 	    for(var j=0;j<cols;j++){
 	    	var mineNum=0;
 	    	//判断左上
 	    	if((i-1>=0)&&(j-1>=0)){
 	    		if(mine[i-1][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断正上
 	    	if(i>=1){
 	    		if(mine[i-1][j]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右上
 	    	if((i-1>=0)&&(j<=cols-2)){
 	    		if(mine[i-1][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断左边
 	    	if(j>=1){
 	    		if(mine[i][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右边 
 	    	if(j<=cols-2){
 	    		if(mine[i][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断左下
 	    	if((i<=rows-2)&&(j-1>=0)){
 	    		if(mine[i+1][j-1]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断正下
 	    	if(i<=rows-2){
 	    		if(mine[i+1][j]=="雷")
 	    		mineNum++;
 	    	}
 	    	//判断右下
 	    	if((i<=rows-2)&&(j<=cols-2)){
 	    		if(mine[i+1][j+1]=="雷")
 	    		mineNum++;
 	    	}
 	    	if(mine[i][j]!="雷"){
 	    	mine[i][j]=mineNum;
 	    	}
 	    }
 }
 	return mine;
 }

/**
 * 创建行
 */
function createRow(row,len,mine){
	var mine=mine;
	var tr=document.createElement("tr");
	for(var i=0;i<len;i++){
		var td=document.createElement("td");
		var button=document.createElement("input");
		button.type="button";
		button.id=row+"."+i;
		button.className="myButton";
		
		var context=mine[row][i];
		button.onclick=function (){
			//alert(this.id)
			getValue(this);
			if(this.value=="雷"){
				this.className="myButton_";
			    getValue("over");
				alert("你触雷了，游戏结束！");
				if(confirm("重新开始？")){
					window.location.reload();
				}
				return false;
			}
			if(this.value==0){
				showSpace2(this);
			}
			this.oncontextmenu=function (){
				return false;
			}
			judge();
		};
		button.oncontextmenu=function (){
			
			if(this.value=="确定"){
				this.value="?";
                markNum++;
				$("markNum").innerHTML=markNum;				
			}else if(this.value=="?"){
				this.value="";
			}else{
				this.value="确定";
				markNum--;
				$("markNum").innerHTML=markNum;
				judge();
			}

		}
		//button.value=mine[row][i];
		td.appendChild(button);
		tr.appendChild(td);
	}
	return tr;
}


//当点击的不是空白区或者是触动雷的时候调用下面的函数
function getValue(object){
	if("over"!=object){
	var id=object.id;
	var button=document.getElementById(id);
    var row=id.split(".")[0];
    var col=id.split(".")[1];
    button.value=Mine[row][col];
    button.className="myButton"+button.value;
   }else{
   	for(var i=0;i<Mine.length;i++)
   	  for(var j=0;j<Mine[i].length;j++){
   	  var button = $(i+"."+j);
   	   if(Mine[i][j]=="雷"){
   	  	button.value=Mine[i][j];
   	  	button.className="myButton_";
   	    }
   	  }
   }
}

/**
 * 当点击的区域为空白区域时调用的下面的函数将与该区域相连的空白区域都显示出来
 */
 
 function showSpace(object){
 	var id=object.id;
	var button=document.getElementById(id);
 	var cols=Mine.length;
 	var rows=Mine.length;
 	var mark=0;
    while(mark<cols){
 	for(var i=0;i<cols;i++)
   	 for(var j=0;j<rows;j++){
   	  var button2 = $(i+"."+j);
   	   if(button2.value=="0"){
   	   	   //判断左上
   	   	 if((i-1>=0)&&(j-1>=0)){
 	    	var but=$((i-1)+"."+(j-1));
 	    	but.value=(Mine[i-1][j-1]=="雷") ? "" : Mine[i-1][j-1];
 	    	but.className="myButton"+but.value;	
 	    	}
 	    	//判断正上
 	    	if(i>=1){
 	    		var but=$((i-1)+"."+(j));
 	    	    but.value=(Mine[i-1][j]=="雷") ? "" : Mine[i-1][j];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右上
 	    	if((i-1>=0)&&(j<=cols-2)){
 	    		var but=$((i-1)+"."+(j+1));
 	    	    but.value=(Mine[i-1][j+1]=="雷") ? "" : Mine[i-1][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断左边
 	    	if(j>=1){
 	    		var but=$((i)+"."+(j-1));
 	    	    but.value=(Mine[i][j-1]=="雷") ? "" : Mine[i][j-1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右边 
 	    	if(j<=cols-2){
 	    		var but=$((i)+"."+(j+1));
 	    	    but.value=(Mine[i][j+1]=="雷") ? "" : Mine[i][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断左下
 	    	if((i<=rows-2)&&(j-1>=0)){
 	    		var but=$((i+1)+"."+(j-1));
 	    	    but.value=(Mine[i+1][j-1]=="雷") ? "" : Mine[i+1][j-1];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断正下
 	    	if(i<=rows-2){
 	    		var but=$((i+1)+"."+(j));
 	    	    but.value=(Mine[i+1][j]=="雷") ? "" : Mine[i+1][j];
 	    	    but.className="myButton"+but.value;
 	    	}
 	    	//判断右下
 	    	if((i<=rows-2)&&(j<=cols-2)){
 	    		var but=$((i+1)+"."+(j+1));
 	    	    but.value=(Mine[i+1][j+1]=="雷") ? "" : Mine[i+1][j+1];
 	    	    but.className="myButton"+but.value;
 	    	}
   	   }
   }
   mark++;
    }
 }
 
 /**
  * 3月18日在showSpace()方法的基础上使用递归算法改进的，速度快了很多。
  */
 function showSpace2(object){
 	var id=object.id;
	var row=parseInt(id.split(".")[0]);
    var col=parseInt(id.split(".")[1]);
    //alert(row+"."+col);
 	var cols=Mine.length;
 	var rows=Mine.length;
 	        //判断左上
 	        if((row-1>=0)&&(col-1>=0)){
 	    	    var but=$((row-1)+"."+(col-1));
 	    	    if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col-1]=="雷") ? "" : Mine[row-1][col-1];
 	    	    but.className="myButton"+but.value;
 	    	      if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }	
 	    	}
 	    	//判断正上
 	    	if(row>=1){
 	    		var but=$((row-1)+"."+(col));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col]=="雷") ? "" : Mine[row-1][col];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右上
 	    	if((row-1>=0)&&(col<=cols-2)){
 	    		var but=$((row-1)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row-1][col+1]=="雷") ? "" : Mine[row-1][col+1];
 	    	    but.className="myButton"+but.value;
 	    		 if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    		}
 	    	}
 	    	//判断左边
 	    	if(col>=1){
 	    		var but=$((row)+"."+(col-1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row][col-1]=="雷") ? "" : Mine[row][col-1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右边 
 	    	if(col<=cols-2){
 	    		var but=$((row)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row][col+1]=="雷") ? "" : Mine[row][col+1];
 	    	    but.className="myButton"+but.value;
 	    		 if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    		}
 	    	}
 	    	//判断左下
 	    	if((row<=rows-2)&&(col-1>=0)){
 	    		var but=$((row+1)+"."+(col-1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col-1]=="雷") ? "" : Mine[row+1][col-1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断正下
 	    	if(row<=rows-2){
 	    		var but=$((row+1)+"."+(col));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col]=="雷") ? "" : Mine[row+1][col];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 	    	//判断右下
 	    	if((row<=rows-2)&&(col<=cols-2)){
 	    		var but=$((row+1)+"."+(col+1));
 	    		if(but.value!="0"){
 	    	    but.value=(Mine[row+1][col+1]=="雷") ? "" : Mine[row+1][col+1];
 	    	    but.className="myButton"+but.value;
 	    	     if(but.value=="0"){
 	    	      	showSpace2(but);
 	    	      }
 	    	    }
 	    	}
 }
 
 /**
  * 判断是否说有的格子是否都是正确的找出来了
  */
 function judge(){
 	var cols=Mine.length;
 	var rows=Mine.length;
 	var allTrue=true;
 	for(var i=0;i<cols;i++)
   	  for(var j=0;j<rows;j++){
   	   var button = $(i+"."+j);
   	   if(Mine[i][j]=="雷"&&button.value!="确定"){
   	   	   allTrue=false;
   	      }
   	   else if(Mine[i][j]!="雷"&&button.value!=Mine[i][j]){
   	   	allTrue=false;
   	   }
  	   }
  	   if(allTrue){
  	   	if(confirm("全部雷已经挖出，你胜利了!重新开始?")){
					window.location.reload();
				}
  	   }
 }
 /**
  * 选择难度
  */

  function selectLevel(level){
  	if(level=="1"){
  		Interface(8,6);
  	}else if(level=="2"){
  		Interface(12,15);
  	}else if(level=="3"){
  		Interface(12,25);
  	}
  }
  
function $(id){
return document.getElementById(id);
}

  

 

  • 大小: 36 KB
分享到：
| JS编写的简易计算器
评论
2 楼 zpsailor 2010-03-30  
wgoku 写道
IE6 chrome 下字符串有问题 chrome下不能运行js代码


呃 ·· 这个我倒没注意到呢，我就在ie7下写的哈
1 楼 wgoku 2010-03-24  
IE6 chrome 下字符串有问题 chrome下不能运行js代码

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java编写扫雷程序

    java编写扫雷程序，仿windows扫雷，代码比较简单易懂，结构清晰，在Eclipse可直接运行，调试，方便学习，修改。

    JS实现扫雷游戏.rar

    通过JS原生实现扫雷游戏，代码已写好注释，通俗易懂、可以选择游戏难度，代码犀利，运行效率高，JS、CSS代码已放到一个html页面、可直接运行

    vba编写的扫雷游戏

    vba编写的扫雷游戏，完全中文界面，简单易懂，代码开源

    扫雷程序 简易易懂 无毒无插件

    一个简单的扫雷程序 虽然简单 但是任然需要很深的基本功

    jquery 扫雷游戏

    这是一款简洁的jquery游戏，代码简洁易懂，扫雷基本思想全部融入进去了，和电脑自带的扫雷游戏是一个玩法，界面比较好看，所有过程都是动画实现，看上去非常的流畅。兼容性做了ie9 safari chrome opera ff，其中...

    ios扫雷游戏代码

    - **图标设计**：扫雷游戏中的雷、数字、标记等图标设计需清晰易懂，符合用户习惯。 8. **测试与调试**： - **单元测试**：编写针对游戏逻辑的单元测试，确保游戏规则正确无误。 - **真机调试**：在真实设备上...

    java编写的扫雷小程序

    这个标题表明我们正在讨论一个使用Java（J2SE）实现的扫雷游戏。Java是一种跨平台的、面向对象的编程语言，J2SE（Java Standard Edition）是其标准版本，适用于桌面应用程序开发。开发者用Java编写扫雷程序，这意味...

    VB扫雷游戏代码

    用VB写的扫雷游戏代码,大量注释,通俗易懂!编译EXE即可玩游戏.

    扫雷游戏代码-C语言

    C语言编写的扫雷游戏，注释详细，浅显易懂，可以参考一下

    使用 JavaScript 编写的经典台球游戏及其源代码39.zip

    这是用 javascript 编写的一款简单的台球或 台球游戏。游戏玩法简单易懂，用户只需使用鼠标进行方向移动，然后右键单击鼠标按钮即可击球。您可以使用 W 键增加击球速度，使用 S 键降低击球速度。您可以用两种格式玩...

    简单易懂的扫雷可以直接运行

    简单的扫雷，容易上手易懂，希望对大家有所帮助。

    扫雷游戏及代码-VB

    【扫雷游戏及代码-VB】是一个基于Visual Basic（VB）开发的小型游戏项目，它展示了如何使用VB编程语言来实现经典的游戏——扫雷。在本文中，我们将深入探讨VB的基础知识，以及如何构建扫雷游戏的逻辑和界面。 首先...

    扫雷游戏JAVA版,模仿windows扫雷游戏.zip

    扫雷游戏是一款经典的逻辑推理游戏，它以其简单易懂的规则和挑战性吸引了无数玩家。在这个JAVA版的扫雷项目中，开发者通过编程技术，成功地将这一经典游戏移植到了计算机软件上。本文将深入探讨该项目的技术实现、...

    JAVA编写的扫雷程序

    该程序使用JAVA语言编写的扫雷程序 非常好用！！！简单易懂~~

    c#制作扫雷游戏

    c#制作扫雷游戏，代码一一清楚，程序简单易懂。

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

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

    dos下的扫雷

    一个用c语言编写扫雷游戏源文件！代码简单易懂！

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

    扫雷是一款经典的益智游戏，它以简单易懂的规则和挑战性的玩法深受全球玩家喜爱。本项目是用C++编程语言实现的扫雷小游戏，特别适合初学者作为学习递归算法的实践案例。通过分析和理解这个游戏的实现，初学者可以...

    C++/C语言编程扫雷游戏附加全套资源

    扫雷游戏源码+扫雷游戏图片+扫雷游戏声音资源+编译好的程序（童叟无欺） 编译条件： 项目名称：C++/C语言编程扫雷游戏 开发环境：devc++ 优化级别：自动 C++标准：ISOC++11 外部库：EGE  扫雷游戏规则： 扫雷一共有...

Magicbox
Global site tag (gtag.js) - Google Analytics