Mine clearance is a very popular game. The goal of the game is to find all non-ray grids in the shortest time based on the number displayed by clicking the grid, while avoiding thunder. Today, let's take a look at how to use javascript to implement the code of this mini-game, which is actually very simple. There is not much nonsense here.
Mine clearance-JavaScript Mine SweeperScript var $ = function (id) {return document. getElementById (id)}, MouseButton = LeftMouse = 0, // count the double key click. The mouseup event is set to 0, and the mousedown event is + 1. When the MouseButton = 2 indicates that the double key is clicked simultaneously; whether to press the left mouse button. When the left mouse button is pressed, the value 1 is released. The value 0 FlagImg = new Image (), HappyImg = new Image (), MineImg = new Image () is released (), sadImg = new Image (), SuccessImg = new Image (), WhichButton = function (e) {e = e | window. event; var B = getOs (); if (B! = 2) {// non FF switch (e. button) {case 2: return 0; case 0: return B = 1?; // B = 1, IE default: return 1 ;}} else {/FF return e. which = 3?; }}, OMine = {MaxX: 9, MaxY: 9, // The maximum coordinate MineCount: 10, // defines the number of mines. You can change it to FlagCount: 0, // Number of marked Flag OpenedCount: 0, // Number of Opened areas MaxOpenCount: 0, /// maximum number of regions to be opened // when OpenedCount = MaxOpenCount & FlagCount = MineCount, determine whether the game has ended successfully. Mine: [], GameOver: false, // true indicates that the game fails to end Success: false, // true indicates that the game has ended successfully. aClear: [], // The fInit is initialized when the temporary array is enabled. // when the page is refreshed: function () {var T = this, MaxX = T. maxX, MaxY = T. maxY, nX, nY = MaxY, MineCount = T. mineCount, AStr = ['
'], I = 0, TAr, TMine = T. Mine; T. MaxOpenCount = MaxX * MaxY-MineCount; while (nY --) {AStr [++ I] ='
'; TAr = TMine [nY] = []; nX = MaxX; while (nX --) {AStr [++ I] ='
| | '; TAr [nX] = {Mine: 0, // 0 indicates no thunder, 1 indicates a thunder State: 0, // 0 indicates not enabled, 1 indicates that the left button is enabled, 2: Right-click the MineCount: 0 // There are several mines around} AStr [++ I] ='
';} AStr [++ I] ='
'; $ ('Dmap '). innerHTML = T. initStr = AStr. join (''); $ ('txtflagcount '). value = MineCount; T. fInitMine (); $ ('btnrefreshmap '). src =' http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif '; T. gameOver = T. success = false; T. openedCount = T. flagCount = T. aClear. lenght = 0 ;}, // For the convenience of cyclic assignment, XY is used to repeat the array assignment, so when calling it, you need to reverse it back. // For example, if you want to obtain whether the grid has thunder, use OMine. fGetMine (x, y ). mine; fGetMine: function (X, Y) {return this. mine [Y] [X]}, // only when you start again, do not initialize the Big Table character fRefreshMap: function () {var T = this; $ ('dmap '). innerHTML = T. initStr; T. fResetOMine (); // you must first reset OMine and then reset 99 record T. fInitMine (); T. gameOver = T. success = false; $ ('btnrefreshmap '). src =' http://sandbox.runjs.cn/uploads/rs/202/xyovf5xj/happy.gif '; $ ('Txtflagcount '). value = T. mineCount; T. openedCount = T. flagCount = T. aClear. lenght = 0 ;}, // reset OMine. mine array fResetOMine: function () {var T = this, MaxY = T. maxY, MaxX = T. maxX, X, Y = MaxY, M, Mine = T. mine, TAr; while (Y --) {X = MaxX; TAr = Mine [Y]; while (X --) (M = TAr [X]). mine = M. state = M. mineCount = 0 ;}}, // initialize the array fInitMine: function () {var T = this, MaxX = T. maxX, MaxY = T. maxY, a, fGetMine = T. fGetMine, aOld = [], x, y = MaxY, n = 0, l = T. mineCou Nt, xRand; // a random number while (y --) {x = MaxX; while (x --) aOld [n ++] = [x, y];} while (l --) {a = aOld [xRand = Math. floor (Math. random () * (n-1)]; T. fGetMine (a [0], a [1]). mine = 1; aOld. splice (xRand, 1); -- n ;}}, // fButtonMouseOver: function (X, Y) {var T = this; switch (MouseButton) when the mouse moves to a grid) {case 2: // var arr = T. fGetAround (X, Y), I = arr. length, TAr; while (I --) T. fButtonDown (TAr = arr [I]) [0], TAr [1]); case 1: LeftMouse = 1 && T. fButtonDown (X, Y); // The left button is pressed}. // when the mouse moves out of a grid, fButtonMouseOut: function (X, Y) {var T = this; switch (MouseButton) {case 2: // status var arr = T. fGetAround (X, Y), I = arr. length, TAr; while (I --) T. fButtonUp (TAr = arr [I]) [0], TAr [1]); case 1: LeftMouse = 1 & T. fButtonUp (X, Y); // The left button is pressed }}, // The lattice that is not enabled when the mouse is pressed fButtonDown: function (X, Y) {var srcEle = $ ('img '+ X +' _ '+ Y); srcEle. className = 'normal' & (srcEle. className = 'm0 ') ;}, // Let the disabled and displayed the pressed grid reply Normal fButtonUp: function (X, Y) {var srcEle = $ ('img '+ X +' _ '+ Y); srcEle. className = 'm0 '&&! This. fGetMine (X, Y ). state & (srcEle. className = 'normal');}, // obtain the coordinates fGetAround: function (X, Y) {var TX, TY, I = 8, MX = this. maxX-1, MY = this. maxY-1, Arr = [[-], [-1,-1], [0,-1], [1,-1], [], [0, 1], [-1, 1], newArr = [], TAr; while (I --) {TX = X + (TAr = Arr [I]) [0]; TY = Y + TAr [1];! (TX <0 | TX> MX | TY <0 | TY> MY) & newArr. push ([TX, TY]);} return newArr;}, // press fMouseDown on the grid: function (X, Y, evt) {var T = this; if (T. gameOver) {alert ('game failed, make persistent efforts! '); Return;} if (T. Success) {alert (' congratulations to the game! Another round? '); Return;} var srcEle = $ ('img' + X + '_' + Y), ObXY = T. fGetMine (X, Y), arr, I, TAr; ++ MouseButton; evt = evt | window. event; switch (MouseButton) {case 2: arr = T. fGetAround (X, Y); I = arr. length; while (I --) T. fButtonDown (TAr = arr [I]) [0], TAr [1]); break; case 1: if (WhichButton (evt) {LeftMouse = 1; T. fButtonDown (X, Y);} else {switch (ObXY. state) {case 0: ObXY. state = 2; srcEle. className = 'flag'; -- $ ('txtflagcount '). value; ++ T. FlagCount; break; case 2: ObXY. state = 0; srcEle. className = 'normal'; ++ $ ('txtflagcount '). value; -- T. flagCount ;}}}, // fMouseUp: function (X, Y, evt) {var T = this; evt = evt | window. event; var srcEle =$ ('img '+ X +' _ '+ Y), ObXY = T. fGetMine (X, Y), arr, I, TAr; switch (MouseButton) {case 2: // MouseDown for both keys click and press, any key is determined to be a double key. LeftMouse = 0; // The mouse is displayed, and the grid displayed as pressed is restored to arr = T. fGetAround (X, Y); I = arr. length; while (I --) T. f ButtonUp (TAr = arr [I]) [0], TAr [1]);! ObXY. state & T. fButtonUp (X, Y); ObXY. state = 1 & ObXY. mineCount & T. fOpenFlagMine (X, Y); break; case 1: // when MouseDown is clicked as a key, MouseUp determines that if (WhichButton (evt) is played as a key )) {// It takes effect only when the State is set to 0. It has nothing to do with thunder. LeftMouse = 0; if (ObXY. state) {break;} ObXY. mine? (// Thunder, end the Bureau T. fFail (), srcEle. className = 'boom ') :( ObXY. state = 1, // set T to enabled before the stack is pressed. aClear. push ([X, Y]), T. fClearMine ()} MouseButton = 0; if (T. openedCount = T. maxOpenCount & T. flagCount = T. mineCount) {T. fSuccess (); alert ('Congratulations to the game! Another round? '); Return;} // when the remaining number of unopened grids = the number of remaining flags, the system automatically completes T. maxOpenCount + T. mineCount-T.OpenedCount-T.FlagCount ==$ ('txtflagcount '). value & (T. fSuccess (), T. fAutoFlag (), alert ('Congratulations to the game! Another round? ')}, // Automatically fill in the thunder fAutoFlag: function () {var T = this, nX, nY = T. maxY, MaxX = T. maxX, Mine = T. mine, TAr; while (nY --) {nX = MaxX; TAr = Mine [nY]; while (nX --)! TAr [nX]. state & ($ ('img '+ nX +' _ '+ nY ). className = 'flag') ;}$ ('txtflagcount '). value = 0 ;}, // recursive thunder fClearMine: function () {var T = this; if (T. aClear. length = 0) {return} + + T. openedCount; var Limit = T. aClear. pop (), X = release [0], Y = release [1], TX, TY, aTmpClear = [], // a temporary array srcEle =$ ('img '+ X +' _ '+ Y), ObXY, ObTXTY, countMine = 0, // obtain the number of surrounding mines // arr = T in the 8 direction starting from the left. fGetAround (X, Y), I = arr. length, TAr; while (I --) {// TX, TY obtains the coordinates (ObTXTY = T. FGetMine (TX = (TAr = arr [I]) [0], TY = TAr [1]). Mine = 1 & ++ countMine ;! ObTXTY. state & aTmpClear. push ([TX, TY]);} ObXY = T. fGetMine (X, Y); ObXY. mineCount = countMine; srcEle. className = 'M' + countMine; if (! CountMine) {Array. prototype. push. apply (T. aClear, aTmpClear); I = aTmpClear. length; while (I --) T. fGetMine (TAr = aTmpClear [I]) [0], TAr [1]). state = 1;} else {getOs () = 2? SrcEle. textContent = countMine: srcEle. innerText = countMine} T. fClearMine () ;}, // obtain double bond secondary enable fOpenFlagMine: function (X, Y) {var T = this, FlagCount = 0, TX, TY, ObXY, ObTXTY, aTmpClear = [], FlagErr = false, arr = T. fGetAround (X, Y), I = arr. length, TAr; while (I --) {// TX, TY get the coordinates around the grid ObTXTY = T. fGetMine (TX = (TAr = arr [I]) [0], TY = TAr [1]); switch (ObTXTY. state) {case 0: // The flag is not enabled! ObTXTY. mine & aTmpClear. push ([TX, TY]); // when there is no thunder or flag, add it to the array opened by the secondary engineer} break; case 2: // mark the flag ++ FlagCount; // as long as the flag is marked, no matter whether it is correct or not, the number of tags is + 1! ObTXTY. Mine & (FlagErr = true); // flag, flag, error, if (FlagCount
0) return 1; if (isFirefox = navigator. userAgent. indexOf ("Firefox")> 0) return 2; if (isSafari = navigator. userAgent. indexOf ("Safari")> 0) return 3; if (isCamino = navigator. userAgent. indexOf ("Camino")> 0) return 4; if (isMozilla = navigator. userAgent. indexOf ("Gecko/")> 0) return 5; return 0 ;}; FlagImg. src = 'HTTP: // response
| |
|
ElementaryIntermediateAdvanced |
The above is all the content of this article. I hope you will like it.
