Home > Developer > JavaScript
On that day, I saw a friend of csdn using js to write a greedy snake. It reflected that it was good. Recently, I just came into contact with extjs. So I learned and wrote a basic version of mine clearance,
It's just the original version. It's not optimized, and it's not added with the right-click tag. It's also a playable version. If you have time, or have a deeper understanding of extjs, you can complete it.
Updated and added support for right-click.
The Code is as follows:
<HTML> <br/> <pead> <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"> </m CE: 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 (mycontaine Rui, {<br/> initcomponent: function () {<br/> mycontainer. superclass. initcomponent. call (this); <br/>}< br/>}); </P> <p> var partition ame = new array (); <br/> VaR parameter ameisopen = 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: 'click', <br/> text: 'newgame ', <br/> Height: 20, <br/> listeners: {Click: handlenewgame} <br/>}, <Br/> {<br/> "xtype": "progress", <br/> "value": 0.4, <br/> Itemid: 'ssssgame ', <br/> width: 140, <br/> value: 1 <br/>}</P> <p>] <br/> }); </P> <p> initgame (same AME); </P> <p> for (I = 0; I <peightgame; 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/> invalid AME Isopen [I * widthgame + J] = false; // all settings are not enabled </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/>}</P> <p> mycontainer. dolayout (); <br/> mycontainer. show (); </P> <p >}); <Br/> function handlenewgame () <br/>{< br/> var I = 0, j = 0; <br/> for (I = 0; I <peightgame * widthgame; I ++) <br/> {<br/> parameter ame [I] = 0; <br/> parameter ameisopen [I] = false; <br/>}</P> <p> initgame (same AME); </P> <p> for (I = 0; I <peightgame; 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 ('B T _ '+ (I * widthgame + j )). settext (''); <br/> Ext. componentmgr. get ('line' + I ). get ('bt _ '+ (I * widthgame + j )). seticonclass (''); <br/>}< br/> function initgame (same name) <br/>{< br/> var I, j; </P> <p> // generate a ray <br/> for (I = 0; I <bombcount; I ++) <br/>{< br/> var randomnum = math. floor (math. random () * 100) % (heightgame * widthgame); <br/> parameter ame [randomnum] =-1; <br/>}</P> <p> for (I = 0; I <peightgame; I ++) <br />{< Br/> for (j = 0; j <widthgame; j ++) <br/>{</P> <p> dataflag [I * widthgame + J] = 0; <br/> If (policame [I * widthgame + J]! =-1) <br/>{< br/> commoname [I * widthgame + J] = getbombcount (J, I, commoname ); <br/>}</P> <p >}< br/> timeelapsed = 500; <br/> Ext. componentmgr. get ('header '). get ('progress '). 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/> Ti Meelapsed --; <br/> If (timeelapsed <0) <br/>{< br/> gameover (); <br/> return; <br/>}< br/> Ext. componentmgr. get ('header '). get ('progress '). updateprogress (timeelapsed/500, timeelapsed); <br/> looptimestamp = 0; <br/>}< br/> function gameover () {<br/> var I = 0; <br/> for (I = 0; I <widthgame * heightgame; I ++) <br/> {<br/> If (same ame [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/> 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 (condition ame [BTN. btnindex] =-1) <br/> gameover (); <br/> else <br/> {<br/> // recursive open <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, canonical AME) <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 <peightgame & J> = 0 & J <widthgame & (I! = Ny | j! = Nx) <br/>{< br/> If (same ame [I * widthgame + J] =-1) <br/>{< br/> ncount ++; <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 (parameter ameisopen [nindex] = true) <br/> return; </P> <p> If (dataflag [nindex] = 1) <br/> return; <br/> If (Commoname [nindex] = 0) <br/>{< br/> parameter ameisopen [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 (canonical ame [nindex]! =-1) <br/>{< br/> Ext. componentmgr. get ('line' + ny ). get ('bt _ '+ nindex ). settext (encryption ame [nindex]); <br/> encryption ameisopen [nindex] = true; <br/>}</P> <p >}< br/> function checkallopen () <br/> {<br/> var I = 0; <br/> for (I = 0; I <peightgame * 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. CO Mponentmgr. 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/> </pead> <br/> <body> </body> <br/> </ptml>
Images used
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
