Let's go down.
For the final effect, the interface does not beautify, a little ugly will be,,, haha
Not much to say, the code to see comments have been commented a lot, the main difficulty of minesweeper is calculated but before clicking around your security area, my idea is: recursive loop calculation of the current click on the top, bottom, left and right 4 lattice, if you encounter a blank then continue, if encountered Reize stop around.
From the center point outward diffusion, in the diffusion will definitely return to encounter already processed lattice, then skip continue ....
HTML code
<!doctype html><script src= "Minefield.jquery.js" ></script><script> $ (function () {$ (' #start '). Bind (' click ', func tion () {var data = {}, define = $ (' input[name= "define"]:checked '). Val (), diff = $ (' Input[name= ' diff "]:checked '). Val (), R Ownum = $.trim ($ (' #rowNum '). Val ()), Colnum = $.trim ($ (' #colNum '). Val ()), Minenum = $.trim ($ (' #mineNum '). Val ()); Select System Definition if (define = = ' 1 ') {switch (diff) {case ' 1 ': data = {rownum:9, colnum:9,minenum:10} break; Case ' 2 ': data = {rownum:16, colnum:16, Minenum:40}break; Case ' 3 ': data = {rownum:16, colnum:30, Minenum:99}break; }}else{//Select Custom if (9 > RowNum | | rowNum >) {alert (' O no~~ can be up to 24 rows, 9~24!! '); return; } if (9 > Colnum | | colnum >) {alert (' wipe can only be 30 columns, 9~30!! '); return; }
//Here Calculate the maximum number of mines based on column or row? Hope expert Pointing twos ~ ~if (9 > Minenum | | minenum > 668 | | minenum > (rownum*colnum-1)) {alert (' dry, this is the rhythm of death, get so much thunder!! '); return; } if (RowNum &&!isnan (rowNum)) {data.rownum = parseint (RowNum); } if (Colnum &&!isnan (colnum)) {data.colnum = parseint (colnum); } if (Minenum &&!isnan (minenum)) {data.minenum = parseint (minenum); }}
Clear the timer below
Cleartimeout (Timeflag); $ (' #gameEnd '). empty ();
When the game starts, call Data.gamestart = function () {usetime (1); $ (' #gameEnd '). HTML (' in progress .... Come on ~ hard ~ ');} Data.gameend = function (flag) {cleartimeout (timeflag); var time = $ (' #useTime '). text (); var str = "; if (flag) {
After the game is passed, the player can define some level if (time <=) {str = ' you thunder ';} if (< time <) {str = ' you're awesome! ';} if (50<=time<100) {str = ' Congratulations on your clearance! ‘;} if (time >=) {str = ' Finally, it's not easy ~ ~ ~ ~ ';} $ (' #gameEnd '). html (' <span style= "color: #0f0;" > ' +str+ ' </span> ');} else{$ (' #gameEnd '). html (' <span style= ' color: #f00; " > is really a crayon ~~</span> ');}}
Start the game $ (' #minefield '). Minefield (data);}); /Initialize $ (' #start '). Click ();});
Timer var timeflag;function usetime (Time) {$ (' #useTime '). Text (time); Timeflag = SetTimeout (function () {usetime (time+1) ;},1000);} </script></body>Minefield.jquery.js Script code
/***minefield.jquery.js* Minesweeper Plugin *CBQ [email protected]*/(Function (window, $) {///Extend array indexof method if (! ARRAY.PROTOTYPE.INDEXOF) {Array.prototype.indexOf = function (v) {var i, len;for (i=0,len=this.length;i<len;i++) {if (This[i] = = v) {return i;}} return-1;}} function minefield (options, dom) {This._default = {init:true,//whether to initialize Rownum:9,//number of rows colnum:9,//How many columns Minenum:1 0,//tired number gamestart:function () {},gameend:function () {}};this.settings = $.extend (True, This._default, options); User Configuration this. $dom = $ (DOM); Current Insert Minesweeper Dom Object this. $table = $ (' <table class= "minefield" border= "1" cellpadding= "1" cellspacing= "1" ><tbody ></tbody></table> '); Minesweeper Object this.minedata = []; Ray distribution Array (including all objects) this.mineposition = []; Store mined area location (only mined area) This.minenumdata = []; Number of mines per lattice This.gamestart = False;this.gameover = False;this.tempsafearea = [];this._init (); Initialize}//extension Prototype Object $.extend (minefield.prototype,{//initialization function _init:function () {var me = this;//Create a mine distribution area Me._ Createminedata ();Create user interface Me._creategame ();//Create Event Listener me._addevent ();},//create a distribution area for Thunder _createminedata:function () {var me=this,i=0, j=0, RowNum = Me.settings.rownum,colnum = Me.settings.colnum,max = rowNum * Colnum,minenum = Me.settings.minenum,minedata = Me. Minedata,mineposition = Me.mineposition,mine;for (i=0; i<max; i++) {minedata.push (0);} Generate a ray for (j=0;j<minenum;) {mine = Math.floor (Math.random () * (max-1));//If the generated thunder already exists, regenerate if (Mineposition.indexof ( Mine) = =-1) {Mineposition.push (mine); Minedata[mine] = 1;j++;}}},//Create user interface _creategame:function () {var me=this,i=0, j= 0,index = 0,rownum = Me.settings.rownum,colnum = Me.settings.colnum,minedata = Me.minedata,minenumdata = Me.mineNumData, Trs=[], Tds=[],ismine = 0;for (i=0; i<rownum; i++) {tds.splice (0, Colnum); for (j=0; j<colnum; J + +) {Ismine = mineData[ index];//gets the number of mines next to each lattice, if the lattice itself is a mine -1if (ismine = = 1) {Minenumdata[index] =-1;} Else{minenumdata[index] = Me.getminenumber (j, i);} Tds.push (' <td class= ' init-color ' > ' +index+ ', ' +ismine+ ', ' +minen 'umdata[index]+ ' </td> ');//Tds.push (' <td class= ' init-color ' > ' +ismine+ ', ' +minenumdata[index]+ ' </td> '), Tds.push (' <td class= "Init-color" > </td> "); index++;} Trs.push (' <tr> ' + tds.join (') + ' </tr> ');} Me. $table. Find (' tbody '). Append (Trs.join (")), Me $dom. Empty (). Append (Me $table);},//bind event _addevent:function () { var me = this;
Add events to table only, which can reduce unnecessary events, and if you add a click event to each lattice, how much me to pollute. $table. bind (' click ', Function (e) {var target = E.target, $currTr, Currindex,minenum,name = Target.nodeName.toLowerCase (), Allsafearea;var $currTd; if (name = = ' td ') {
If the game is over then you don't have to go down if (!me.gamestart) {Me.gamestart = True;me.settings.gamestart? Me.settings.gameStart (): ';} $currTd = $ (target); Current click lattice $CURRTR = $currTd. Parent (); Current Click Line
If the lattice has been clicked, no further action is required ($currTd. Hasclass (' Open-color ') | | $currTd. hasclass (' Flag-color ') | | me.gameover) {return;} Calculates the current click position Currindex = (number of current rows * columns) + current position, because the table layout is used, so clicking on a row grid will start at 0 currindex = ($currTr. Index () * me.settings.colNum) + $currTd. index (); minenum = Me.minenumdata[currindex];switch (minenum) {case 0://safe zone//empty safe area, Recalculate Me.tempSafeArea.splice (0,me.tempsafearea.length);
Calculates the security lattice Me._getlrudsafearea ($currTd. Index (), $currTr. Index ()) next to the current click Grid;
Modify the security lattice background color me._setsafebgcolor (Me.tempsafearea); if (Me._iswin ()) {//Win event M E.settings.gameend? Me.settings.gameEnd (true): ';} Break;case-1://Mined area $currtd.addclass (' Mine-color '); me.gameover = True;me._showmine ();//failure event Me.settings.gameEnd? Me.settings.gameEnd (false): '; Break;default://Other $currtd.removeclass (' Init-color '). addclass (' Open-color '). Text ( Minenum); if (Me._iswin ()) {//Win event Me.settings.gameEnd? Me.settings.gameEnd (True): ';} Break;}}). Bind (' ContextMenu ', function (e) {//Right-click event, used to identify itself as mined area, or de e.stoppropagation (); var target = E.target,name = Target.nodeName.toLowerCase (); var $currTd; if (name = = ' td ' &&!me.gameover) {$currTd = $ (target); Currtd.hasclass (' Init-color ') {$currTd. Removeclass (' Init-color '). addclass (' Flag-color '); return false;} if ($currTd. Hasclass (' Flag-color ')) {$currTd. Removeclass (' Flag-color '). addclass (' Init-color '); return false;}} return false;},//gets the Thunder distribution of the top, bottom, left, right, top, top, left, bottom, and lower right eight positions of each cell getminenumber:function (X, y) {var me = This,minedata = Me.minedata,rownum = Me.settings.rownum,colnum = Me.settings.colnum,index = y * colNum + x , Upnum = parseint (index)-parseint (colnum), Downnum = parseint (index) +parseint (colnum), Minenum = 0;//Gets the left value, If the first value is not evaluated if (x > 0 && minedata[index-1] = = 1) {minenum + = 1;} Gets the right value, if the last value of each row is not evaluated if (x< (colNum-1) && Minedata[index + 1] = = 1) {minenum + = 1;} Gets the above value, if the first row is not evaluated if (y>0 && minedata[upnum] = = 1) {minenum + = 1;} Gets the value below, if the first row is not evaluated if (y< (rowNum-1) && minedata[downnum] = = 1) {minenum + = 1;} Gets the upper-left corner of a value, if the first value is not evaluated if (x>0 && y>0 && minedata[upnum-1] = = 1) {minenum + = 1;} Gets a value in the upper-right corner, if the first value is not evaluated if (x< (colNum-1) && y>0 && minedata[upnum+1] = = 1) {minenum + = 1;} Get a value in the lower left corner, if the first value is not evaluated if (x>0 && y< (rowNum-1) && minedata[downnum-1] = = 1) {minenum + = 1;} Get a value in the lower right corner, if the first value is not evaluated if (x< (colNum-1) && y< (rowNum-1) && minedata[downnum+1] = = 1) {minenum + = 1;} RetUrn Minenum;},
Gets the current lattice's upper (up), bottom (down), Ieft (left), and right safe zone _getlrudsafearea:function (x, y) {var me = This,minenumdata = Me.minenumdata , RowNum = parseint (me.settings.rowNum), Colnum = parseint (me.settings.colNum), index = y * colnum + x,minenum;//if already registered security The IF (me.tempSafeArea.indexOf (index)! =-1) {return;} Minenum = minenumdata[index];//Record the security Zone Me.tempSafeArea.push (index);//If there is no danger around the perimeter of the security zone, see if the upper and lower left and right areas are safe if (Minenum = = 0) {// Left if (x>0) {Me._getlrudsafearea (x-1, y);} Right if (x< (colNum-1)) {Me._getlrudsafearea (x+1, y);} Upper if (y>0) {Me._getlrudsafearea (x, y-1);} The bottom if (y< (rowNum-1)) {Me._getlrudsafearea (x, y+1);}}},_setsafebgcolor:function (Allsafearea) {var me = this, Minenumdata = Me.minenumdata,i, len, $tds = Me. $table. Find (' TD '), $TD; for (i=0,len=allsafearea.length; i<len; i++) {$ TD = $ ($TDS. Get (Allsafearea[i])), if ($td. Hasclass (' Init-color ')) {$td. Removeclass (' Init-color '). AddClass (' Open-color '). html (Minenumdata[allsafearea[i] | | ‘ ‘);}}},
Each click to determine whether to win _iswin:function () {var me = this;if (me. $table. Find ('. Init-color,.flag-color '). Size () = = Me.settings.mineNum) {return true;} return false;},
Show all mined areas _showmine:function () {var me = this,i, len,mineposition = me.mineposition, $tds = Me. $table. Find (' TD '); for (I=0, Len=mineposition.length; i<len; i++) {$ ($tds [mineposition[i]]). addclass (' Mine-color ');}}); /jquery Plugin $.fn.minefield = function (options) {return This.each (function (index, DOM) {New Minefield (options, DOM);});};} ) (window, jQuery);
A long time wood to blog Park, today to present a weekend to play minesweeper game ~ ~
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
