JQuery-jigsaw puzzle games

Personal website online instance: http://www.lgyweb.com/game/

Source code analysis:

[1] how to generate an image mesh:

(1) Cut the big image into 16 small images and use the src label of the img label

(2) There is only one large image, and then the background image of each element is cut and located using the background-position of css. In this way, 16 arrays [0, 0], [-, 0] are required. [-] ......

[2] image background positioning array and layout positioning Array

When you select to use CSS to locate the cut graph, you need to generate data.

The expected css background positioning array is: [0, 0], [-, 0], [-], [-],

[0,-150], [-150,-150], [-300,-150], [-450,-150],

[0,-300], [-150,-300], [-300,-300], [-450,-300],

[0,-450], [-150,-450], [-300,-450], [-450,-450]

They all use the values in [0,-150,-300,-450] (that is, the double value of the image height and width of 150 ).For () {} automatically generates an array

. NCol is 4 here --- because my puzzle is 4*4
// This. nArea is 150, which is the width and height of each image (600px/4) -- the larger image is 600*600
Var l = (n = 0; n <. nCol; n ++ *(. nArea + 1-n * (I = 0; I <. nLen; I ++ t = parseInt (I/this. nCol), k = I -. nCol * = aL. push (l [k], l [t]);. aBgp [I] =. aLayout [I] =

[3] determine whether the task is completed

The second element (div) applies css background positioning. [1] (value: [-, 0, 1]), and the randomly assigned layout is regarded. [3] (here 3 is randomly generated) (value: [453,0]), then left: pixel, top: 0;

Moving this element changes the letf and top values of this element, instead of the structure order. Obtain the left and top values of this element (if it is moved to left: 151px, top: 0. (The 1 index in it is the [bg-I] = 1 of its label attributes. if the value of [1] index is equal, it indicates that the moving position of the element is correct.

 

Code details:

. OWrap =. data = option. data ;. nLen = option. count ;. nArea = option. area ;. aLayout =. nCol = Math. sqrt (. aBgp =. = arry = (n = 0; n <r; n ++ nR = parseInt (Math. random () * 1 l = (n = 0; n <. nCol; n ++ *(. nArea + 1-n * (I = 0; I <. nLen; I ++ t = parseInt (I/this. nCol), k = I -. nCol * =. aBgp [I] =. aLayout [I] = _ that = 0 l = parseint().css ('left' = parseint().css ('top' = parseInt ($ (). attr ('bg-I '(l = _ that. aLayout [I] [0] & t = _ t Hat. aLayout [I] [1 ++ layout =. getRand (. aLayout, (n = 0; n <. nLen; n ++ html =$ ('<div bg-I = "' +. aBgp [n] [2] + '"class =" item "> </div> ''left': layout [n] [0] + 'px' 'top ': layout [n] [1] + 'px ''' background-image': 'url ('+. data + ') ''background-position ':. aBgp [n] [0] + 'px '+ ''+. aBgp [n] [1] + 'px ''width ':. nArea + 'px ''height ':. nArea + 'px '. oWrap. append ('<div class = "mask"> </div> <div class = "mask-btn"> congratulations </div>' $ div =. oWrap. find ('. ite M' = hasElem = t = ($ (). hasClass ("on" = $ div. click (hasElem ()&&! $ (). HasClass ("on" index = $ ('. on '// prevents quick clicks and an error occurs ($ div. eq (index ). is (': animated') | $ (). is (': animated' l ===$ (= $ (). animate ({'left': l, 'top''' z-Index': '1 '}). animate ({'left': myl, 'top': myt },). removeClass ("on" mirror.find('span'mirror.css ({'z-Index': '0' (_ that. isPass ($ div) = ($ (). hasClass ("on "). removeClass ("on "). find ('span '). addClass ("on "). append ("<span> </span>": // sets the layout and background positioning array // creates a puzzle // moves the function instantiation
// Here is the image library, and then randomly take a large image as a parameter and pass it to the instance data = ['images/01.jpg ', 'images/02.jpg ', 'images/03.jpg 'nR = parseInt (Math. random () * LGY_game ({'data': data [nR], 'wrapp ':'. wrap ', 'Count': 16, 'region': 150 });

 

 

Http://www.lgyweb.com/game/