Flop Memory Game Source
1. There are 8 pictures, each picture to be put two times, generate the following array, a length of 16,[0,1,2,3,4,5,6,7,0,1,2,3,4,5,6,7] where 22 the same represents two identical pictures, 0 corresponding folder image under the 0.jpg, the rest is similar.
var randarr = []; for (var j = 0; J < 2;j++) { for (var i = 0; i < m; i++) { Randarr.pu SH (i); } }
2. Pass the above array to random (), scramble the contents of the array, and scramble the picture (random swap position).
function Random (data) { // randomly scrambling array for (var i = data.length-1; I >=0; i-- ) { var randomindex = Math.floor (Math.random () * (i+1)); var itematindex = Data[randomindex]; = Data[i]; = itematindex; }
16 positions, probability problem, first position, 16 selection 1, second position 15 1 ... The last 1 is selected 1. So I value is changed from big to small
3. To display the picture on the screen, create a two-dimensional array and then pass in the scrambled image array.
Note: JS is not allowed for multidimensional arrays , so-called two-dimensional arrays are arrays of nesting. as var test = [["0", "0"],["1", "1"],["2", "2"]], it is important to understand the map () nesting in the program.
functionArrs (n,data) {//generate coordinate "two-dimensional" arrays vararr = []; for(vari = 0; I < n; i++) {Arr[i]= []; for(varj = 0; J < N; J + +) {Arr[i].push (j); } } //put the scrambled array in the "two-dimensional" array vari = 0; varres = Arr.map (function(BA) {returnBa.map (function(BB) {i++returnData[i-1] }); }); IMG (RES)}
3.1 Description of the map () traversal
It has a return value and can return
Arr[].map (function (Value,index,array) {
Do something
Return XXX
})
Parameter: The current item in the value array, the index of the current item of index, array original array, and the latter two optional;
The callback function in map supports return value, return is XXX, equivalent to the array of the item into XXX (does not affect the original array, but the equivalent of a copy of the original array , the clone of this part of the array to change the corresponding item)
var ary = [12,23,24,42,1]; var res = Ary.map (function (item,index,input) { return item*10; }) Console.log (res); // -->[120,230,240,420,10]; A copy of the original array was copied and modified console.log (ary); // -->[12,23,24,42,1]; The original array has not changed
The application of 3.2 map () in the game
var res = Arr.map (function(BA) { return ba.map (function(BB) { i+ +; return data[i-1];}) ;
Arr () is the "two-dimensional" array, which is why the map () is nested, if it is a 4x4 array [[xx,xx,xx,xx], [xx,xx,xx,xx],[xx,xx,xx,xx],[xx,xx,xx,xx] The yellow shaded section executes the second map (), returns a new array after the [Yy,yy,yy,yy], executes sequentially, and then produces a new array after the execution of the 4 nested arrays [[Yy,yy,yy,yy],[yy,yy,yy,yy],[yy,yy,yy,yy] , [Yy,yy,yy,yy]], assigned to Res.
At this point, each picture has its own coordinates.
4. Display the picture
functionimg (resdata) {//display pictures according to coordinates varNewimg = []; for(vari = 0; i < resdata.length; i++){ for(varj = 0; J < resdata[i].length;j++) {Newimg.push (resdata[i][j]); } } for(vari = 0; i < newimg.length; i++) { varstr = "<li value=" +newimg[i]+ ">" + i + "</li>"; $("#grid"). append (str); $(' Li:eq (' + i + ') '). HTML ("<div class= ' pai ' ><div class= ' back ' ></div><div class= ' front ' ></div></ Div> "); }; }
Understanding the array nesting, Resdata.length will not understand the error.
: the EQ () selector selects the element with the specified index value.
Add a piece to the back and front of Pai (card), the 0,1,2,3,4,5,6,7 in the array corresponds to the 0.jpg,1.jpg in the folder, and so on.
First randarr[] (for an array of folder slices), data[] (randomly scrambled array), res[give each picture a coordinate]-> newimg[] (show pictures)
The "Two-dimensional" array becomes a one-dimensional array newimg[], so Newimg.length is 16. and Newimg[i] is one of the 0-7.
The reload method, which forces the browser to refresh the current page.
Syntax: Location.reload ([bforceget]) parameter: bforceget, optional parameter, default is False, the current page is taken from the client cache. True, the latest page from the server is taken as a get, equivalent to the client clicking F5 ("Refresh")
JavaScript mini-game-flop Memory game