Share your own use of JS to do mine-clearing games _javascript Skills

The reference to jquery saves a lot of mouse clicks on the judgment. The interface is obviously a copy of Windows Minesweeper, detailed content in the comments are there, I will not long-winded ~

Let's take a screenshot first ~

Quotes jquery that saves a lot of mouse clicks on the judgment

The interface is obviously a copy of Windows minesweeper.

Detailed content comments are there, I will not be long-winded ~

JS part

var minearray,//mine array lastnum,//number of mines remaining countnum,//uncovered blocks ingame = 0,//game state, 0 to end, 1 for ongoing, 2 for initialization completed but not started starttime; Start time//The following Operation 1 means to uncover a square, Operation 2 indicates that a flag is marked, Operation 3 indicates a question mark, and Operation 4 means that if all the mines around a block are marked, the remaining squares around it are dug out $ (function () {$ (' #main '). MouseUp (function (e) {var clicked = $ (e.target), id = clicked.attr (' id '), CX = parseint (id.substring (1, Id.indexof ('))),// Click the X coordinate of the square CY = parseint (id.substring (Id.indexof ('-') + 1)); 
The y-coordinate of the clicked square (ingame = 1) {if (E.which = = 1) {if (Clicked.hasclass (' hidden ') &&!clicked.hasclass (' flag ')) { Openblock (Cx,cy); Left-click Not uncovered and no flag box to perform operation 1} else if (!clicked.hasclass (' hidden ')) {opennearblock (cx,cy); So change to use the left mouse button to implement the Operation 4}} else if (E.which = 3 && clicked.hasclass (' hidden ')) {//Right-click Operation 2, if the question mark is allowed to mark, you can perform operation 3 if (Clicke 
D.hasclass (' flag ')) {clicked.removeclass (' flag '); 
if ($ (' #check '). attr (' checked ')) clicked.addclass (' Check '); 
Lastnum + +; 
Countnum + +; 
else if (clicked.hasclass (' check ')) {clicked.removeclass (' check '); } ElSE {clicked.addclass (' flag '); 
Lastnum--; 
Countnum--; 
$ (' #lastnum '). Text (lastnum); } if (Lastnum = = Countnum) endgame (1); Because the last remaining squares are thunder, you should end the game directly, so set to the time when the number of remaining mines and unlocked squares is equal to end game} else if (ingame = 2) {if (E.which = 1) {//////////////////////// 
Block (Cx,cy); 
ingame = 1; 
var now = new Date (); 
StartTime = Now.gettime (); 
Timer (); 
} 
} 
}); $ (' #main '). Bind (' ContextMenu ', function () {return false;}); 
Block default right click event}); 
Initializes the 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 for mine 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 mine array, count the number of mines around each grid for (var j = 1; j <= X; j + +) {if (m)INEARRAY[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 + = ' <div id= ' B ' + i + '-' + j + ' "style= ' Left: ' + (j-1) * + ' px;top: ' + (i-1) * + ' px;" class 
= "hidden" ></div>; } $ (' #maIn '). HTML (blocks). Width (x * + 1). Height (Y * + 1). Show (); 
Drawing $ (' #warning '). html ('); 
$ (' #submenu '). Show (); 
$ (' #lastnum '). Text (lastnum); 
//Uncover Box function Openblock (x, y) {var current = $ (' #b ' + x + '-' + y); 
if (minearray[x][y] = = 1) {if (ingame = = 1) {//accidents when the game is in progress, the failure to end the game current.addclass (' Cbomb '); 
Endgame (); else if (ingame = 2) {//If the game has not started since initialization, reinitialize the mine array, and then uncover the box to ensure that the first click does not accidents init (minearray[0].length-2, Minearray.length-2, L 
Astnum); 
Openblock (x, y); 
else {///At the end of the game you need to uncover all the squares and mark the mine position if (!current.hasclass (' flag ')) Current.addclass (' bomb '); else if (Minearray[x][y] > 0) {if (Current.hasclass (' flag ')) {//If a small flag is marked on a lightning-free square, if the surrounding square performs an operation 4 o'clock ripple to this box, the trigger fails to end the game Curr 
Ent.addclass (' wrong '); 
if (ingame) endgame (); else {current.html (Minearray[x][y]). addclass (' num ' + minearray[x][y]). Removeclass (' hidden ');//show the number of mines around if ( 
Current.hasclass (' check ')) Current.removeclass (' Check '); 
if (ingame) Countnum-; } else {if (Current.hasclass (' flag ')) {//Ibid. Current.addclasS (' wrong '); 
if (ingame) endgame (); 
else {current.removeclass (' hidden '); 
if (Current.hasclass (' Check ')) Current.removeclass (' Check '); 
if (ingame) {//Click to the surrounding box without thunder, automatically uncover the surrounding square countnum-; 
var row = minearray.length-2, col = minearray[0].length-2; 
if (x > 1 && y > 1 && $ (' #b ' + (x-1) + '-' + (y-1)). Hasclass (' hidden ')) Openblock (x-1, y-1); 
if (x > 1 && $ (' #b ' + (x-1) + '-' + y). Hasclass (' hidden ')) Openblock (x-1, y); if (x > 1 && y < col && $ (' #b ' + (x-1) + '-' + (Y + 1)). Hasclass (' hidden ')) Openblock (x-1, y + 1) 
; 
if (Y < col && $ (' #b ' + x + '-' + (Y + 1)). Hasclass (' hidden ')) Openblock (x, y + 1); if (x < row && y < col && $ (' #b ' + (x + 1) + '-' + (Y + 1)). Hasclass (' hidden ')) Openblock (x + 1, y + 
1); 
if (x < row && $ (' #b ' + (x + 1) + '-' + y '). Hasclass (' hidden ')) Openblock (x + 1, y); if (x < row && y > 1 && $ (' #b ' + (x + 1) + '-' + (y-1)). Hasclass (' Hidden ') openblock (x + 1, y-1); 
if (Y > 1 && $ (' #b ' + x + '-' + (y-1)). Hasclass (' hidden ')) Openblock (x, y-1); 
Opennearblock (x, y) {var flagnum = 0, hiddennum = 0) in the vicinity of the grid to confirm the lightning-free block function 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 around the box and the number of uncovered squares if ($ (' #b ' + i + '-' + j). Hasclass (' hidden ')) Hiddennum + +;  }} if (Flagnum = = Minearray[x][y] && hiddennum > Flagnum) {//Flag number equal to mine number and no flag box is opened 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 (' Hidde 
n ')) Openblock (i, j); 
"}}//Timer function timer () {if (ingame = 1) {//Only timed in game var now = new Date (), MS = Now.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 (' hidden ') &&!$ (' #b ' + i + '-' + j). Hasclass (' flag ')) $ (' # 
B ' + i + '-' + j '. addclass (' flag '); 
Lastnum = 0; 
$ (' #lastnum '). Text (lastnum); 
else {Openblock (i, j); }} $ (' #warning '). Text (Iswin? 
' win! ': ' You lose! ');  }

HTML section

<div id= "Menu" > 
<a href= "javascript:;" onclick= "Init (10,10,10);" > Primary </a> 
<a href= "javascript:;" onclick= "Init (16,16,40);" > Intermediate </a> 
<a href= "javascript:;" onclick= "Init (30,16,99);" > Advanced </a> 
<input type= "checkbox" id= "Check"/><label for= "Check" > Do you use tags (?) </label> 
</div> 
<div id= "submenu" > 
number of remaining mines: <span id= "Lastnum" ></span> 
Date: <span id= "Time" ></span> sec 
<span id= "Warning" ></span> 
</div> 

CSS Section

Body{background: #fff; font-size:14px;} 
#submenu {display:none;} 
#warning {color: #ff0000;} 
#main {background: #ddd; border:1px solid #888;d isplay:none;position:relative;} 
#main div{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;} 

The above is a small set for everyone to share their own use of JS to do the minesweeper games, I hope to help you.