用javascript+Ext写的扫雷V2.0
那天看到CSDN有朋友用JS写了个贪吃蛇,反映不错,最近又刚接触到ExtJS,于是就边学边写,写了一个扫雷的初级版本,
只是最原始版本,并没优化,也没加入右键标记.但也算可玩的版本了,有时间,或者对ExtJS有更深了解后再去完善它吧.
更新了下,添加了对右键支持了.
代码如下:
<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', 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; } // --></mce:script> </head> <body></body> </html>
用到的图片
