jquery makes jigsaw puzzle games _jquery

Source Code Thinking Analysis:

"One" how to generate a picture grid, I think of two ways:

(1) Cut this large picture into 16 pieces and then use the IMG-labeled SRC

(2) Only a large picture, and then each element of the background map with the CSS background-position to cut positioning, so you need 16 of the array [0,0],[-150,0],[-300,0] ... (I use this)

"Two" picture background positioning array and layout positioning array

When you choose to use CSS to locate a slice, you need to generate data.

The required CSS background positioning array is: [0,0],[-150,0],[-300,0],[-450,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 the value of [0,-150,-300,-450] (that is, I define the image as high as the width of 150), so I use this value to automatically generate an array with the for () {}

Copy Code code as follows:

This.ncol here is 4---because my jigsaw is 4*4.
This.narea is 150, is the width of each picture, high (600PX/4)-Large image is 600*600
var L = [],
p = [];
for (Var n=0;n<this.ncol;n++) {
L.push (n (this.narea+1)); Generates an array of layout anchors for the [0,151,302,453] grid, because my effect requires a border (a green border in the figure), so it's not the same as the CSS background positioning array.
P.push (-n*this.narea); Generated [0,-150,-300,-450] is the above, the CSS background positioning value
}
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 give the CSS background positioning array Extra I, is for the 3rd step to use, do not need to have to set the CSS properties, I set it to the label properties [Bg-i]
Al.push (L[k],l[t]);
This.abgp[i] = AP;
This.alayout[i] = AL;
}

"Three" to determine whether to complete

The second element (DIV) applies a CSS background positioning this.abgp[1] (a value of [ -150,0,1]), whereas a randomly assigned layout location is This.alayout[3] (where 3 is randomly generated) (the value is [453,0]), then left : 453px,top:0;

Moving this element changes the value of its letf,top rather than the order of its structure, gets the value of the left,top of the element (if it is moved to left:151px,top:0), and then takes the value of the this.alayout[1] [151,0] (the 1 index inside, that is, the index of the [Bg-i]=1 is also this.abgp[1] of the label attribute itself) is judged, and the equivalence means that the position of the element is correct.

Detailed code:

Copy Code code as follows:

/*
version:2.0
*/
function gypuzzlegame (option) {
This.target = $ (option.target);
This.data = Option.data; Picture data
this.opt = option;
This.nlen = Option.count; How many pieces of puzzle
This.acollayout = Option.acollayout | | [0,151,302,453];//Layout Landscape Array
This.arowlayout = Option.arowlayout | | [0,151];//Layout Vertical Array
THIS.ACOLBGP = OPTION.ACOLBGP | | [0,-150,-300,-450];//Layout Landscape Array
THIS.AROWBGP = OPTION.AROWBGP | | [0,-150];//Layout Vertical Array
This.ncol = This.aColLayout.length;
This.nrow = This.aRowLayout.length;
This.alayout = []; Layout arrays
THIS.ABGP = []; CSS background positioning 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.target.append (HTML);
}
},
Move:function () {
var $div = This.target.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 (': Animated ') | | $this. Is (': Animated ')) {
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});
$div. EQ (index). css ({' Z-index ': ' 1 '}). Animate ({"Left": myl, ' top ': myt},function () {
$ (this). Removeclass ("on");
$ (this). Find (' span '). Remove ();
$ (this). css ({' z-index ': ' 0 '});
if (_that.ispass ($div) = = _that.nlen) {
if (typeof _that.opt.success = = ' function ') {
_that.opt.success ({target:_that.target});
}
}
});
}
else {
if ($this. Hasclass ("on")) {
$this. Removeclass ("on");
$this. Find (' span '). Remove ();
}
else {
$this. addclass ("on"). Append ("<span></span>");
}
}
});
},
Init:function () {
Set CSS background positioning and element layout arrays
This.setpos ();
Creating elements
This.createdom ();
Moving Pictures
This.move ();
}
}
Instance calls
New Gypuzzlegame ({
' Data ': ' Images/03.jpg ',
' Target ': ' #pA ',
' Count ': 8,
' Success ': function (opt) {
Opt.target.append (' <div class= "puzzle_mask" ></div><div class= "Puzzle_pass" > Congratulate Customs </div> ');
}
});