ExtJS练习,扫雷游戏V2.0更新,散分

ExtJS,练习完成扫雷游戏V2.0这里有说明
http://blog.csdn.net/b2b160/archive/2010/06/01/5638742.aspx<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>project.xds</title>
    <style>
.flag {
background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380573QM11.gif) !important;
}
.bomb{
background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380578ue8R.gif) !important;
}
.errbomb{
background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380583hhzj.gif) !important;
}
</style>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
    <script>
     MyContainerUi = Ext.extend(Ext.Container, {
autoEl: 'div',
width: 452,
height: 357,
layout: 'auto',
tpl: '',
initComponent: function() {
this.items = [];

function handleClick(button){
alert(button.itemId + ' was clicked.');

}
MyContainerUi.superclass.initComponent.call(this);
}

});

MyContainer = Ext.extend(MyContainerUi, {
initComponent: function() {
MyContainer.superclass.initComponent.call(this);
}
});

var dataGame = new Array();
var dataGameIsOpen = new Array();
var dataFlag = new Array();
var heightGame=10, widthGame=10;
var bombCount=5;
var TimeElapsed = 500;
var loopTimeStamp = 0;
var timer = null;
var rightClickBtn = -1;Ext.onReady(function() {
    var myContainer = new MyContainer({
        renderTo: Ext.getBody()
    });
var i,j;
var strFlag='';
myContainer.removeAll();
myContainer.add( {
                xtype: 'container',
                autoEl: 'div',
                layout: 'hbox',
id:'header',
                items: [
{
xtype: 'button',
text: 'NewGame',
height: 20,
listeners: {click: handleNewGame}
},
{
"xtype": "progress",
"value": 0.4,
itemId:'progressGame',
width:140,
value:1
}

]
            } );

initGame( dataGame );

for( i=0; i<heightGame; i++ )
{
myContainer.add( {
                xtype: 'container',
                autoEl: 'div',
                layout: 'hbox',
id:'line'+i,
                items: []
            } );

for( j=0;j<widthGame; j++ )
{
dataGameIsOpen[i*widthGame+j] = false; // 全部设置未打开

Ext.ComponentMgr.get('line'+i).add({
xtype: 'button',
text: '',
height: 20,
width: 20,
iconCls:strFlag,
itemId: 'bt_'+(i*widthGame+j),
listeners: {click: handleBtnClick,mouseover: handleBtnMouseOver},
btnIndex:i*widthGame+j
});
}
}

myContainer.doLayout();
    myContainer.show();

});function handleNewGame()
{
var i=0,j=0;
for( i=0; i<heightGame*widthGame; i++ )
{
dataGame[i] = 0;
dataGameIsOpen[i]=false;
}

initGame( dataGame );

for( i=0; i<heightGame; i++ )
{
for( j=0;j<widthGame; j++ )
{
Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setVisible(true);
Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setText('');
Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j) ).setIconClass('');
} }
}
function initGame( dataGame )
{
var i,j;

// 生成雷
for( i=0; i<bombCount; i++ )
{
var randomnum = Math.floor(Math.random()*100) % (heightGame*widthGame);
dataGame[randomnum ] = -1;
}

for( i=0;i<heightGame;i++ )
{
for( j=0; j<widthGame; j++ )
{

dataFlag[i*widthGame+j]=0;
if( dataGame[i*widthGame+j] != -1 )
{
dataGame[i*widthGame+j] = getBombCount( j, i, dataGame );
}

}
}
TimeElapsed = 500;
Ext.ComponentMgr.get('header').get('progressGame').updateProgress(1,TimeElapsed);
if( timer )
clearInterval(timer);
timer = setInterval( loopTime, 100 );
}function loopTime()
{
loopTimeStamp++;
if( loopTimeStamp>=10 )
{
TimeElapsed--;
if( TimeElapsed<0 )
{
GameOver();
return;
}
Ext.ComponentMgr.get('header').get('progressGame').updateProgress(TimeElapsed/500,TimeElapsed);
loopTimeStamp = 0;
}
}function GameOver(){
var i=0;
for( i=0; i<widthGame*heightGame; i++ )
{
if( dataGame[i] == -1 )
Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('bomb');
else if( dataFlag[i] == 1 )
{
Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('errbomb');
}
}
alert("Game Over!!");
clearInterval(timer);
timer = null;
//handleNewGame();
}
function handleBtnClick( btn ){
var nY = Math.floor(btn.btnIndex/widthGame);
var nX = btn.btnIndex%widthGame;
if( dataFlag[btn.btnIndex] == 1 )
return;
if(dataGame[btn.btnIndex] == -1 )
GameOver();
else
{
// 递归翻开
Open(nX, nY);
}

if( CheckAllOpen() )
alert("Well Done!Time Used "+ (500-TimeElapsed)+' Second.');
}
function handleBtnMouseOver( btn ){
rightClickBtn = btn.btnIndex;
}
function getBombCount( nX, nY, dataGame )
{
var nCount = 0;
var i,j;
for( i=nY-1; i<=nY+1; i++ )
{
for( j=nX-1; j<=nX+1; j++ )
{
if( i>=0 && i<heightGame && j>=0 && j<widthGame && (i!=nY || j != nX) )
{
if( dataGame[i*widthGame+j]==-1 )
{
nCount++;
}
}
}
}
return nCount;
}function Open( nX, nY )
{
var i,j;
var nIndex = nY*widthGame + nX;
if( nX<0 || nX>=widthGame || nY<0 || nY>=heightGame )
return;
if( dataGameIsOpen[nIndex] == true )
return;

if( dataFlag[nIndex] == 1 )
return;
if( dataGame[nIndex]==0 )
{
dataGameIsOpen[nIndex] = true;
Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setVisible(false);
Open( nX, nY-1 );
Open( nX-1, nY );
Open( nX+1, nY );
Open( nX, nY+1 );
}
else if( dataGame[nIndex]!=-1 )
{
Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setText(dataGame[nIndex]);
dataGameIsOpen[nIndex] = true;
}

}function CheckAllOpen()
{
var i=0;
for( i=0; i<heightGame*widthGame; i++ )
if( dataGameIsOpen[i]==false && dataGame[i] != -1 )
return false;
return true;
}
document.oncontextmenu = function(){
if( rightClickBtn>= 0 && dataGameIsOpen[rightClickBtn]==false )
{
dataFlag[rightClickBtn]++;
if( dataFlag[rightClickBtn]>=3 )
dataFlag[rightClickBtn] = 0;
var nY = Math.floor(rightClickBtn/widthGame);
var nX = rightClickBtn%widthGame;
switch( dataFlag[rightClickBtn] )
{
case 0:
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');
break;
case 1:
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('flag');
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');
break;
case 2:
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');
Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('?');
break;
}
return false;
}
return true;
}
    </script>
