How to Create a puzzle game or a jQuery puzzle game

How to Create a puzzle game or a jQuery puzzle 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. [-] ...... (I use this)

[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]

All of them use [0,-150,-300,-450] values (that is, the double value of the image height and width of 150 ), so we can use this value to automatically generate an array through () {}.

Copy codeThe Code is as follows:
// This. 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 = [],
P = [];
For (var n = 0; n <this. nCol; n ++ ){
L. push (n * (this. nArea + 1); // generate the [0,151,302,453] grid layout positioning array. Because my effect requires a border (Green Border in the figure), it is different from the css background positioning array.
P. push (-n * this. nArea); // The result is [0,-150,-300,-450 ].
}
For (var I = 0; I <this. nLen; I ++) {// this. nLen is 16
Var t = parseInt (I/this. nCol ),
K = I-this. nCol * t,
AP = [],
AL = [];
AP. push (p [k], p [t], I); // here I add additional I to the css background positioning array, which is used for Step 1 judgment, you do not need to set the css attribute. I set it to the [bg-I] attribute of the tag.
AL. push (l [k], l [t]);
This. aBgp [I] = aP;
This. aLayout [I] = aL;
}

[3] determine whether the task is completed

The second element (div) applies the css background to locate this. aBgp [1] (value: [-, 0, 1]), and the randomly assigned layout is located as this. aLayout [3] (here 3 is randomly generated) (value: [453,0]), then left: pixel PX, 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), and then use it with this. the value of aLayout [1] [] (the 1 index in it is the [bg-I] = 1 of its label attribute is also this. if the index of aBgp [1] is equal, the moving position of this element is correct.

Code details:

Copy codeThe Code is as follows:
/*
Version: 2.0
*/
Function GyPuzzleGame (option ){
This.tar get = optional (option.tar get );
This. data = option. data; // picture data
This. opt = option;
This. nLen = option. count; // Number of puzzles
This. aColLayout = option. aColLayout | [0,151,302,453]; // horizontal layout Array
This. aRowLayout = option. aRowLayout | [0,151]; // vertical layout Array
This. aColBgp = option. aColBgp | [0,-150,-300,-450]; // layout horizontal array
This. aRowBgp = option. aRowBgp | [0,-150]; // vertical array Layout
This. nCol = this. aColLayout. length;
This. nRow = this. aRowLayout. length;
This. aLayout = []; // layout Array
This. aBgp = []; // css background location Array
This. init ();
}
GyPuzzleGame. prototype = {
GetRand: function (a, r ){
Var arry = a. slice (0 ),
NewArry = [];
For (var n = 0; n <r; n ++ ){
Var nR = parseInt (Math. random () * arry. length );
NewArry. push (arry [nR]);
Arry. splice (nR, 1 );
}
Return newArry;
},
SetPos: function (){
For (var I = 0; I <this. nLen; I ++ ){
Var t = parseInt (I/this. nCol ),
L = I-this. nCol * t,
AP = [],
AL = [];
AP. push (this. aColBgp [l], this. aRowBgp [t], I );
AL. push (this. aColLayout [l], this. aRowLayout [t]);
This. aBgp [I] = aP;
This. aLayout [I] = aL;
}
},
IsPass: function (item ){
Var _ that = this,
Is = 0;
Item. each (function (){
Var l = parseint({(this}.css ('left ')),
T = parseint({(this}.css ('top ')),
I = parseInt ($ (this). attr ('data-bgi '));
If (l = _ that. aLayout [I] [0] & t = _ that. aLayout [I] [1]) {
Is ++;
}
});
Return is;
},
CreateDom: function (){
Var layout = this. getRand (this. aLayout, this. nLen );
// Console. log (layout );
For (var n = 0; n <this. nLen; n ++ ){
Var t = parseInt (n/this. nCol ),
L = n-this. nCol * t;
Var html = $ ('<div data-bgi = "' + this. aBgp [n] [2] + '" class = "puzzle_list"> </div> ').
Css ({'left': layout [n] [0] + 'px ',
'Top': layout [n] [1] + 'px ',
'Background-image': 'url ('+ this. data + ')',
'Background-position': this. aBgp [n] [0] + 'px '+ ''+ this. aBgp [n] [1] + 'px'
});
This.tar get. append (html );
}
},
Move: function (){
Var $ div = this.tar get. find ('. puzzle_list '),
_ That = this;
Var hasElem = function (){
Var t = false;
$ Div. each (function (){
If ($ (this). hasClass ("on ")){
T = true;
}
});
Return t;
};
// Click
$ Div. click (function (){
Var $ this = $ (this );
If (hasElem ()&&! $ This. hasClass ("on ")){
Var index = $ ('. on'). index ();
If ($ div. eq (index). is (': animate') | $ this. is (': animate ')){
Return false;
}
Var l = $ div. eq (index). position (). left,
T = $ div. eq (index). position (). top,
Myl = $ this. position (). left,
Myt = $ this. position (). top;
$ (This). animate ({'left': l, 'top': t });
Nvidiv.eq(index).css ({'z-Index': '1'}). animate ({'left': myl, 'top': myt}, function (){
$ (This). removeClass ("on ");
$ (This). find ('span '). remove ();
Certificate (this).css ({'z-Index': '0 '});
If (_ that. isPass ($ div) = _ that. nLen ){
If (typeof _ that. opt. success = 'function '){
_ That. opt. success ({target: _that.tar get });
}
}
});
}
Else {
If ($ this. hasClass ("on ")){
$ This. removeClass ("on ");
$ This. find ('span '). remove ();
}
Else {
$ This. addClass ("on"). append ("<span> </span> ");
}
}
});
},
Init: function (){
// Sets the CSS background and element layout array.
This. setPos ();
// Create Element
This. createDom ();
// Move the image
This. move ();
}
}
// Instance call
New GyPuzzleGame ({
'Data': 'images/03.jpg ',
'Target': '# pa ',
'Count': 8,
'Success': function (opt ){
Opt.tar get. append ('<div class = "puzzle_mask"> </div> <div class = "puzzle_pass"> congratulations </div> ');
}
});