首頁 > 開發者 > JavaScript
那天看到CSDN有朋友用JS寫了個貪吃蛇,反映不錯,最近又剛接觸到ExtJS,於是就邊學邊寫,寫了一個掃雷的初級版本,
只是最原始版本,並沒最佳化,也沒加入右鍵標記.但也算可玩的版本了,有時間,或者對ExtJS有更深瞭解後再去完善它吧.
更新了下,添加了對右鍵支援了.
代碼如下:
<html><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>project.xds</title><br /> <mce:style><!--<br />.flag {<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380573QM11.gif) !important;<br />}<br />.bomb{<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380578ue8R.gif) !important;<br />}<br />.errbomb{<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380583hhzj.gif) !important;<br />}</p><p>--></mce:style><style mce_bogus="1">.flag {<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380573QM11.gif) !important;<br />}<br />.bomb{<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380578ue8R.gif) !important;<br />}<br />.errbomb{<br />background-image: url(http://hi.csdn.net/attachment/201006/1/0_1275380583hhzj.gif) !important;<br />}<br /></style><br /> <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"/><br /> <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><br /> <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><br /> <mce:script type="text/javascript"><!--<br /> MyContainerUi = Ext.extend(Ext.Container, {<br />autoEl: 'div',<br />width: 452,<br />height: 357,<br />layout: 'auto',<br />tpl: '',<br />initComponent: function() {<br />this.items = [];</p><p>function handleClick(button){<br />alert(button.itemId + ' was clicked.');</p><p>}<br />MyContainerUi.superclass.initComponent.call(this);<br />}</p><p>});</p><p>MyContainer = Ext.extend(MyContainerUi, {<br />initComponent: function() {<br />MyContainer.superclass.initComponent.call(this);<br />}<br />});</p><p>var dataGame = new Array();<br />var dataGameIsOpen = new Array();<br />var dataFlag = new Array();<br />var heightGame=10, widthGame=10;<br />var bombCount=5;<br />var TimeElapsed = 500;<br />var loopTimeStamp = 0;<br />var timer = null;<br />var rightClickBtn = -1;<br />Ext.onReady(function() {<br /> var myContainer = new MyContainer({<br /> renderTo: Ext.getBody()<br /> });<br />var i,j;<br />var strFlag='';<br />myContainer.removeAll();<br />myContainer.add( {<br /> xtype: 'container',<br /> autoEl: 'div',<br /> layout: 'hbox',<br />id:'header',<br /> items: [<br />{<br />xtype: 'button',<br />text: 'NewGame',<br />height: 20,<br />listeners: {click: handleNewGame}<br />},<br />{<br />"xtype": "progress",<br />"value": 0.4,<br />itemId:'progressGame',<br />width:140,<br />value:1<br />}</p><p>]<br /> } );</p><p>initGame( dataGame );</p><p>for( i=0; i<heightGame; i++ )<br />{<br />myContainer.add( {<br /> xtype: 'container',<br /> autoEl: 'div',<br /> layout: 'hbox',<br />id:'line'+i,<br /> items: []<br /> } );</p><p>for( j=0;j<widthGame; j++ )<br />{<br />dataGameIsOpen[i*widthGame+j] = false;// 全部設定未開啟</p><p>Ext.ComponentMgr.get('line'+i).add({<br />xtype: 'button',<br />text: '',<br />height: 20,<br />width: 20,<br />iconCls:strFlag,<br />itemId: 'bt_'+(i*widthGame+j),<br />listeners: {click: handleBtnClick,mouseover: handleBtnMouseOver},<br />btnIndex:i*widthGame+j<br />});<br />}<br />}</p><p>myContainer.doLayout();<br /> myContainer.show();</p><p>});<br />function handleNewGame()<br />{<br />var i=0,j=0;<br />for( i=0; i<heightGame*widthGame; i++ )<br />{<br />dataGame[i] = 0;<br />dataGameIsOpen[i]=false;<br />}</p><p>initGame( dataGame );</p><p>for( i=0; i<heightGame; i++ )<br />{<br />for( j=0;j<widthGame; j++ )<br />{<br />Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setVisible(true);<br />Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j)).setText('');<br />Ext.ComponentMgr.get('line'+i).get('bt_'+(i*widthGame+j) ).setIconClass('');<br />}<br />}<br />}<br />function initGame( dataGame )<br />{<br />var i,j;</p><p>// 產生雷<br />for( i=0; i<bombCount; i++ )<br />{<br />var randomnum = Math.floor(Math.random()*100) % (heightGame*widthGame);<br />dataGame[randomnum ] = -1;<br />}</p><p>for( i=0;i<heightGame;i++ )<br />{<br />for( j=0; j<widthGame; j++ )<br />{</p><p>dataFlag[i*widthGame+j]=0;<br />if( dataGame[i*widthGame+j] != -1 )<br />{<br />dataGame[i*widthGame+j] = getBombCount( j, i, dataGame );<br />}</p><p>}<br />}<br />TimeElapsed = 500;<br />Ext.ComponentMgr.get('header').get('progressGame').updateProgress(1,TimeElapsed);<br />if( timer )<br />clearInterval(timer);<br />timer = setInterval( loopTime, 100 );<br />}<br />function loopTime()<br />{<br />loopTimeStamp++;<br />if( loopTimeStamp>=10 )<br />{<br />TimeElapsed--;<br />if( TimeElapsed<0 )<br />{<br />GameOver();<br />return;<br />}<br />Ext.ComponentMgr.get('header').get('progressGame').updateProgress(TimeElapsed/500,TimeElapsed);<br />loopTimeStamp = 0;<br />}<br />}<br />function GameOver(){<br />var i=0;<br />for( i=0; i<widthGame*heightGame; i++ )<br />{<br />if( dataGame[i] == -1 )<br />Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('bomb');<br />else if( dataFlag[i] == 1 )<br />{<br />Ext.ComponentMgr.get('line'+Math.floor(i/widthGame)).get('bt_'+i ).setIconClass('errbomb');<br />}<br />}<br />alert("Game Over!!");<br />clearInterval(timer);<br />timer = null;<br />//handleNewGame();<br />}<br />function handleBtnClick( btn ){<br />var nY = Math.floor(btn.btnIndex/widthGame);<br />var nX = btn.btnIndex%widthGame;<br />if( dataFlag[btn.btnIndex] == 1 )<br />return;<br />if(dataGame[btn.btnIndex] == -1 )<br />GameOver();<br />else<br />{<br />// 遞迴翻開<br />Open(nX, nY);<br />}</p><p>if( CheckAllOpen() )<br />alert("Well Done!Time Used "+ (500-TimeElapsed)+' Second.');<br />}<br />function handleBtnMouseOver( btn ){<br />rightClickBtn = btn.btnIndex;<br />}<br />function getBombCount( nX, nY, dataGame )<br />{<br />var nCount = 0;<br />var i,j;<br />for( i=nY-1; i<=nY+1; i++ )<br />{<br />for( j=nX-1; j<=nX+1; j++ )<br />{<br />if( i>=0 && i<heightGame && j>=0 && j<widthGame && (i!=nY || j != nX) )<br />{<br />if( dataGame[i*widthGame+j]==-1 )<br />{<br />nCount++;<br />}<br />}<br />}<br />}<br />return nCount;<br />}<br />function Open( nX, nY )<br />{<br />var i,j;<br />var nIndex = nY*widthGame + nX;<br />if( nX<0 || nX>=widthGame || nY<0 || nY>=heightGame )<br />return;<br />if( dataGameIsOpen[nIndex] == true )<br />return;</p><p>if( dataFlag[nIndex] == 1 )<br />return;<br />if( dataGame[nIndex]==0 )<br />{<br />dataGameIsOpen[nIndex] = true;<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setVisible(false);<br />Open( nX, nY-1 );<br />Open( nX-1, nY );<br />Open( nX+1, nY );<br />Open( nX, nY+1 );<br />}<br />else if( dataGame[nIndex]!=-1 )<br />{<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+nIndex ).setText(dataGame[nIndex]);<br />dataGameIsOpen[nIndex] = true;<br />}</p><p>}<br />function CheckAllOpen()<br />{<br />var i=0;<br />for( i=0; i<heightGame*widthGame; i++ )<br />if( dataGameIsOpen[i]==false && dataGame[i] != -1 )<br />return false;<br />return true;<br />}<br />document.oncontextmenu = function(){<br />if( rightClickBtn>= 0 && dataGameIsOpen[rightClickBtn]==false )<br />{<br />dataFlag[rightClickBtn]++;<br />if( dataFlag[rightClickBtn]>=3 )<br />dataFlag[rightClickBtn] = 0;<br />var nY = Math.floor(rightClickBtn/widthGame);<br />var nX = rightClickBtn%widthGame;<br />switch( dataFlag[rightClickBtn] )<br />{<br />case 0:<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');<br />break;<br />case 1:<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('flag');<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('');<br />break;<br />case 2:<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setIconClass('');<br />Ext.ComponentMgr.get('line'+nY).get('bt_'+rightClickBtn ).setText('?');<br />break;<br />}<br />return false;<br />}<br />return true;<br />}</p><p>// --></mce:script><br /></head><br /><body></body><br /></html>
用到的圖片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
