Ext写的扫雷Game

在线试玩地址是
http://www.lonelystar.org/WINMINE

Code：

<html>   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <title>project.xds</title>   
    <mce: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;   
    }   
       
--></mce:style><style mce_bogus="1"> .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" mce_href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>   
    <mce:script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js" mce_src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></mce:script>   
    <mce:script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js" mce_src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></mce:script>   
    <mce:script type="text/javascript"><!--   
        MyContainerUi = Ext.extend(Ext.Container, {   
            autoEl: 'div',   
             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',   
                                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,   
                                     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;   
}   
       
// --></mce:script>   
</head>   
<body></body>   
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Leo_wl/p/1750505.html