WEB开发网:闲时用JavaScript编写了一个小游戏:扫雷,发出来大家PP,呵呵……<html><head><meta http-equiv=Content-Type conten
赞助商链接
中资源
>> 最新文章
>> 赞助商
>> 热门文章
WEB开发网文章阅读

用JavaScript编写小游戏 -扫雷

作者:未知 文章来源:WEB开发者 更新时间:2007-12-8 15:48:51

闲时用JavaScript编写了一个小游戏:扫雷,发出来大家PP,呵呵……

<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>无标题文档</title>
<style>
.cl1{width:20;height:20;border-width:3px;border-style:solid;border-left-color:#ffffff;border-top-color:#ffffff;border-right-color:#808080;border-bottom-color:#808080;background-color:c0c0c0;}
.cl2{width:20;height:20;border-width:3px;border-style:solid;border-color:#c0c0c0;background-color:#c0c0c0;}
.inputClass{width:40px;height:20px;border-style:solid;border-width:1px;}
</style>
</head>
<body style=font-size:12px; oncontextmenu=return false; bgcolor=#000000>
<div align=center><font color=#FFFF00><strong>Supper Landmine Scanning</strong></font>
</div>
<div align=center style=color:#ffffff><br>
  你已经标记的雷数:<span id=mark style=color:#ff0000>0</span>&nbsp;&nbsp;流逝的时间:<span id=time style=color:#ff0000>0</span>秒</div>
<div id=boardContainer></div>
<script src=queue.js></script>
<script>
function board(mNum,w,h)
{
 this.mineNum=mNum;
 this.height=h;
 this.width=w;
 this.board=new Array(h);
 this.tempBoard=new Array(h);
 this.mineP=null;
 //direction 有左上到右下,顺时针。
 this.direction=new Array(new Array(-1,-1),new Array(0,-1),new Array(1,-1),new Array(1,0),new Array(1,1),new Array(0,1),new Array(-1,1),new Array(-1,0));
 this.makeEmptyBoard=makeEmptyBoard;
 this.makeMine=makeMine;
 this.makeThreadNum=makeThreadNum;
 this.onclick=onclick;
 this.handleZeroArea=handleZeroArea;
 this.check=check;
 this.markNum=0;
 this.blankLeft=w*h;
 this.timer=0;
 var n=(mNum<=w*h/2)?0:-1000;
 this.makeEmptyBoard(n);
 for(var t=0;t<h;t++)
  this.tempBoard[t]=new Array(this.width);
}
function check(position,increase)
{
 if(increase)
  {
   this.markNum++;
   document.all(mark).innerText=this.markNum;
   this.tempBoard[position[0]][position[1]]=this.board[position[0]][position[1]];
   this.board[position[0]][position[1]]=10;
  }
 else
  {
   this.markNum--;
   document.all(mark).innerText=this.markNum;
   this.board[position[0]][position[1]]=this.tempBoard[position[0]][position[1]];
  }
}
function handleZeroArea(position)
{
  this.blankLeft--;
  this.board[position[0]][position[1]]=9;//将已经访问的o数据改成9即标记已经访问
  document.all(position[0]+_+position[1]).className=cl2;
  var newPosition=new Array(2);
  var queue=new Queue();
  queue.enter(position);
  
  while(!queue.isempty())
  {
   p=queue.retrieve();
   queue.leave();
   for(var k=0;k<8;k++)//这个var一定要用!!!!!!!!!!!!!!!!!!!!!!!!!!
     {
     
   newPosition[0]=parseInt(p[0])+parseInt(this.direction[k][1]);
   newPosition[1]=parseInt(p[1])+parseInt(this.direction[k][0]);
   if(newPosition[0]>=0&&newPosition[0]<this.height&&newPosition[1]>=0&&newPosition[1]<this.width)//没有溢出则执行下边的处理
    {
    if(this.board[newPosition[0]][newPosition[1]]==-1000||this.board[newPosition[0]][newPosition[1]]>0)//为地雷,或者已经显示的就不做处理
     continue;
    else if(this.board[newPosition[0]][newPosition[1]]<0)//非地雷,非已经显示,表示要显示
     {
      this.board[newPosition[0]][newPosition[1]]=-this.board[newPosition[0]][newPosition[1]];
      document.all(newPosition[0]+_+newPosition[1]).innerText=this.board[newPosition[0]][newPosition[1]];
      document.all(newPosition[0]+_+newPosition[1]).className=cl2;
      this.blankLeft--;
     }
    else if(this.board[newPosition[0]][newPosition[1]]==0)
        {
      this.blankLeft--;
      this.board[newPosition[0]][newPosition[1]]=9;//将已经访问的o数据改成9即标记已经访问
      document.all(newPosition[0]+_+newPosition[1]).className=cl2;
      queue.enter(newPosition);
     }
    }
          }
  }
}
function makeEmptyBoard(num)
{
 var w=parseInt(this.width*20)+parseInt(this.width)+1;
 var htmlCode=<table id=board width=+w+ align=center border=0 cellpadding=0 cellspacing=1 onselectstart=return false; onClick=\if(event.srcElement.tagName.toUpperCase()!=TD)return;if(event.srcElement.innerText!=@)scanBomb.onclick(event.srcElement.id.split(_),event.srcElement)\ style=cursor:default oncontextmenu=\if(event.srcElement.className==cl1){event.srcElement.innerText=event.srcElement.innerText==@?&nbsp;:@;if(event.srcElement.innerText==@)scanBomb.check(event.srcElement.id.split(_),true);else scanBomb.check(event.srcElement.id.split(_),false);}\>;
 for(i=0;i<this.height;i++)
  {
   this.board[i]=new Array(this.width);
   htmlCode+=<tr>;
   for(j=0;j<this.width;j++)
    {
     htmlCode+=<td id=+i+_+j+ align=center class=cl1>&nbsp;</td>
     this.board[i][j]=num;
    }
   htmlCode+=</tr>;
  }
 htmlCode+=</table>;
 document.all(boardContainer).innerHTML=htmlCode;
 this.makeMine();
 this.makeThreadNum();
}

function makeMine()//num为空白或者bomb的个数,当bomb小于等于格数的一半的时候num为bomb数,否则为空白数
{
 var condition=(this.mineNum<=Math.round(this.width*this.height/2));
 var num=condition?this.mineNum:this.width*this.height-this.mineNum;
 var str=new Array(;
 for(var i=0;i<num-1;i++)
  str+=new Array(2),;
 str+=new Array(2));
 eval(var position=+str);
 for(var i=0;i<num;i++)//这里产生不重复随机数的方法太差了!!!!!
  {
   position[i][0]=Math.round(Math.random()*(this.height-1));
   position[i][1]=Math.round(Math.random()*(this.width-1));
   for(var j=0;j<i;j++)//检查是否重复
    {//alert(i,j:+i+,+j);
      if(position[i][0]==position[j][0])
     if(position[i][1]==position[j][1])
      {
       //alert(repeat!);
       position[i][0]=Math.round(Math.random()*(this.height-1));
       position[i][1]=Math.round(Math.random()*(this.width-1));
       j=0;
      }      
   }
  }//这里不重复随机数的产生方法太差了!!!!!
 if(condition)//true 表示产生的是mine的position,false表示产生的是空白的position
 {
  this.mineP=position;
  for(var i=0;i<num;i++)
  {
   this.board[parseInt(position[i][0])][parseInt(position[i][1])]=-1000;
  }
 }
 else
 {
  for(var k=0;k<num;k++)
   this.board[position[k][0]][position[k][1]]=0;
   
  this.mineP=new Array(this.mineNum);
  var counter=0;
  for(var i=0;i<this.height;i++)
  {
   for(var j=0;j<this.width;j++)
    if(this.board[i][j]==-1000)
     {
      this.mineP[counter]=new Array(2);
      this.mineP[counter][0]=i;
      this.mineP[counter][1]=j;
      counter++;
     }
   
  }
 }
}

function makeThreadNum()
{
 for(i=0;i<this.height;i++)
  for(j=0;j<this.width;j++)
   {
    if(this.board[i][j]==-1000)continue;
    for(k=0;k<this.mineNum;k++)
     if(Math.abs(i-this.mineP[k][0])<=1&&Math.abs(j-this.mineP[k][1])<=1)
     this.board[i][j]--;
   }
}

function onclick(position,ob)
{
 var flag=ob.className!=cl2;  
 if(this.board[position[0]][position[1]]==0)
  this.handleZeroArea(position);
    
 else if(this.board[position[0]][position[1]]==-1000)
  {
   ob.style.borderColor=red;
   ob.style.backgroundColor=red;
   for(i=0;i<this.mineNum;i++)
   {
    document.all(this.mineP[i][0]+_+this.mineP[i][1]).innerText=*;}
     alert(You lose!\nSpend time:+this.timer+seconds.);
     //location.reload();
      return;
   }
   
 else if(this.board[position[0]][position[1]]<0)
  {
   this.board[position[0]][position[1]]=-this.board[position[0]][position[1]];
   ob.innerText=this.board[position[0]][position[1]];
   ob.className=cl2;
   this.blankLeft--;
  }
 if(this.blankLeft==this.mineNum&&flag)
  alert(You win!\nYou spend +this.timer+ seconds this time.);
}
</script>
<br>
<div align=center style=color:#ffffff> 地雷数:
  <input type=text name=textfield1 class=inputClass value=40>
  行数:
  <input type=text name=textfield2 class=inputClass value=15>
  列数:
  <input type=text name=textfield3 class=inputClass value=15>
  <br>
  <br>
  <input type=submit name=Submit value=开始游戏 onclick=this.value=再来一次;begin(document.all(textfield1).value,document.all(textfield3).value,document.all(textfield2).value); style=width:70;height:20;font-size:12px;>
</div>
<script>
var scanBomb;
var t
function begin(bombNum,width,height){
 re=/^[1-9]\d*$/gi;
 if(!(re.test(bombNum+width+height))){alert(你的输入有误!);return;}
 document.all(mark).innerText=0;
 document.all(time).innerText=0;
 if(t!=null)window.clearInterval(t);
 if(bombNum>=width*height)
  {alert(地雷的数量不能超过或者等于地图的格数!);return;}
 scanBomb=new board(parseInt(bombNum),parseInt(width),parseInt(height));
 alert(确定后开始!);
 t=window.setInterval(document.all(time).innerText=(++scanBomb.timer);,1000);
}
</script>
<br>
<div align=center style=color:#ffffff>----------------------Power by Hill.Chiu
  丘の工作室----------------------<br>
  <a href=mailthillhero789@sina.com><font color=#FFFFFF>给我意见</font></a><br>

  Run at IE5.5+</div>
</body>
</html>


//---------------------------------------------------------------

queue.js文件:

// JavaScript Document
function node(value,next)//value为position
{
 if(value!=null)
 {
  this.value=new Array(2);
  this.value[0]=value[0];
  this.value[1]=value[1];}
 else
  this.value=null;

 this.next=next;
}

function Queue()
{
 this.first=null;//头指针
 this.rear=null;//尾指针
 this.size=0;//私有
 //以下为方法:
 this.enter=enter;//进入队列
 this.leave=leave;//离开队列
 this.isempty=isempty;//判断队列是否为空
 this.retrieve=retrieve;//不离开队列,取得数据
}

function isempty()
{
 return this.size==0?true:false;
}

function enter(value)
{
 if(this.size==0)
   this.first=this.rear=new node(value,null);
 else
  {
   this.rear.next=new node(value,null);
   this.rear=this.rear.next;
  }
 this.size++;
}

function leave()
{
 if(!this.isempty())
  {
   var temp=this.first;
   this.first=this.first.next;
   delete temp;
   this.size--;
   return true;
  }
 else
  return false;
}

function retrieve()
{
 if(!this.isempty())
  {
   return this.first.value;
  }
 else
  return null;
}

百度搜索中共有相关主题
[阅读:次] [返回上一页] [打 印]
  • 相关文章
  • 本类热门