JavaScript mini-game-flop Memory game

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