</head>
<body></body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不知道谁有空间,放上应该就可以用了,直接复制到你电脑就可以了.建立一个html文件
你这扫雷偶怎么就玩不懂呢
实在是偶自己也写过扫雷的
什么意思啊
刚点一下就提示well done?
我前些日子也写了个
纯javascript的。你这个还不错，就是不知道怎么玩.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="javascript" src="mine.js"></script>
<script type="text/javascript">

</script>
  <head>
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <style type="text/css">
   <style>

</style>
  </head>
  <body>
   <div>
   游戏难度:
   初级<input type="radio" value="easy" name="difficulty" onclick="selectedGame(this)" checked/>
   中级<input type="radio" value="middle" name="difficulty" onclick="selectedGame(this)"/>
   高级<input type="radio" value="hard" name="difficulty" onclick="selectedGame(this)"/>
   <br>
   <input  type="button"  value="开  始" onclick="if(!MineGame.isStart)MineGame.startGame()"/>
       雷数：<span id="allMine">10</span>    
   <span id="item"><img  src="0.gif"></span>    
   用时:<span id="useTime">0</span>    
   <input  type="button"  value="新  局" onclick="MineGame.startNew()"/>
   </div>
   <div id="mine">
   <table width="100" height="100" style="empty-cells: show;table-layout: fixed;">
   <tr height="10">
   <td ></td>
   </tr>
   </table>
   </div>
   <div id="bb"></div>
  </body>   <script type="text/javascript">

