Share your own game clearance game with JS-javascript tips-js tutorial

JQuery is referenced, saving a lot of judgment by clicking the mouse. The interface is clearly a copy of Windows's mine clearance, detailed content notes are included, interested friends refer to the following reference jQuery, saving a lot of mouse clicks on the judgment. The interface is clearly a copy of Windows's mine clearance. The detailed content is included in the notes, so I will not be so embarrassed ~

First ~

JQuery is referenced, saving a lot of judgment by clicking the mouse.

The interface is clearly a copy of Windows clearance.

The detailed content is included in the comments, so I won't be so embarrassed ~

JS Section

Var mineArray, // mine array lastNum, // remaining number of mines countNum, // Number of unopened blocks inGame = 0, // game status, 0 is the end, 1 is in progress, 2 is initialization completed but startTime is not started; // start time // The following operation 1 indicates opening a square, and operation 2 indicates marking a flag, operation 3 indicates marking a question mark. Operation 4 indicates that if all the mines around a block are marked, the remaining blocks around it are dug $ (function () {$ ('# main '). mouseup (function (e) {var clicked = emerge (e.tar get), id = clicked. attr ('id'), cX = parseInt (id. substring (1, id. indexOf ('-'), // X coordinate cY = parseInt (id. substring (id. indexOf ('-') + 1 )); // Y coordinate if (inGame = 1) {if (e. which = 1) {if (clicked. hasClass ('hidd ')&&! Clicked. hasClass ('flag') {openBlock (cX, cY); // if (! Clicked. hasClass ('den den ') {openNearBlock (cX, cY); // It is troublesome to click both the left and right keys, therefore, use the left-click button to implement operation 4} else if (e. which = 3 & clicked. hasClass ('den den ') {// right-click operation 2. if the question mark is allowed, you can perform Operation 3 if (clicked. hasClass ('flag') {clicked. removeClass ('flag'); if ($ ('# check '). attr ('checked') clicked. addClass ('check'); lastNum ++; countNum ++;} else if (clicked. hasClass ('check') {clicked. removeClass ('check');} else {click Ed. addClass ('flag'); lastNum --; countNum -- ;}$ ('# lastnum '). text (lastNum) ;}if (lastNum = countNum) endGame (1); // when the remaining blocks are thunder, the game should be ended directly, therefore, when the number of remaining mines is equal to the number of unopened blocks, the game is terminated.} else if (inGame = 2) {if (e. which = 1) {// After initialization, you can only click the left button to start the game openBlock (cX, cY); inGame = 1; var now = new Date (); startTime = now. getTime (); timer () ;}}); $ ('# main '). bind ('textmenu ', function () {return false ;}); // block the default right-click event }); // Initialize function init (x, y, mine) {countNum = x * y; inGame = 2; lastNum = mine; mineArray = new Array (y + 2); $. each (mineArray, function (key) {mineArray [key] = new Array (x + 2) ;}); for (var I = 1; I <= y; I ++) {for (var j = 1; j <= x; j ++) {mineArray [I] [j] = 0 ;}} while (mine> 0) {// random mine,-1 is Ray var I = Math. ceil (Math. random () * y); var j = Math. ceil (Math. random () * x); if (mineArray [I] [j]! =-1) {mineArray [I] [j] =-1; mine -- ;}} for (var I = 1; I <= y; I ++) {// traverse the mine array and count the number of mines around each grid for (var j = 1; j <= x; j ++) {if (mineArray [I] [j]! =-1) {if (I> 1 & j> 1 & mineArray [I-1] [j-1] =-1) mineArray [I] [j] ++; if (I> 1 & mineArray [I-1] [j] =-1) mineArray [I] [j] ++; if (I> 1 & j <x & mineArray [I-1] [j + 1] =-1) mineArray [I] [j] ++; if (j <x & mineArray [I] [j + 1] =-1) mineArray [I] [j] ++; if (I <y & j <x & mineArray [I + 1] [j + 1] =-1) mineArray [I] [j] ++; if (I <y & mineArray [I + 1] [j] =-1) mineArray [I] [j] ++; if (I <y & j> 1 & mineArray [I + 1] [j-1] =-1) mineArray [I] [j] ++; if (j> 1 & mineArray [I] [j-1] =-1) mineArray [I] [j] ++ ;}} var block = ''; for (var I = 1, row = mineArray. length-1; I <row; I ++) {for (var j = 1, col = mineArray [0]. length-1; j <col; j ++) {block + ='
';}}('{Main'}.html (block ). width (x * 20 + 1 ). height (y * 20 + 1 ). show (); // plot ('{warning'}.html (''); $ ('# submenu '). show (); $ ('# lastnum '). text (lastNum);} // uncover the square function openBlock (x, y) {var current =$ ('# B' + x + '-' + y ); if (mineArray [x] [y] =-1) {if (inGame = 1) {// when the game is in progress, the current game will fail to end. addClass ('cbomb'); endGame ();} else if (inGame = 2) {// if the game has not started after initialization, reinitialize the reinitialization of the mine array and then uncover this square, to ensure that the first click does not touch Lei I Nit (mineArray [0]. length-2, mineArray. length-2, lastNum); openBlock (x, y);} else {// when the game ends, uncover all squares and mark the location of mines if (! Current. hasClass ('flag') current. addClass ('bomb') ;}} else if (mineArray [x] [y]> 0) {if (current. hasClass ('flag ') {// If a flag is marked on the mine-free square, if the square around it is affected when performing operation 4, this triggers a failure to end the current game. addClass ('wrong '); if (inGame) endGame ();} else {current.html (mineArray [x] [y]). addClass ('num' + mineArray [x] [y]). removeClass ('did'); // displays the number of surrounding mines if (current. hasClass ('check') current. removeClass ('check'); if (inGame) countNum --;} Else {if (current. hasClass ('flag') {// same as current. addClass ('wrong '); if (inGame) endGame ();} else {current. removeClass ('ddn'); if (current. hasClass ('check') current. removeClass ('check'); if (inGame) {// when you click the surrounding no-ray block, the countNum --; var row = mineArray is automatically opened. length-2, col = mineArray [0]. length-2; if (x> 1 & y> 1 & $ ('# B' + (x-1) + '-' + (y-1 )). hasClass ('den den ') openBlock (x- 1, y-1); if (x> 1 & $ ('# B' + (x-1) + '-' + y ). hasClass ('den den ') openBlock (x-1, y); if (x> 1 & y <col & $ (' # B '+ (x-1) + '-' + (y + 1 )). hasClass ('den den ') openBlock (x-1, y + 1 ); if (y <col & $ ('# B' + x + '-' + (y + 1 )). hasClass ('den den ') openBlock (x, y + 1); if (x <row & y <col & $ (' # B '+ (x + 1) + '-' + (y + 1 )). hasClass ('den den ') openBlock (x + 1, y + 1); if (x <row & $ ('# B '+ (x + 1) +'-'+ y ). hasClass ('den den ') openBlock (x + 1, y); if (x <row & y> 1 & $ (' # B '+ (x + 1) + '-' + (y-1 )). hasClass ('den den ') openBlock (x + 1, y-1 ); if (y> 1 & $ ('# B' + x + '-' + (y-1 )). hasClass ('den den ') openBlock (x, y-1) ;}}// uncover the square function openNearBlock (x, y) That is adjacent to the grid and confirms that there is no thunder) {var flagNum = 0, hiddenNum = 0; for (I = x-1; I <x + 2; I ++) {for (j = y-1; j <y + 2; j ++) {If (mineArray [I] [j]! = Undefined) {if ($ ('# B' + I + '-' + j ). hasClass ('flag') flagNum ++; // count the number of flags and unopened squares around the square if ($ ('# B' + I + '-' + j ). hasClass ('den den ') hiddenNum ++ ;}}if (flagNum = mineArray [x] [y] & hiddenNum> flagNum) {// when the number of banners is equal to the number of mines and there is a square that has not been uncovered and has not been flushed, uncover it for (I = x-1; I <x + 2; I ++) {for (j = y-1; j <y + 2; j ++) {if (mineArray [I] [j]> = 0 & $ ('# B' + I + '-' + j ). hasClass ('den den ') openBlock (I, j );}}} // Timing function timer () {if (inGame = 1) {// timing var now = new Date (), MS = now only in game progress. getTime (); $ ('# Time '). text (Math. ceil (MS-startTime)/1000); if (inGame = 1) setTimeout (function () {timer () ;}, 500 );} else if (inGame = 2) {$ ('# Time '). text ('0') ;}}// end game function endGame (isWin) {inGame = 0; for (var I = 1, row = mineArray. length-1; I <row; I ++) {for (var j = 1, col = mineArray [0]. Length-1; j <col; j ++) {if (isWin) {if ($ ('# B' + I + '-' + j ). hasClass ('hiddy ')&&! $ ('# B' + I + '-' + j ). hasClass ('flag') $ ('# B' + I + '-' + j ). addClass ('flag'); lastNum = 0; $ ('# lastnum '). text (lastNum) ;}else {openBlock (I, j) ;}}$ ('# warning '). text (isWin? 'You Win! ':' You Lose! ');}

HTML section

Intermediate and advancedMark (?) 
 
Remaining number of mines: Time: seconds
 
 

CSS Section

body{background:#fff;font-size:14px;} #submenu{display:none;} #warning{color:#ff0000;} #main{background:#ddd;border:1px solid #888;display:none;position:relative;} #main p{border:1px solid #888;font-weight:bold;height:19px;height:21px\9;line-height:18px;cursor:default;position:absolute;text-align:center;width:19px;width:21px\9;} .hidden{background:url(mine.gif) 0 0;} .flag{background:url(mine.gif) -19px 0;} .check{background:url(mine.gif) -38px 0;} .bomb{background:url(mine.gif) -57px 0;} .cbomb{background:url(mine.gif) -57px 0 #ff0000;} .wrong{background:url(mine.gif) -76px 0;} .num1{color:#0000ff;} .num2{color:#008000;} .num3{color:#ff0000;} .num4{color:#000080;} .num5{color:#800000;} .num6{color:#008080;} .num7{color:#000000;} .num8{color:#808080;} 

The above is a mini-game that I will share with you about my use of JS for mine clearance. I hope it will be helpful to you.