</script>
</html>借宝地晒晒.图片自己添加.
function MineGame(name){
this.name=name;
this.difficulty="easy";
this.col=10;
this.row=10;
this.mineCount=10;
this.startMine=10;
this.useTime=0;
this.isStart=false;
//重新画表格
this.drawTable=function(){
var scol=this.col;
var srow=this.row;
var str="";
for(var i=0;i<srow;i++){
var std="<tr height='10'>";
for(var j=0;j<scol;j++){
std+="<td class='toff' id='r"+i+"c"+j+"' onmouseup=\"checkmine(this,"+i+","+j+")\"> </td>";
}
std+="</tr>";
str+=std;
}
//onmouseup="checkmine(this)"
var str1="<table id='game' width='"+(30*srow)+"' height='"+(30*scol)+"' cellpadding='4' cellspacing='4' style='table-layout:fixed;empty-cells: show;table-layout: fixed;'>"+str+"</table>";
document.getElementById("mine").innerHTML=str1;
};
}
MineGame.prototype.gameDifficulty=function(difficulty){
this.difficulty=difficulty;
switch(difficulty){
case 'easy':this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
case 'middle':this.col=15;this.row=15;this.mineCount=20;this.startMine=20;break;
case 'hard':this.col=20;this.row=20;this.mineCount=100;this.startMine=100;break;
default:this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
}
this.drawTable();
this.init();
};
//初始化
MineGame.prototype.init=function(){
this.allButtons=new Array();
for(var i=0;i<this.row;i++){
this.allButtons[i]=new Array();
for(var j=0;j<this.col;j++){
this.allButtons[i][j]=new MineButton(i,j,0);
}
}
var  count=0;
//生成雷
while(count<this.startMine){
var row=Math.floor(Math.random()*this.row);
var col=Math.floor(Math.random()*this.col);
if(this.allButtons[row][col].mineNum!=-1){
this.allButtons[row][col].mineNum=-1;
count++;
}
}
//alert(count);
for(var i=0;i<this.row;i++){
for(var j=0;j<this.col;j++){
if(this.allButtons[i][j].mineNum!=-1){
this.allButtons[i][j].mineNum=this.getSurroundMine(i,j);
//var obj=document.getElementById("r"+i+"c"+j);
//obj.innerHTML=this.allButtons[i][j].mineNum;
}
}
}
};
//统计雷数
MineGame.prototype.getSurroundMine=function(i,j){
var num=0;
if(i-1>=0&&j-1>0&&this.allButtons[i-1][j-1].mineNum==-1){//左上
num++;
}
if(i-1>=0&&this.allButtons[i-1][j].mineNum==-1){//上
num++;
}
if(i-1>=0&&j+1<this.col&&this.allButtons[i-1][j+1].mineNum==-1){//右上
num++;
}
if(j-1>0&&this.allButtons[i][j-1].mineNum==-1){//左
num++;
}
if(j+1<this.col&&this.allButtons[i][j+1].mineNum==-1){//右
num++;
}
if(i+1<this.row&&j-1>0&&this.allButtons[i+1][j-1].mineNum==-1){//左下
num++;
}
if(i+1<this.row&&this.allButtons[i+1][j].mineNum==-1){//下
num++;
}
if(i+1<this.row&&j+1<this.col&&this.allButtons[i+1][j+1].mineNum==-1){//右下
num++;
}
return num;
};
//打开格子
MineGame.prototype.showEmpty=function(r,c){
if(this.allButtons[r][c].isOpen){
return;
}
var obj=document.getElementById("r"+r+"c"+c);
if(this.allButtons[r][c].mineNum>0){
this.allButtons[r][c].isOpen=true;
obj.className="ton";
obj.innerHTML=this.allButtons[r][c].mineNum;
}
//document.getElementById("bb").innerHTML=document.getElementById("bb").innerHTML+","+r+","+c;
if(this.allButtons[r][c].mineNum==0){
this.allButtons[r][c].isOpen=true;
obj.className="ton";
if(r-1>=0&&c-1>=0){//左上
this.showEmpty(r-1,c-1);
}
if(r-1>=0){//上
this.showEmpty(r-1,c);
}
if(r-1>=0&&c+1<this.col){//右上
this.showEmpty(r-1,c+1);
}
if(c-1>=0){//左
this.showEmpty(r,c-1);
}
if(c+1<this.col){//右边
this.showEmpty(r,c+1);
}
if(r+1<this.row&&c-1>=0){//左下
this.showEmpty(r+1,c-1);
}
if(r+1<this.row){//下
this.showEmpty(r+1,c);
}
if(r+1<this.row&&c+1<this.col){//右下
this.showEmpty(r+1,c+1);
}
}else{
return;
}
}
//开始游戏
MineGame.prototype.startGame=function(){
this.isStart=true;
this.useTime=0;
switch(this.difficulty){
case 'easy':this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
case 'middle':this.col=15;this.row=15;this.mineCount=20;this.startMine=20;break;
case 'hard':this.col=20;this.row=20;this.mineCount=100;this.startMine=100;break;
default:this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
}
document.getElementById("allMine").innerHTML=MineGame.mineCount;
this.changeTiem=setInterval("changeTiem()",1000)
};
//打开所有
MineGame.prototype.openAll=function(){
for(var a=0;a<this.row;a++){
for(var b=0;b<this.col;b++){
var obj=document.getElementById("r"+a+"c"+b);
obj.className="ton";
if(this.allButtons[a][b].mineNum>0){
obj.innerHTML=this.allButtons[a][b].mineNum;
}else if(this.allButtons[a][b].mineNum==-1&&(!this.allButtons[a][b].isCheck)){
obj.innerHTML="<img src='d.gif'>";
}else{

}
}
}
};
MineGame.prototype.startNew=function(){
if(MineGame.changeTiem!=null)
clearInterval(MineGame.changeTiem);
switch(this.difficulty){
case 'easy':this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
case 'middle':this.col=15;this.row=15;this.mineCount=20;this.startMine=20;break;
case 'hard':this.col=20;this.row=20;this.mineCount=100;this.startMine=100;break;
default:this.col=10;this.row=10;this.mineCount=10;this.startMine=10;break;
}
this.useTime=0;
this.drawTable();
this.init();
this.startGame();
}
//格子对象
function MineButton(rowNum,colNum,mineNum){
this.rowNum=rowNum;//行
this.colNum=colNum;//列
//如果有雷雷数则为-1
this.mineNum=mineNum;//雷数
this.isOpen=false;
this.isCheck=false;
}
哦丫那么偶也顺便晒下以前写的扫雷代码
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>扫雷</title>
<style type="text/css">
table{TABLE-LAYOUT: fixed;cursor:pointer}
td{width: 20px; height: 20px; FONT-SIZE: 12px; FONT-FAMILY: Verdana;font-weight:bold; text-align:center;background-color:#CECECE;}
td.Normal, .Flag
{border-left:2px solid #F5F5F5; border-right:2px outset #F5F5F5; border-top:2px solid #F5F5F5; border-bottom:2px outset #F5F5F5; font-weight:bold}
.Mine, .Boom, .M0, .M1, .M2, .M3, .M4, .M5, .M6, .M7, .M8
{background-color:#C5C5C5;border-right:1px solid #B4B4B4; border-bottom:1px solid #B4B4B4;}
td.Mine{background-image: url('Mine.gif');background-repeat: no-repeat; background-position: center;}
td.Boom{background-image: url('Mine.gif');background-repeat: no-repeat; background-position: center;background-color:#FF0000}
td.Flag, td.ErrFlag{background-image: url('Flag.gif');background-repeat: no-repeat; background-position: center;}
td.ErrFlag{background-color:#0F0}
td.M1 {COLOR: #00f;}
td.M2 {COLOR: #008000;}
td.M3 {COLOR: #f00;}
td.M4 {COLOR: #000080;}
td.M5 {COLOR: #800000;}
td.M6 {COLOR: #008080;}
td.M7 {COLOR: #000;}
td.M8 {COLOR: #808080;}
.happy, .sad, .success{background-repeat: no-repeat; background-position: center;}
.happy{background-image: url('HAPPY.GIF');}
.sad{background-image: url('sad.GIF');}
.success{background-image: url('success.GIF');}
</style>
<script language="javascript" type="text/javascript">
var MouseButton=0;//作为双键单击的计数，mouseup事件置0，mousedown事件＋1，当MouseButton=2说明双键同时单击
var LeftMouse=0;//鼠标左键是否按下，当鼠标左键按下时为1，松开为0
var FlagImg=new Image();
var HappyImg=new Image();
var MineImg=new Image();
var SadImg=new Image();
var SuccessImg=new Image();
FlagImg.src='Flag.gif';
HappyImg.src='Happy.gif';
MineImg.src='Mine.gif';
SadImg.src='Sad.gif';
SuccessImg.src='Success.gif';function GetEle(id){
return(document.getElementById(id));
}
var OMine={
InitStr:'',//大表格字符
MaxX:9,MaxY:9,//最大的坐标
MineCount:10,//定义雷的个数,可改
FlagCount:0, //已经标记的旗子的数量
OpenedCount:0, //已经打开的地区的数量
MaxOpenCount:0,//应该要打开的最大地区数量
//当OpenedCount=MaxOpenCount&&FlagCount=MineCount的时候,判断游戏成功结束
Mine:new Array(this.MaxY),
GameOver:false, //true代表游戏失败结束
Success:false, //true代表游戏成功结束
aClear:new Array(),//临时开雷的数组

//刷新网页的时候初始化
fInit:function(){
var nX,nY;
this.MaxOpenCount=this.MaxX*this.MaxY-this.MineCount;
InitStr='<table bordercolor="#000000" border="0" cellpadding="0" cellspacing="0" height="'+20*this.MaxY+'px" width="'+20*this.MaxX+'px" style="border: 10px inset #a0a0a0">';
for(nY=0;nY<this.MaxY;nY++){
InitStr+='<tr>';
this.Mine[nY]=new Array(this.MaxX);
for(nX=0;nX<this.MaxX;nX++){
InitStr+='<td class="Normal" onmousedown="OMine.fMouseDown('+nX+','+nY+',event);" onmouseup="OMine.fMouseUp('+nX+','+nY+',event);" onmouseover="OMine.fButtonMouseOver('+nX+','+nY+')" onmouseout="OMine.fButtonMouseOut('+nX+','+nY+')" id="Img'+nX+'_'+nY+'">　</td>';
this.Mine[nY][nX]={
Mine:0, //0表示没有雷,1表示有雷
State:0,//0表示未开启,1表示左键开启,2表示右键标记
MineCount:0//周围有几个雷
}
}
   InitStr+='</tr>';
}
InitStr+='</table>';
//GetEle('dMap').style.pixelWidth=20*this.MaxX;
//GetEle('dMap').style.pixelHeight=20*this.MaxY;
GetEle('dMap').innerHTML=InitStr;
GetEle('txtFlagCount').value=this.MineCount;
this.fInitMine();
GetEle('btnRefreshMap').className='happy';
this.GameOver=false;
this.Success=false;
this.OpenedCount=0;
this.FlagCount=0;
this.aClear.lenght=0;
},

//为了方便循环赋值,给表格数组赋值的时候是XY倒过来循环的,所以调用的时候要倒回去
//比如要获得该格子是否有雷,用OMine.fGetMine(x,y).Mine;
fGetMine:function(X,Y){
return(this.Mine[Y][X]);
},

//仅当按重新开始的按钮，不初始化大表格字符
fRefreshMap:function(){
//GetEle('dMap').style.pixelWidth=20*this.MaxX;
//GetEle('dMap').style.pixelHeight=20*this.MaxY;
GetEle('dMap').innerHTML=InitStr;
this.fResetOMine();//必须先重置OMine,再重置99个雷
this.fInitMine();
this.GameOver=false;
this.Success=false;
GetEle('btnRefreshMap').className='happy';
GetEle('txtFlagCount').value=this.MineCount;
this.OpenedCount=0;
this.FlagCount=0;
this.aClear.lenght=0;
}, //重置OMine.Mine数组
fResetOMine:function(){
var X,Y,M;
for(Y=0;Y<this.MaxY;Y++){
for(X=0;X<this.MaxX;X++){
M=this.Mine[Y][X];
M.Mine=M.State=M.MineCount=0;
}
}
},

//初始化雷的数组
fInitMine:function(){
var aOld=new Array(this.MaxX*this.MaxY);
var x,y,n=0;
var xRand;//一个随机数字
var a;
for(y=0;y<this.MaxY;y++){
for(x=0;x<this.MaxX;x++){
aOld[n++]=new Array(x,y);
}
}
for(n=0;n<this.MineCount;n++){
xRand=Math.floor(Math.random()*(aOld.length-1));
a=aOld[xRand];
this.fGetMine(a[0],a[1]).Mine=1;
aOld.splice(xRand,1);
}
aOld=null;
}, //鼠标移动到某格子的时候
fButtonMouseOver:function(X,Y){
switch(MouseButton){
case 2://双键按下的状态
var arr=this.fGetAround(X,Y);
for(var i=0;i<arr.length;i++){
this.fButtonDown(arr[i][0],arr[i][1]);
}
case 1:
if(LeftMouse==1){this.fButtonDown(X,Y);}//左键是按下的
break;
}
},

//鼠标移出某格子的时候
fButtonMouseOut:function(X,Y){
switch(MouseButton){
case 2://双键按下的状态
var arr=this.fGetAround(X,Y);
for(var i=0;i<arr.length;i++){
this.fButtonUp(arr[i][0],arr[i][1]);
}
case 1:
if(LeftMouse==1){this.fButtonUp(X,Y);}//左键是按下的
break;
}
}, //鼠标按下时没被开启的格子呈现被按下
fButtonDown:function(X,Y){
var srcEle=GetEle('Img'+X+'_'+Y);
if(srcEle.className=='Normal'){srcEle.className='M0'};
},

//让没被开启并且已经呈现被按下的格子回复Normal
fButtonUp:function(X,Y){
var srcEle=GetEle('Img'+X+'_'+Y);
if(srcEle.className=='M0'&&this.fGetMine(X,Y).State==0){srcEle.className='Normal'};
},

//获取8个方向的坐标
fGetAround:function(X,Y){
var TX,TY,i;
var Arr=new Array([-1,0],[-1,-1],[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1]);
var newArr=new Array();
for(i=0;i<8;i++){
TX=X+Arr[i][0];
TY=Y+Arr[i][1];
if(TX<0||TX>this.MaxX-1||TY<0||TY>this.MaxY-1){continue;}
newArr.push(new Array(TX,TY));
}
return(newArr);
},
//鼠标在格子按下
fMouseDown:function(X,Y,evt){
if(this.GameOver){
alert('游戏失败,再接再厉!');
return(true);
}
if(this.Success){
alert('恭喜游戏成功!再来一局吧？');
return(true);
}
var srcEle=GetEle('Img'+X+'_'+Y);
var ObXY=this.fGetMine(X,Y); MouseButton++;
var event=evt;
switch(MouseButton){
case 2:
//if(this.fGetMine(X,Y).State==0){this.fButtonDown;}
var arr=this.fGetAround(X,Y);
for(var i=0;i<arr.length;i++){
this.fButtonDown(arr[i][0],arr[i][1]);
}
break;
case 1:
switch(event.button){
case 1:
LeftMouse=1;
this.fButtonDown(X,Y);
break;
case 0:
if(getOs()==2){//FF浏览器
LeftMouse=1;
this.fButtonDown(X,Y);
break;
}
case 2: //开启了鼠标手势的Maxthon对于mousedown的右键判断值为0
switch(ObXY.State){
case 0:
ObXY.State=2;
srcEle.className='Flag';
GetEle('txtFlagCount').value=parseInt(GetEle('txtFlagCount').value)-1;
this.FlagCount++;
break;
case 1:
break;
case 2:
ObXY.State=0;
srcEle.className='Normal';
GetEle('txtFlagCount').value=parseInt(GetEle('txtFlagCount').value)+1;
this.FlagCount--;
break;
}
break;
}
break;
}
},

//鼠标在格子弹起
fMouseUp:function(X,Y,evt){
if(this.GameOver){
alert('游戏失败,再接再厉!');
return(true);
}
if(this.Success){
alert('恭喜游戏成功!再来一局吧？');
return(true);
}

var event=evt;
var srcEle=GetEle('Img'+X+'_'+Y);
var ObXY=this.fGetMine(X,Y);
switch(MouseButton){
case 2: //MouseDown为两个键都单击按下，任意一个键弹起都判断为双键弹起
LeftMouse=0;
//鼠标弹起，把呈现被按下状态的格子恢复
var arr=this.fGetAround(X,Y);
for(var i=0;i<arr.length;i++){
this.fButtonUp(arr[i][0],arr[i][1]);
}
if(ObXY.State==0){this.fButtonUp(X,Y);}
if(ObXY.State==1&&ObXY.MineCount>0){this.fOpenFlagMine(X,Y);}
break;
case 1: //当MouseDown为一个键单击时，MouseUp才判断为一个键弹起
switch(event.button){
case 2:
break;
case 0:
if(getOs()!=2){break;}//FF浏览器左键为0
case 1: //只有在State=0才起作用,跟是否有雷没关系
LeftMouse=0;
if(ObXY.State!=0){break;}
if(ObXY.Mine==1){
//触雷,结束该局
this.fFail();
srcEle.className='Boom';
break;
}
ObXY.State=1;//压栈之前就要设置为已经开启
this.aClear.push(new Array(X,Y));
this.fClearMine();
break;
}
break;
}
MouseButton=0;
if(this.OpenedCount==this.MaxOpenCount&&this.FlagCount==this.MineCount){
this.fSuccess();
alert('恭喜游戏成功!再来一局吧？');
return(true);
}
//当剩余未开启的格子数＝剩余的旗子数，自动完成
if(this.MaxOpenCount+this.MineCount-this.OpenedCount-this.FlagCount==parseInt(GetEle('txtFlagCount').value)){
this.fSuccess();
this.fAutoFlag();
alert('恭喜游戏成功!再来一局吧？');
return(true);
}
},

//自动填充未开启的地区的雷
fAutoFlag:function(){
var nX,nY;
for(nY=0;nY<this.MaxY;nY++){
for(nX=0;nX<this.MaxX;nX++){
if(this.Mine[nY][nX].State==0){
GetEle('Img'+nX+'_'+nY).className='Flag';
}
}
}
GetEle('txtFlagCount').value=0;
},

//递归开雷
fClearMine:function(){
if(this.aClear.length==0){ return(true);}
this.OpenedCount+=1;
var aXY=this.aClear.pop(),X=aXY[0],Y=aXY[1],TX,TY;
var aTmpClear=new Array();//一个临时数组
var srcEle=GetEle('Img'+X+'_'+Y);
var ObXY,ObTXTY;
var countMine=0; //获取周围雷的个数
//从正左开始的8个方向
var arr=this.fGetAround(X,Y);
var i;
for(i=0;i<arr.length;i++){
TX=arr[i][0];
TY=arr[i][1];//TX,TY获得本格周围的坐标
ObTXTY=this.fGetMine(TX,TY);
if(ObTXTY.Mine==1){countMine+=1;}
if(ObTXTY.State==0){aTmpClear.push(new Array(TX,TY));}
}
ObXY=this.fGetMine(X,Y);
ObXY.MineCount=countMine;
srcEle.className='M'+countMine;
if(countMine==0){
this.aClear=this.aClear.concat(aTmpClear);
for(i=0;i<aTmpClear.length;i++){
this.fGetMine(aTmpClear[i][0],aTmpClear[i][1]).State=1;
}
}
else{
if(getOs()==2){
srcEle.textContent=countMine;
}
else{
srcEle.innerText=countMine;
}
}
this.fClearMine();
},

//获得双键辅助开启
fOpenFlagMine:function(X,Y){
var FlagCount=0,TX,TY,ObXY,ObTXTY,i,aTmpClear=new Array(),FlagErr=false;
var arr=this.fGetAround(X,Y);
for(i=0;i<arr.length;i++){
TX=arr[i][0];
TY=arr[i][1];//TX,TY获得本格周围的坐标
ObTXTY=this.fGetMine(TX,TY);
switch(ObTXTY.State){
case 0: //未开启未标记
if(ObTXTY.Mine==0){ //没雷也没旗子的时候加入到被辅助开启的数组}
aTmpClear.push(new Array(TX,TY));
}
break;
case 2: //标记了旗子
FlagCount++; //只要标记了旗子,无论对错,都记录标记数+1
if(ObTXTY.Mine==0){ //没有雷但是标记了旗子,标记错误
FlagErr=true;
}
break;
}
}arr=null;
if(FlagCount<this.fGetMine(X,Y).MineCount){return(false);}//旗子比实际雷少,无论标记对错,不开启
if(FlagErr){ //有错误则进行结束游戏处理
this.fFail();
return(false);
}
if(aTmpClear.length==0){return(false);} //没有可以提供开启的空格
this.aClear=this.aClear.concat(aTmpClear);
for(i=0;i<aTmpClear.length;i++){this.fGetMine(aTmpClear[i][0],aTmpClear[i][1]).State=1;}
aTmpClear=null;
this.fClearMine();
return(true);
},

//显示所有的雷
fShowMine:function(){
var X=0,Y,EvalStr0='',EvalStr1='';
for(Y=0;Y<this.MaxY;Y++){
for(X=0;X<this.MaxX;X++){
switch(this.Mine[Y][X].Mine){
case 0:
if(this.Mine[Y][X].State==2){
EvalStr0+="GetEle('Img"+X+"_"+Y+"').className=";
}
break;
case 1:
EvalStr1+="GetEle('Img"+X+"_"+Y+"').className=";
break;
}
}
}
EvalStr1+="'Mine'";
//EvalStr0+="'Ⅹ'";
EvalStr0+="'ErrFlag'";
eval(EvalStr1+';'+EvalStr0);
}, //游戏成功结束
fSuccess:function(){
this.Success=true;
GetEle('btnRefreshMap').className='success';
},

//游戏失败结束
fFail:function(){
this.GameOver=true;
GetEle('btnRefreshMap').className='sad';
this.fShowMine();
}
}function ChangeMap(Map){
switch(Map){
case 1:
OMine.MaxX=OMine.MaxY=9;
OMine.MineCount=10;
break;
case 2:
OMine.MaxX=OMine.MaxY=16;
OMine.MineCount=40;
break;
case 3:
OMine.MaxX=30;
OMine.MaxY=16;
OMine.MineCount=99;
break;
}
OMine.fInit();
}function getOs()
{
   if(navigator.userAgent.indexOf("MSIE")>0)return 1;
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;
   if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3;
   if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4;
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5;
   return 0;
}
</script>
</head>
<body topmargin="0" oncontextmenu="return(false);" ondragstart="return(false)" onselectstart="return(false)" onload="OMine.fInit();" bgcolor="#808080">
<center>
<div id="dTop" align="center" style="border-style: inset; border-width: 10;width:400">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="380" height="62">
  <tr>
    <td style="width: 102; height:40">
    <input type="text" id="txtFlagCount" size="20" style="width: 60; height: 30; color:#FF0000; text-align:center; font-family:Verdana; font-weight:bold; background-color:#000000; font-size:13pt" value=""></td>
    <td style="width: 136; height:40">
<input class="happy" onclick="OMine.fRefreshMap()" type="button" id="btnRefreshMap" style="width: 28; height: 28;"><input onclick="OMine.fShowMine();" type="button" name="B3" value="显雷" style="display:none"></td>
    <td style="width: 142; height:40">
    <input type="radio" value="V1" checked name="R1" id="R1" onclick="ChangeMap(1)">初级<input type="radio" value="V1" name="R1" id="R2" onclick="ChangeMap(2)">中级<input type="radio" value="V1" name="R1" id="R3" onclick="ChangeMap(3)">高级</td>
  </tr>
  <tr>
    <td style="width: 100%; height:22" colspan="3">
    2008.9.5:目前在IE6.0,FF2.0上测试基本能正常游戏</td>
  </tr>
</table>
</div>
<div id="dMap" align="center"></div>
</center>
</body>
</html>
在线试玩地址是
http://www.lonelystar.org/WINMINE
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>project.xds</title>
    <style>
    .flag {
        background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380573QM11.gif) !important;
    }
    .bomb{
        background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380578ue8R.gif) !important;
    }
    .errbomb{
        background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380583hhzj.gif) !important;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
    <script>
        MyContainerUi = Ext.extend(Ext.Container, {
            autoEl: 'div',
            width: 452,
            height: 357,
            layout: 'auto',
            tpl: '',
            initComponent: function() {
                this.items = [];

                function handleClick(button){
                    alert(button.itemId + ' was clicked.');

                }
                MyContainerUi.superclass.initComponent.call(this);
            }

        });

        MyContainer = Ext.extend(MyContainerUi, {
            initComponent: function() {
                MyContainer.superclass.initComponent.call(this);
            }
        });

var dataGame = new Array();
var dataGameIsOpen = new Array();
var dataFlag = new Array();
var heightGame=10, widthGame=10;
var bombCount=5;
var TimeElapsed = 500;
var loopTimeStamp = 0;
var timer = null;
var rightClickBtn = -1;Ext.onReady(function() {
    var myContainer = new MyContainer({
        renderTo: Ext.getBody()
    });
    var i,j;
    var strFlag='';
    myContainer.removeAll();
    myContainer.add( {
                xtype: 'container',
                autoEl: 'div',
                layout: 'hbox',
                id:'header',
                items: [
                            {
                            xtype: 'button',
                                    text: 'NewGame',
                                    height: 20,
                                    listeners: {click: handleNewGame}
                            },
                            {
                                "xtype": "progress",
                                "value": 0.4,
                                itemId:'progressGame',
                                width:140,
                                value:1
                            }

                        ]
            } );

    initGame( dataGame );

    for( i=0; i<heightGame; i++ )
    {
        myContainer.add( {
                xtype: 'container',
                autoEl: 'div',
                layout: 'hbox',
                id:'line'+i,
                items: []
            } );

        for( j=0;j<widthGame; j++ )
        {
            dataGameIsOpen[i*widthGame+j] = false;    // 全部设置未打开

            Ext.ComponentMgr.get('line'+i).add({
                                    xtype: 'button',
                                    text: '',
                                    height: 20,
                                    width: 20,
                                    iconCls:strFlag,
                                    itemId: 'bt_'+(i*widthGame+j),
                                    listeners: {click: handleBtnClick,mouseover: handleBtnMouseOver},
                                    btnIndex:i*widthGame+j
                                });
        }
    }


    myContainer.doLayout();
    myContainer.show();

});function handleNewGame()
{
var i=0,j=0;
    for( i=0; i<heightGame*widthGame; i++ )
    {
        dataGame[i] = 0;
        dataGameIsOpen[i]=false;
    }

    initGame( dataGame );

    for( i=0; i<heightGame; i++ )
    {
        for( j=0;j<widthGame; j++ )
        {
            Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setVisible(true);
            Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setText('');
            Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j) ).setIconClass('');
        }    }
}
function initGame( dataGame )
{
    var i,j;

    // 生成雷
    for( i=0; i<bombCount; i++ )
    {
        var randomnum = Math.floor(Math.random()*100) % (heightGame*widthGame);
        dataGame[randomnum ] = -1;
    }

    for( i=0;i<heightGame;i++ )
    {
        for( j=0; j<widthGame; j++ )
        {

            dataFlag[i*widthGame+j]=0;
            if( dataGame[i*widthGame+j] != -1 )
            {
                dataGame[i*widthGame+j] = getBombCount( j, i, dataGame );
            }

        }
    }
    TimeElapsed = 500;
    Ext.ComponentMgr.get('header').get('progressGame').updateProgress(1,TimeElapsed);
    if( timer )
        clearInterval(timer);
    timer = setInterval( loopTime, 100 );
}function loopTime()
{
    loopTimeStamp++;
    if( loopTimeStamp>=10 )
    {
        TimeElapsed--;
        if( TimeElapsed<0 )
        {
            GameOver();
            return;
        }
        Ext.ComponentMgr.get('header').get('progressGame').updateProgress(TimeElapsed/500,TimeElapsed);
        loopTimeStamp = 0;
    }
}function GameOver(){
    var i=0;
    for( i=0; i<widthGame*heightGame; i++ )
    {
        if( dataGame[i] == -1 )
            Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('bomb');
        else if( dataFlag[i] == 1 )
        {
            Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('errbomb');
        }
    }
    alert("Game Over!!");
    clearInterval(timer);
    timer = null;
    //handleNewGame();
}
function handleBtnClick( btn ){
    var nY = Math.floor(btn.btnIndex/widthGame);
    var nX = btn.btnIndex%widthGame;
    if( dataFlag[btn.btnIndex] == 1 )
        return;
    if(dataGame[btn.btnIndex] == -1 )
        GameOver();
    else
    {
        // 递归翻开
        Open(nX, nY);
    }

    if( CheckAllOpen() )
        alert("Well Done!Time Used "+ (500-TimeElapsed)+' Second.');
}
function handleBtnMouseOver( btn ){
    rightClickBtn = btn.btnIndex;
}
function getBombCount( nX, nY, dataGame )
{
    var nCount = 0;
    var i,j;
    for( i=nY-1; i<=nY+1; i++ )
    {
        for( j=nX-1; j<=nX+1; j++ )
        {
            if( i>=0 && i<heightGame && j>=0 && j<widthGame && (i!=nY || j != nX) )
            {
                if( dataGame[i*widthGame+j]==-1 )
                {
                    nCount++;
                }
            }
        }
    }
    return nCount;
}function Open( nX, nY )
{
    var i,j;
    var nIndex = nY*widthGame + nX;
    if( nX<0 || nX>=widthGame || nY<0 || nY>=heightGame )
        return;
    if( dataGameIsOpen[nIndex] == true )
        return;

    if( dataFlag[nIndex] == 1 )
        return;
    if( dataGame[nIndex]==0 )
    {
        dataGameIsOpen[nIndex] = true;
        Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setVisible(false);
        Open( nX, nY-1 );
        Open( nX-1, nY );
        Open( nX+1, nY );
        Open( nX, nY+1 );
    }
    else if( dataGame[nIndex]!=-1 )
    {
        Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setText(dataGame[nIndex]);
        dataGameIsOpen[nIndex] = true;
    }

}function CheckAllOpen()
{
    var i=0;
    for( i=0; i<heightGame*widthGame; i++ )
        if( dataGameIsOpen[i]==false && dataGame[i] != -1 )
            return false;
    return true;
}
document.oncontextmenu = function(){
    if( rightClickBtn>= 0 && dataGameIsOpen[rightClickBtn]==false )
    {
        dataFlag[rightClickBtn]++;
        if( dataFlag[rightClickBtn]>=3 )
            dataFlag[rightClickBtn] = 0;
        var nY = Math.floor(rightClickBtn/widthGame);
        var nX = rightClickBtn%widthGame;
        switch( dataFlag[rightClickBtn] )
        {
            case 0:
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');
                break;
            case 1:
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('flag');
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');
                break;
            case 2:
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');
                Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('?');
                break;
        }
        return false;
    }
    return true;
}
    </script>
</head>
<body></body>
</html>
这个。
我都完成了已经提示我done了
我再去点雷又提示我失败了
这算bug不？
所以我那里注释了一句,//handleNewGame();完了就重新开始,这个当时只是练习,只是搞了个主逻辑,其它细节都没去优化的.谢谢你的用心支持.
故弄玄虚，非要把ExtJs扯上关系。
呵呵,没觉得哪里故弄玄虚了,难道不认为ExtJS帮你处理交互后,代码量少了很多么?
假如不借助ExtJS,我想单单显示就够我弄了,更不要说跨浏览器了.
牛人，Extjs有接触过，收藏来学习
不知道谁有空间,放上应该就可以用了,直接复制到你电脑就可以了.建立一个html文件