以下是 mootools自定义拼图特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mootools自定义拼图</title>
<link rel="stylesheet" href="c/puzzle.css" media="all" type="text/css" />
<script src="j/mootools.v1.00.js" type="text/javascript"></script>
<script src="j/puzzle-not-compressed.js" type="text/javascript"></script>
</head>
<body>
<h4><a href="#"><img src="i/nuff-respec.gif" alt="nuff-respec" width="55" height="50" /></a></h4>
<div id="content">
<h1>slide puzzle (mootools)</h1>
<a href="#shuffle" onclick="return Puzzle.make(3)">make</a> | <a href="#shuffle" onclick="return Puzzle.shuffle()">shuffle</a> | <a href="#shuffle" onclick="return Puzzle.fix()">fix</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/ricks-cafe.jpg')">ricks cafe</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/red-stripe.jpg')">red stripe</a>
<div id="puzzle"><img src="i/red-stripe.jpg" alt="" width="350" height="263" /></div>
</div>
<div id="content">
<h1>slide puzzle (mootools)</h1>
<a href="#shuffle" onclick="return Puzzle.make(3)">make</a> | <a href="#shuffle" onclick="return Puzzle.shuffle()">shuffle</a> | <a href="#shuffle" onclick="return Puzzle.fix()">fix</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/ricks-cafe.jpg')">ricks cafe</a> | <a href="#shuffle" onclick="return Puzzle.switch_image('i/red-stripe.jpg')">red stripe</a>
<div id="puzzle2"><img src="i/red-stripe.jpg" alt="" width="350" height="263" /></div>
</div>
</body>
</html>
JS代码(mootools.v1.00.js):
//MooTools,My Object Oriented Javascript Tools. Copyright (c) 2006 Valerio Proietti,<http://mad4milk.net>,MIT Style License.eval(function(p,a,c,k,e,d){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--){
d[e(c)]=k[c]||e(c)}
k=[function(e){
return d[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--){
if(k[c]){
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('k 12=9(1i){
k 2A=9(){
f(7.1C&&H[0]!=\'4j\')8 7.1C.21(7,H);
V 8 7}
;
N(k m 1j 7)2A[m]=7[m];
2A.B=1i;
8 2A}
;
12.1S=9(){
}
;
12.B={
K:9(1i){
k 2z=P 7(\'4j\');
k 4l=9(1F,18){
f(!1F.21||!18.21)8 J;
8 9(){
7.1t=1F;
8 18.21(7,H)}
}
;
N(k m 1j 1i){
k 1F=2z[m];
k 18=1i[m];
f(1F&&1F!=18)18=4l(1F,18)||18;
2z[m]=18}
8 P 12(2z)}
,2q:9(1i){
N(k m 1j 1i)7.B[m]=1i[m]}
}
;
1u.K=9(){
k F=H;
F=(F[1])?[F[0],F[1]]:[7,F[0]];
N(k m 1j F[1])F[0][m]=F[1][m];
8 F[0]}
;
1u.36=9(){
N(k i=0;
i<H.I;
i++)H[i].K=12.B.2q}
;
P 1u.36(4C,13,4b,4p,12);
f(3d 2p==\'4m\'){
k 2p=12.1S;
2p.B={
}
}
V{
2p.B.3a=11}
U.K=L.K=1u.K;
k 5x=U;
9 $l(M){
f(M===1o||M===4m)8 J;
k l=3d M;
f(l==\'37\'){
f(M.3a)8\'15\';
f(M.14)8\'1d\';
f(M.5z){
1A(M.5A){
W 1:8\'15\';
W 3:8 M.5B.O(/\\S/)?\'5w\':\'2Q\'}
}
}
8 l}
;
9 $2M(M){
8!!(M||M===0)}
;
9 $5v(M,4o){
8($l(M))?M:4o}
;
9 $4n(2E,3c){
8 1x.5q(1x.4n()*(3c-2E+1)+2E)}
;
9 $3x(1e){
5r(1e);
5s(1e);
8 1o}
;
f(U.5u)U.2Z=U[U.5t?\'5C\':\'3o\']=11;
V f(L.3F&&!L.5D&&!5N.5M)U.4Q=11;
V f(L.5O!=1o)U.39=11;
f(U.3o)4D{
L.5P("5Q",J,11)}
4F(e){
}
;
13.B.2w=13.B.2w||9(n,u){
N(k i=0;
i<7.I;
i++)n.1c(u,7[i],i,7)}
;
13.B.1q=13.B.1q||9(n,u){
k 26=[];
N(k i=0;
i<7.I;
i++){
f(n.1c(u,7[i],i,7))26.14(7[i])}
8 26}
;
13.B.3A=13.B.3A||9(n,u){
k 26=[];
N(k i=0;
i<7.I;
i++)26[i]=n.1c(u,7[i],i,7);
8 26}
;
13.B.2h=13.B.2h||9(n,u){
N(k i=0;
i<7.I;
i++){
f(!n.1c(u,7[i],i,7))8 J}
8 11}
;
13.B.4i=13.B.4i||9(n,u){
N(k i=0;
i<7.I;
i++){
f(n.1c(u,7[i],i,7))8 11}
8 J}
;
13.B.2N=13.B.2N||9(1Y,r){
r=r||0;
f(r<0)r=1x.3c(0,7.I+r);
25(r<7.I){
f(7[r]===1Y)8 r;
r++}
8-1}
;
13.K({
17:13.B.2w,4h:9(1f,I){
1f=1f||0;
f(1f<0)1f=7.I+1f;
I=I||(7.I-1f);
k 1Z=[];
N(k i=0;
i<I;
i++)1Z[i]=7[1f++];
8 1Z}
,34:9(1Y){
k i=0;
25(i<7.I){
f(7[i]===1Y)7.35(i,1);
V i++}
8 7}
,O:9(1Y,r){
8 7.2N(1Y,r)!=-1}
,K:9(1Z){
N(k i=0;
i<1Z.I;
i++)7.14(1Z[i]);
8 7}
,5F:9(1p){
k M={
}
,I=1x.2E(7.I,1p.I);
N(k i=0;
i<I;
i++)M[1p[i]]=7[i];
8 M}
}
);
9 $A(1d,1f,I){
8 13.B.4h.1c(1d,1f,I)}
;
9 $17(4c,n,u){
8 13.B.2w.1c(4c,n,u)}
;
4b.K({
O:9(2t,4a){
8((3d 2t==\'2e\')?P 3M(2t,4a):2t).O(7)}
,4q:9(){
8 3b(7)}
,4A:9(){
8 2g(7)}
,38:9(){
8 7.1T(/-\\D/g,9(1r){
8 1r.3e(1).4g()}
)}
,3J:9(){
8 7.1T(/\\w[A-Z]/g,9(1r){
8(1r.3e(0)+\'-\'+1r.3e(1).2P())}
)}
,3H:9(){
8 7.2P().1T(/\\b[a-z]/g,9(1r){
8 1r.4g()}
)}
,4f:9(){
8 7.1T(/^\\s+|\\s+$/g,\'\')}
,2R:9(){
8 7.1T(/\\s{
2,}
/g,\' \').4f()}
,2J:9(1d){
k 1k=7.1r(/\\d{
1,3}
/g);
8(1k)?1k.2J(1d):J}
,2v:9(1d){
k 1K=7.1r(/^#?(\\w{
1,2}
)(\\w{
1,2}
)(\\w{
1,2}
)$/);
8(1K)?1K.5I(1).2v(1d):J}
}
);
13.K({
2J:9(1d){
f(7.I<3)8 J;
f(7[3]&&(7[3]==0)&&!1d)8\'5R\';
k 1K=[];
N(k i=0;
i<3;
i++){
k 2u=(7[i]-0).5h(16);
1K.14((2u.I==1)?\'0\'+2u:2u)}
8 1d?1K:\'#\'+1K.1G(\'\')}
,2v:9(1d){
f(7.I!=3)8 J;
k 1k=[];
N(k i=0;
i<3;
i++){
1k.14(3b((7[i].I==1)?7[i]+7[i]:7[i],16))}
8 1d?1k:\'1k(\'+1k.1G(\',\')+\')\'}
}
);
4p.K({
4q:9(){
8 3b(7)}
,4A:9(){
8 2g(7)}
}
);
4C.K({
1D:9(q){
k n=7;
q=1u.K({
\'u\':n,\'1g\':J,\'H\':1o,\'1v\':J,\'1M\':J,\'2s\':J}
,q||{
}
);
f($2M(q.H)&&$l(q.H)!=\'1d\')q.H=[q.H];
8 9(1g){
k F;
f(q.1g){
1g=1g||U.1g;
F=[(q.1g===11)?1g:P q.1g(1g)];
f(q.H)F=F.54(q.H)}
V F=q.H||H;
k 1E=9(){
8 n.21(q.u,F)}
;
f(q.1v)8 51(1E,q.1v);
f(q.1M)8 52(1E,q.1M);
f(q.2s){
4D{
8 1E()}
4F(4E){
8 4E}
}
8 1E()}
}
,5b:9(F,u){
8 7.1D({
\'H\':F,\'u\':u}
)}
,2s:9(F,u){
8 7.1D({
\'H\':F,\'u\':u,\'2s\':11}
)()}
,u:9(u,F){
8 7.1D({
\'u\':u,\'H\':F}
)}
,5l:9(u,F){
8 7.1D({
\'u\':u,\'1g\':11,\'H\':F}
)}
,1v:9(2D,u,F){
8 7.1D({
\'1v\':2D,\'u\':u,\'H\':F}
)()}
,1M:9(2D,u,F){
8 7.1D({
\'1M\':2D,\'u\':u,\'H\':F}
)()}
}
);
k X=P 12({
1C:9(h){
f($l(h)==\'2e\')h=L.4Z(h);
8 $(h)}
}
);
9 $(h){
f(!h)8 J;
f(h.4y||[U,L].O(h))8 h;
f($l(h)==\'2e\')h=L.2V(h);
f($l(h)!=\'15\')8 J;
f([\'37\',\'5m\'].O(h.2Y.2P())||h.K)8 h;
h.4y=11;
1J.2H(h);
h.K=1u.K;
f(!(h.3a))h.K(X.B);
8 h}
;
k 1z=P 12({
}
);
P 1u.36(1z);
L.1P=L.2a;
9 $$(){
f(!H)8 J;
f(H.I==1){
f(!H[0])8 J;
f(H[0].4t)8 H[0]}
k R=[];
$17(H,9(Q){
1A($l(Q)){
W\'15\':R.14($(Q));
1y;
W\'2e\':Q=L.1P(Q);
4M:f(Q.I){
$17(Q,9(h){
f($(h))R.14(h)}
)}
}
}
);
R.4t=11;
8 1u.K(R,P 1z)}
;
1z.2r=9(m){
8 9(){
k F=H;
k 2o=[];
k R=11;
$17(7,9(h){
k 1E=h[m].21(h,F);
f($l(1E)!=\'15\')R=J;
2o.14(1E)}
);
f(R)2o=$$(2o);
8 2o}
}
;
X.K=9(1i){
N(k m 1j 1i){
2p.B[m]=1i[m];
X.B[m]=1i[m];
1z.B[m]=1z.2r(m)}
}
;
X.K({
2I:9(h,4r){
h=$(h)||P X(h);
1A(4r){
W"4v":$(h.1w).49(7,h);
1y;
W"4x":f(!h.3m())$(h.1w).2W(7);
V $(h.1w).49(7,h.3m());
1y;
W"4w":h.2W(7)}
8 7}
,5f:9(h){
8 7.2I(h,\'4v\')}
,5n:9(h){
8 7.2I(h,\'4x\')}
,53:9(h){
8 7.2I(h,\'4w\')}
,57:9(h){
7.2W($(h)||P X(h));
8 7}
,34:9(){
7.1w.5H(7);
8 7}
,67:9(4G){
k h=7.6x(4G!==J);
8 $(h)}
,4T:9(h){
h=$(h)||P X(h);
7.1w.6y(h,7);
8 h}
,6z:9(1I){
f(U.2Z){
1A(7.2l()){
W\'Y\':7.6A.3S=1I;
8 7;
W\'3w\':7.2X(\'1I\',1I);
8 7}
}
7.2W(L.6u(1I));
8 7}
,2C:9(T){
8 7.T.O(\'(?:^|\\\\s)\'+T+\'(?:\\\\s|$)\')}
,3O:9(T){
f(!7.2C(T))7.T=(7.T+\' \'+T).2R();
8 7}
,3L:9(T){
7.T=7.T.1T(P 3M(\'(^|\\\\s)\'+T+\'(?:\\\\s|$)\'),\'$1\').2R();
8 7}
,6B:9(T){
8 7.2C(T)?7.3L(T):7.3O(T)}
,3C:9(m,G){
f(m==\'1m\')7.3I(2g(G));
V 7.Y[m.38()]=(G.14)?\'1k(\'+G.1G(\',\')+\')\':G;
8 7}
,4u:9(1h){
1A($l(1h)){
W\'37\':N(k m 1j 1h)7.3C(m,1h[m]);
1y;
W\'2e\':7.Y.3S=1h}
8 7}
,3I:9(1m){
f(1m==0){
f(7.Y.2T!="3k")7.Y.2T="3k"}
V{
f(7.Y.2T!="3E")7.Y.2T="3E"}
f(!7.2K||!7.2K.6I)7.Y.6H=1;
f(U.2Z)7.Y.1q="6n(1m="+1m*62+")";
7.Y.1m=7.1m=1m;
8 7}
,1U:9(m){
m=m.38();
k Y=7.Y[m]||J;
f(!$2M(Y)){
f(m==\'1m\')8 $2M(7.1m)?7.1m:1;
f([\'66\',\'60\'].O(m)){
8[7.1U(m+\'-1H\')||0,7.1U(m+\'-4N\')||0,7.1U(m+\'-4P\')||0,7.1U(m+\'-1L\')||0].1G(\' \')}
f(L.4H)Y=L.4H.5T(7,1o).5W(m.3J());
V f(7.2K)Y=7.2K[m]}
f(Y==\'6f\'&&[\'3p\',\'3j\'].O(m))8 7[\'6a\'+m.3H()]+\'4Y\';
8(Y&&m.O(/4z/i)&&Y.O(/1k/))?Y.2J():Y}
,19:9(l,n){
7.o=7.o||{
}
;
7.o[l]=7.o[l]||{
\'1p\':[],\'3f\':[]}
;
f(!7.o[l].1p.O(n)){
7.o[l].1p.14(n);
f(7.48){
7.48((l==\'43\'&&U.39)?\'41\':l,n,J)}
V{
n=n.u(7);
7.6d(\'33\'+l,n);
7.o[l].3f.14(n)}
}
8 7}
,5X:9(1h){
f(1h){
N(k l 1j 1h)7.19(l,1h[l])}
8 7}
,1R:9(l,n){
f(7.o&&7.o[l]){
k 2O=7.o[l].1p.2N(n);
f(2O==-1)8 7;
k 40=7.o[l].1p.35(2O,1)[0];
f(7.3T){
7.3T((l==\'43\'&&U.39)?\'41\':l,40,J)}
V{
7.6Q(\'33\'+l,7.o[l].3f.35(2O,1)[0])}
}
8 7}
,23:9(l){
f(7.o){
f(l){
f(7.o[l]){
7.o[l].1p.17(9(n){
7.1R(l,n)}
,7);
7.o[l]=1o}
}
V{
N(k 3X 1j 7.o)7.23(3X);
7.o=1o}
}
8 7}
,1W:9(l,F){
f(7.o&&7.o[l]){
7.o[l].1p.17(9(n){
n.u(7,F)()}
,7)}
}
,3n:9(3g){
k h=7[3g+\'3W\'];
25($l(h)==\'2Q\')h=h[3g+\'3W\'];
8 $(h)}
,68:9(){
8 7.3n(\'1F\')}
,3m:9(){
8 7.3n(\'5Y\')}
,5Z:9(){
k h=7.65;
25($l(h)==\'2Q\')h=h.6m;
8 $(h)}
,6G:9(){
k h=7.6P;
25($l(h)==\'2Q\')h=h.6M;
8 $(h)}
,6s:9(){
8 $(7.1w)}
,6r:9(){
8 $$(7.3F)}
,2X:9(m,G){
1A(m){
W\'4L\':7.T=G;
1y;
W\'Y\':7.4u(G);
1y;
W\'2m\':f(U.3o){
k h=$(L.4Z(\'<\'+7.2l()+\' 2m="\'+G+\'" />\'));
$17(7.6L,9(20){
f(20.2m!=\'2m\')h.2X(20.2m,20.G)}
);
f(7.1w)7.4T(h);
8 h}
4M:7.6i(m,G)}
8 7}
,6h:9(1h){
N(k m 1j 1h)7.2X(m,1h[m]);
8 7}
,6g:9(){
7.6c=$A(H).1G(\'\');
8 7}
,5V:9(m){
8(m==\'4L\')?7.T:7.4R(m)}
,2l:9(){
8 7.2Y.2P()}
,6o:9(x,y){
7.3h=x;
7.3i=y}
,2k:9(){
1A(7.2l()){
W\'2G\':f(7.4I!=-1){
k 3l=7.q[7.4I];
8 3l.G||3l.1I}
1y;
W\'6b\':f(!(7.69&&[\'6l\',\'6k\'].O(7.l))&&![\'3k\',\'1I\',\'6F\'].O(7.l))1y;
W\'6J\':8 7.G}
8 J}
,6K:9(){
8{
\'6O\':{
\'x\':7.3h,\'y\':7.3i}
,\'6N\':{
\'x\':7.4K,\'y\':7.4J}
,\'6C\':{
\'x\':7.6q,\'y\':7.6p}
}
}
,31:9(28){
28=28||[];
k h=7,1L=0,1H=0;
6v{
1L+=h.6w||0;
1H+=h.58||0;
h=h.59}
25(h);
28.17(9(15){
1L-=15.3h||0;
1H-=15.3i||0}
);
8{
\'x\':1L,\'y\':1H}
}
,5S:9(){
8 7.31().y}
,5g:9(){
8 7.31().x}
,5d:9(28){
k 3q=7.31(28);
k M={
\'3j\':7.4K,\'3p\':7.4J,\'1L\':3q.x,\'1H\':3q.y}
;
M.4N=M.1L+M.3j;
M.4P=M.1H+M.3p;
8 M}
}
);
U.19=L.19=X.B.19;
U.1R=L.1R=X.B.1R;
U.23=L.23=X.B.23;
k 1J={
R:[],2H:9(15){
1J.R.14(15)}
,4S:9(){
1J.2H(U);
1J.2H(L);
1J.R.17(9(h){
h.23();
N(k p 1j X.B)h[p]=1o;
h.K=1o}
)}
}
;
U.19(\'5J\',1J.4S);
k 3K=P 12({
5o:9(n){
7.1O=7.1O||[];
7.1O.14(n);
8 7}
,45:9(){
f(7.1O&&7.1O.I)7.1O.5E().1v(10,7)}
,5K:9(){
7.1O=[]}
}
);
k 3R=P 12({
19:9(l,n){
f(n!=12.1S){
7.o=7.o||{
}
;
7.o[l]=7.o[l]||[];
f(!7.o[l].O(n))7.o[l].14(n)}
8 7}
,1W:9(l,F,1v){
f(7.o&&7.o[l]){
7.o[l].17(9(n){
n.1D({
\'u\':7,\'1v\':1v,\'H\':F}
)()}
,7)}
8 7}
,1R:9(l,n){
f(7.o&&7.o[l])7.o[l].34(n);
8 7}
}
);
k 3N=P 12({
3P:9(4X,q){
7.q=1u.K(4X,q);
f(7.19){
N(k 2j 1j 7.q){
f(($l(7.q[2j])==\'9\')&&2j.O(/^33[A-Z]/))7.19(2j,7.q[2j])}
}
8 7}
}
);
k 5U=P 12({
1C:9(){
7.2i=$A(H);
7.o={
}
;
7.1X={
}
}
,19:9(l,n){
7.1X[l]=7.1X[l]||{
}
;
7.o[l]=7.o[l]||[];
f(7.o[l].O(n))8 J;
V 7.o[l].14(n);
7.2i.17(9(2d,i){
2d.19(l,7.4W.u(7,[l,2d,i]))}
,7);
8 7}
,4W:9(l,2d,i){
7.1X[l][i]=11;
k 2h=7.2i.2h(9(18,j){
8 7.1X[l][j]||J}
,7);
f(!2h)8;
7.2i.17(9(18,j){
7.1X[l][j]=J}
,7);
7.o[l].17(9(1g){
1g.1c(7,7.2i,2d)}
,7)}
}
);
9 $E(Q,1q){
8($(1q)||L).2y(Q)}
;
9 $5p(Q,1q){
8($(1q)||L).1P(Q)}
;
X.K({
2b:9(Q){
k R=[];
Q.2R().3y(\' \').17(9(2S,i){
k 1b=2S.1r(/^(\\w*|\\*)(?:#([\\w-]+)|\\.([\\w-]+))?(?:\\[(\\w+)(?:([*^$]?=)["\']?([^"\'\\]]*)["\']?)?])?$/);
f(!1b)8;
1s.Q=1b;
1b[1]=1b[1]||\'*\';
f(i==0){
f(1b[2]){
k h=7.2V(1b[2]);
f(!h||((1b[1]!=\'*\')&&(X.B.2l.1c(h)!=1b[1])))8;
R=[h]}
V{
R=$A(7.2a(1b[1]))}
}
V{
R=1z.B.2a.1c(R,1b[1],11);
f(1b[2])R=R.1q(1s.27)}
f(1b[3])R=R.1q(1s.T);
f(1b[4])R=R.1q(1s.20)}
,7);
8 $$(R)}
,2V:9(27){
k h=L.2V(27);
f(!h)8 J;
N(k 1t=h.1w;
1t!=7;
1t=1t.1w){
f(!1t)8 J}
8 h}
,2y:9(Q){
8 7.1P(Q)[0]}
,1P:9(Q){
k 3B=[];
Q.3y(\',\').17(9(2S){
3B.K(7.2b(2S))}
,7);
8 $$(3B)}
}
);
L.K({
5L:9(T){
8 L.2b(\'.\'+T)}
,2y:X.B.2y,2b:X.B.2b,1P:X.B.1P}
);
k 1s={
Q:[],27:9(h){
8(h.27==1s.Q[2])}
,T:9(h){
8(X.B.2C.1c(h,1s.Q[3]))}
,20:9(h){
k 18=h.4R(1s.Q[4]);
f(!18)8 J;
k 3u=1s.Q[5];
f(!3u)8 11;
k G=1s.Q[6];
1A(3u){
W\'*=\':8(18.O(G));
W\'=\':8(18==G);
W\'^=\':8(18.O(\'^\'+G));
W\'$=\':8(18.O(G+\'$\'))}
8 J}
}
;
1z.K({
2a:9(2Y){
k 3v=[];
7.17(9(h){
3v.K(h.2a(2Y))}
);
8 3v}
}
);
U.K({
19:9(l,n){
f(l==\'29\'){
f(7.2U)n();
V f(!7.o||!7.o.29){
k 2c=9(){
f(7.2U)8;
7.2U=11;
f(7.1e)7.1e=$3x(7.1e);
X.B.1W.1c(7,\'29\');
7.o.29=1o}
.u(7);
f(L.2L&&7.4Q){
7.1e=9(){
f([\'2U\',\'4O\'].O(L.2L))2c()}
.1M(50)}
V f(L.2L&&7.2Z){
L.56("<3w 27=4V 5a 5k=5i:5j(0)><\\/3w>");
$(\'4V\').6E=9(){
f(7.2L==\'4O\')2c()}
}
V{
7.19("64",2c);
L.19("6e",2c)}
}
}
X.B.19.1c(7,l,n);
8 7}
,6t:9(4U){
8 7.19(\'29\',4U)}
}
);
k 1a={
}
;
1a.2f=P 12({
42:9(){
8{
3G:12.1S,44:12.1S,3D:12.1S,3Y:1a.47.4s,3r:6j,1N:\'4Y\',3z:11,3Q:50}
}
,1C:9(q){
7.15=7.15||1o;
7.3P(7.42(),q);
f(7.q.1C)7.q.1C.1c(7)}
,46:9(){
k 1Q=P 3U().3V();
f(1Q<7.1Q+7.q.3r){
7.3Z=1Q-7.1Q;
7.3s();
7.2x()}
V{
7.30(11);
7.1n=7.C;
7.2x();
7.1W(\'44\',7.15,10);
7.45()}
}
,3t:9(C){
7.1n=C;
7.2x();
8 7}
,3s:9(){
7.1n=7.2n(7.r,7.C)}
,2n:9(r,C){
8 7.q.3Y(7.3Z,r,(C-r),7.q.3r)}
,1f:9(r,C){
f(!7.q.3z)7.30();
V f(7.1e)8 7;
7.r=r;
7.C=C;
7.1Q=P 3U().3V();
7.1e=7.46.1M(1x.4d(61/7.q.3Q),7);
7.1W(\'3G\',7.15);
8 7}
,30:9(32){
f(!7.1e)8 7;
7.1e=$3x(7.1e);
f(!32)7.1W(\'3D\',7.15);
8 7}
,63:9(r,C){
8 7.1f(r,C)}
,6D:9(32){
8 7.30(32)}
}
);
1a.2f.2q(P 3K);
1a.2f.2q(P 3R);
1a.2f.2q(P 3N);
1a.47={
55:9(t,b,c,d){
8 c*t/d+b}
,4s:9(t,b,c,d){
8-c/2*(1x.5e(1x.5c*t/d)-1)+b}
}
;
1a.22={
2G:9(m,C){
f(m.O(/4z/i))8 7.4e;
f(C.O&&C.O(\' \'))8 7.2r;
8 7.4B}
,1B:9(h,m,1V){
f(!1V.14)1V=[1V];
k r=1V[0],C=1V[1];
f(!C&&C!=0){
C=r;
r=h.1U(m)}
k 1l=7.2G(m,C);
8{
r:1l.1B(r),C:1l.1B(C),1l:1l}
}
}
;
1a.22.4B={
1B:9(G){
8 2g(G)}
,2F:9(r,C,24){
8 24.2n(r,C)}
,2k:9(G,1N){
8 G+1N}
}
;
1a.22.2r={
1B:9(G){
8 G.14?G:G.3y(\' \').3A(9(v){
8 2g(v)}
)}
,2F:9(r,C,24){
k 1n=[];
N(k i=0;
i<r.I;
i++)1n[i]=24.2n(r[i],C[i]);
8 1n}
,2k:9(G,1N){
8 G.1G(1N+\' \')+1N}
}
;
1a.22.4e={
1B:9(G){
8 G.14?G:G.2v(11)}
,2F:9(r,C,24){
k 1n=[];
N(k i=0;
i<r.I;
i++)1n[i]=1x.4d(24.2n(r[i],C[i]));
8 1n}
,2k:9(G){
8\'1k(\'+G.1G(\',\')+\')\'}
}
;
1a.4k=1a.2f.K({
1C:9(h,m,q){
7.15=$(h);
7.m=m;
7.1t(q)}
,5G:9(){
8 7.3t(0)}
,3s:9(){
7.1n=7.1l.2F(7.r,7.C,7)}
,3t:9(C){
7.1l=1a.22.2G(7.m,C);
8 7.1t(7.1l.1B(C))}
,1f:9(r,C){
f(7.1e&&7.q.3z)8 7;
k 2B=1a.22.1B(7.15,7.m,[r,C]);
7.1l=2B.1l;
8 7.1t(2B.r,2B.C)}
,2x:9(){
7.15.3C(7.m,7.1l.2k(7.1n,7.q.1N))}
}
);
X.K({
5y:9(m,q){
8 P 1a.4k(7,m,q)}
}
);
',62,425,'|||||||this|return|function||||||if||el|||var|type|property|fn|events||options|from|||bind|||||||prototype|to|||args|value|arguments|length|false|extend|document|obj|for|test|new|selector|elements||className|window|else|case|Element|style|||true|Class|Array|push|element||each|current|addEvent|Fx|param|call|array|timer|start|event|source|properties|in|rgb|css|opacity|now|null|keys|filter|match|Filters|parent|Object|delay|parentNode|Math|break|Elements|switch|parse|initialize|create|returns|previous|join|top|text|Garbage|hex|left|periodical|unit|chains|getElementsBySelector|time|removeEvent|empty|replace|getStyle|fromTo|fireEvent|checker|item|newArray|attribute|apply|CSS|removeEvents|fx|while|results|id|overflown|domready|getElementsByTagName|getElements|domReady|instance|string|Base|parseFloat|every|instances|option|getValue|getTag|name|compute|items|HTMLElement|implement|Multi|attempt|regex|bit|hexToRgb|forEach|increase|getElement|pr0t0typ3|klass|parsed|hasClass|ms|min|getNow|select|collect|inject|rgbToHex|currentStyle|readyState|chk|indexOf|pos|toLowerCase|whitespace|clean|sel|visibility|loaded|getElementById|appendChild|setProperty|tagName|ie|stop|getPosition|end|on|remove|splice|Native|object|camelCase|gecko|htmlElement|parseInt|max|typeof|charAt|values|what|scrollLeft|scrollTop|width|hidden|opt|getNext|getBrother|ie6|height|position|duration|setNow|set|operator|found|script|clear|split|wait|map|els|setStyle|onCancel|visible|childNodes|onStart|capitalize|setOpacity|hyphenate|Chain|removeClass|RegExp|Options|addClass|setOptions|fps|Events|cssText|removeEventListener|Date|getTime|Sibling|evType|transition|cTime|key|DOMMouseScroll|getOptions|mousewheel|onComplete|callChain|step|Transitions|addEventListener|insertBefore|params|String|iterable|round|Color|trim|toUpperCase|copy|some|noinit|Style|parentize|undefined|random|picked|Number|toInt|where|sineInOut|_elements_extended_|setStyles|before|inside|after|_element_extended_|color|toFloat|Single|Function|try|err|catch|contents|defaultView|selectedIndex|offsetHeight|offsetWidth|class|default|right|complete|bottom|khtml|getAttribute|trash|replaceWith|init|ie_ready|check|defaults|px|createElement||setTimeout|setInterval|injectInside|concat|linear|write|adopt|offsetTop|offsetParent|defer|pass|PI|getCoordinates|cos|injectBefore|getLeft|toString|javascript|void|src|bindAsEventListener|embed|injectAfter|chain|ES|floor|clearTimeout|clearInterval|XMLHttpRequest|ActiveXObject|pick|textnode|Window|effect|nodeName|nodeType|nodeValue|ie7|all|shift|associate|hide|removeChild|slice|unload|clearChain|getElementsByClassName|taintEnabled|navigator|getBoxObjectFor|execCommand|BackgroundImageCache|transparent|getTop|getComputedStyle|Group|getProperty|getPropertyValue|addEvents|next|getFirst|padding|1000|100|custom|load|firstChild|margin|clone|getPrevious|checked|offset|input|innerHTML|attachEvent|DOMContentLoaded|auto|setHTML|setProperties|setAttribute|500|radio|checkbox|nextSibling|alpha|scrollTo|scrollHeight|scrollWidth|getChildren|getParent|onDomReady|createTextNode|do|offsetLeft|cloneNode|replaceChild|appendText|styleSheet|toggleClass|scrollSize|clearTimer|onreadystatechange|password|getLast|zoom|hasLayout|textarea|getSize|attributes|previousSibling|size|scroll|lastChild|detachEvent'.split('|'),0,{
}
))JS代码(puzzle-not-compressed.js):
/* ================================================================This copyright notice must be untouched at all times.The original version of this short url scriptis available at http://www.nuff-respec.com/technology/slide-puzzle-javascript-mootoolsCopyright (c) 2005-2007 Daniel Bulli. All rights reserved.This code may be modified in any way to fit your requirements.author:daniel bullilicense:MIT-style licensehistory:04/26/2007dbulli:Initial version=================================================================== */
var Puzzle ={
/* -------------------------------------------------|PUBLIC FUNCTIONS |----------------------------------------------- */
//CONFIGURABLE'BORDER_WIDTH':5,//BORDER WIDTH'BORDER_COLOR':'#000',//BORDER COLOR'SPEED':200,//TRANSITION SPEED//----------------------------------------------// MAKE PUZZLE//::sets up puzzle from image//::one parameter for number of rows/cols//----------------------------------------------/***Example (4x4):*Puzzle.make(4);
**Probably better to call on load event*window.addEvent('load',Puzzle.make.pass(4));
**/
make:function(how_many){
if (!$('puzzle') || !$E('img','puzzle')){
//NO PUZZLEalert("Sorry no DIV with id #puzzle,OR it does not have an img tag.");
return false;
}
//MINIMAL ERROR CHECKINGif(Puzzle.initialized){
alert('Puzzle ALREADY initialized.');
return false;
}
//STORE HOW MANY COLS/ROWShow_many = parseInt(how_many);
Puzzle.how_many = parseInt(how_many);
//SET INITIAL EMPTY SQUAREPuzzle.empty_x = Puzzle.how_many-1;
Puzzle.empty_y = Puzzle.how_many-1;
//GRAB IMAGE FROM PUZZLE DIVvar puzzle_image = $E('img','puzzle');
//MAKE PUZZLE DIV SAME HEIGHT+WIDTH$('puzzle').setStyles({
width:puzzle_image.width + 'px',height:puzzle_image.height + 'px',overflow:'hidden'}
);
//CALCULATE HEIGHT/WIDTH of puzzle piecesPuzzle.width = Math.round((puzzle_image.width - ((Puzzle.how_many+1) * Puzzle.BORDER_WIDTH)) / how_many);
Puzzle.height = Math.round((puzzle_image.height - ((Puzzle.how_many+1) * Puzzle.BORDER_WIDTH)) / how_many);
//RESET SOLUTION STRINGPuzzle.solution = '';
Puzzle.counter = 0;
//LET's CREATEvar p_num = 0;
Puzzle.piece_arr = new Array();
for(var x=0;
x<how_many;
x++){
for(var y=0;
y<how_many;
y++){
//ADD PIECES EXCEPT FOR LAST SLOTif(!((y == (how_many-1)) && (x == (how_many-1)))){
//ADD TO SOLUTION STRINGPuzzle.solution += ''+x+y;
//ADJUST BACKGROUND POSITION IN EACH PIECEvar b_x = (Puzzle.width + Puzzle.BORDER_WIDTH) * y * -1;
var b_y = (Puzzle.height + Puzzle.BORDER_WIDTH) * x * -1;
//CREATE PIECEvar puzzle_piece = new Element('div');
puzzle_piece.setStyles({
border:Puzzle.BORDER_WIDTH+'px solid '+Puzzle.BORDER_COLOR,'background-image':'url('+puzzle_image.src+')','background-position':b_x +'px ' +b_y+ 'px','overflow':'hidden','position':'absolute','width':Puzzle.width + 'px','margin-left':(b_x*-1) + 'px','margin-top':(b_y*-1) + 'px','height':Puzzle.height + 'px'}
);
//MAKE CLICKABLE WITH A HREFvar puzzle_href = new Element('a');
puzzle_href.appendText('');
puzzle_href.setStyles({
'display':'block','width':Puzzle.width + 'px','height':Puzzle.height + 'px'}
);
puzzle_href.setProperty('href','#');
puzzle_href.onclick = function(){
Puzzle.move(this);
return false;
}
;
//ADD HREF TO PUZZLE PIECEpuzzle_href.injectInside(puzzle_piece);
//STORE X AND Y on PIECEpuzzle_piece.setProperty('p_num',p_num);
puzzle_piece.setProperty('p_x',x);
puzzle_piece.setProperty('p_y',y);
//ADD TO PUZZLE CONTAINERpuzzle_piece.injectAfter($('puzzle').getLast());
}
Puzzle.piece_arr.push(p_num);
p_num++;
}
}
//SET FLAGPuzzle.initialized = true;
//REMOVE ORIGINAL IMAGEpuzzle_image.remove();
return false;
}
,//----------------------------------------------// SHUFFLES PUZZLE//::Puzzle needs to be initialized first//----------------------------------------------/***Example:*Puzzle.shuffle();
**/
shuffle:function(){
//MINIMAL ERROR CHECKINGif(!Puzzle.initialized){
alert('Puzzle not initialized');
return false;
}
Puzzle.counter = 0;
this.auto_move(true);
return false;
}
,//----------------------------------------------// FIXES PUZZLE//::Puzzle needs to be initialized first//----------------------------------------------/***Example:*Puzzle.fix();
**/
fix:function(){
//MINIMAL ERROR CHECKINGif(!Puzzle.initialized){
alert('Puzzle not initialized');
return false;
}
Puzzle.counter = 0;
this.auto_move(false);
return false;
}
,//----------------------------------------------// FIXES PUZZLE//::Puzzle does NOT needs to be initialized first//----------------------------------------------/***Example:*Puzzle.switch_image('i/xyz.gif');
**/
switch_image:function(imageSrc){
this.preload = new Image();
if(Puzzle.initialized){
//if puzzle initialized then switch backgroundsthis.preload.onload = this.do_switch_puzzle_image.bind(this);
}
else{
//if not just switch imagethis.preload.onload = this.do_switch_image.bind(this);
}
this.preload.src = imageSrc;
return false;
}
,//----------------------------------------------// CHECK PUZZLE//::Puzzle needs to be initialized first//::This is auto called in the (move:function)//::- comment out if desired//----------------------------------------------/***Example:*Puzzle.check();
**/
check:function(){
//CREATE CURRENT STRING OF PIECES POSITIONSvar div_string= '';
$$('#puzzle div').each(function(el){
div_string += ''+el.getProperty('p_x')+el.getProperty('p_y');
}
);
if(div_string==Puzzle.solution){
//SUCCESFULalert('Solved in ' + Puzzle.counter + ' tries.');
}
}
,/* -------------------------------------------------|PRIVATE FUNCTIONS (don't call directly) |----------------------------------------------- */
//DON'T TOUCH'how_many':4,//rows'counter':0,//number of tries'empty_x':3,//empty x slot'empty_y':3,//empty y slot'width':3,//width of PIECE'height':3,//height of PIECE'solution':'',//solution string'initialized':false,//initialized'piece_arr':new Array(),//solution string//----------------------------------------------// MOVES PIECE//----------------------------------------------move:function(this_piece_a){
//GET PUZZLE PIECEvar this_piece = this_piece_a.getParent();
//GET PUZZLE CURRENT X and Yvar piece_x = this_piece.getProperty('p_x').toInt();
var piece_y = this_piece.getProperty('p_y').toInt();
var valid_piece = false;
var is_row= false;
var is_col= false;
if((piece_x == Puzzle.empty_x) && ((piece_y == (Puzzle.empty_y-1)) || (piece_y == (Puzzle.empty_y+1)))){
//PIECE IS SAME ROW AS EMPTY SLOTvalid_piece = true;
is_row= true;
}
else if((piece_y == Puzzle.empty_y) && ((piece_x == (Puzzle.empty_x -1)) ||(piece_x == (Puzzle.empty_x +1)))){
//PIECE IS SAME COLUMN AS EMPTY SLOTvalid_piece = true;
is_col= true;
}
if(valid_piece){
Puzzle.counter++;
//GET BEGIN MARGINvar previous_margin = (is_row) ? this_piece.getStyle('margin-left').toInt():this_piece.getStyle('margin-top').toInt();
//GET NEW MARGINvar new_margin= (is_row) ? (Puzzle.width + Puzzle.BORDER_WIDTH) * Puzzle.empty_y:(Puzzle.height + Puzzle.BORDER_WIDTH) * Puzzle.empty_x;
//CREATE NEW SLIDER + MOVEvar s_margin = (is_row) ? new Fx.Style(this_piece,'margin-left',{
duration:Puzzle.SPEED}
):new Fx.Style(this_piece,'margin-top',{
duration:Puzzle.SPEED}
);
s_margin.start(previous_margin,new_margin);
//SET NEW Y OR Xif(is_row){
this_piece.setProperty('p_y',Puzzle.empty_y);
}
else{
this_piece.setProperty('p_x',Puzzle.empty_x);
}
//SET NEW EMPTY SLOTPuzzle.empty_x = piece_x;
Puzzle.empty_y = piece_y;
//CHECK SOLUTION (comment out if needed)this.check();
}
}
,//----------------------------------------------// AUTO MOVES PIECE (from fix or shuffle)//----------------------------------------------auto_move:function(do_shuffle){
var tmp = Puzzle.piece_arr.copy();
//LETS SHUFFLE IF WE ARE SHUFFLINGif(do_shuffle){
tmp.shuffle();
}
var pause_factor = 0;
var index_pos = 0;
$$('#puzzle div').each(function(el){
var p_num = tmp[index_pos];
//el.getProperty('p_num').toInt();
var x = Math.floor(p_num/Puzzle.how_many);
var y = Math.floor(p_num%Puzzle.how_many);
var b_x = (Puzzle.width + Puzzle.BORDER_WIDTH) * y;
var b_y = (Puzzle.height + Puzzle.BORDER_WIDTH) * x;
var l_margin = el.getStyle('margin-left').toInt();
var t_margin = el.getStyle('margin-top').toInt();
if((b_x != l_margin) || (b_y != t_margin)){
var s_l_margin = new Fx.Style(el,'margin-left',{
duration:Puzzle.SPEED}
);
var s_t_margin = new Fx.Style(el,'margin-top',{
duration:Puzzle.SPEED}
);
el.setProperty('p_x',x);
el.setProperty('p_y',y);
s_l_margin.start.pass([l_margin,b_x],s_l_margin).delay(100*pause_factor);
s_t_margin.start.pass([t_margin,b_y],s_t_margin).delay(100*pause_factor);
pause_factor++;
}
index_pos++}
);
var p_num = tmp[index_pos];
//SET INITIAL EMPTY SQUAREPuzzle.empty_x = Math.floor(p_num/Puzzle.how_many);
Puzzle.empty_y = Math.floor(p_num%Puzzle.how_many);
return false;
}
,//----------------------------------------------// SWITCH IMAGE INTO IMAGE TAG//----------------------------------------------do_switch_image:function(){
if (!$('puzzle') && !$E('img','puzzle')){
//NO PUZZLEalert("Sorry no DIV with id #puzzle,OR it does not have an img tag.");
return false;
}
//GRAB REFERENCEvar puzzle_image = $E('img','puzzle');
//CHANGE IMAGE + DIMENSIONSpuzzle_image.src = this.preload.src;
puzzle_image.setProperty('height',this.preload.src.height);
puzzle_image.setProperty('width',this.preload.src.width);
return false;
}
,//----------------------------------------------// SWITCH IMAGE INTO PUZZLE PIECES//----------------------------------------------do_switch_puzzle_image:function(){
//image has changedvar new_src = this.preload.src;
//MAKE PUZZLE DIV SAME HEIGHT+WIDTH$('puzzle').setStyles({
width:this.preload.width + 'px',height:this.preload.height + 'px'}
);
//CALCULATE NEW HEIGHT/WIDTH of puzzle piecesPuzzle.width = Math.round((this.preload.width - (Puzzle.how_many * Puzzle.BORDER_WIDTH)) / Puzzle.how_many);
Puzzle.height = Math.round((this.preload.height - (Puzzle.how_many * Puzzle.BORDER_WIDTH)) / Puzzle.how_many);
var p = 0;
$$('#puzzle div').each(function(el){
//new background positionvar x = Math.floor(p/Puzzle.how_many);
var y = Math.floor(p%Puzzle.how_many);
var b_x = (Puzzle.width + Puzzle.BORDER_WIDTH) * y * -1;
var b_y = (Puzzle.height + Puzzle.BORDER_WIDTH) * x * -1;
el.setStyles({
'background-image':'url('+new_src+')','width':Puzzle.width + 'px','height':Puzzle.height + 'px','background-position':b_x +'px ' +b_y+ 'px'}
);
p++;
}
);
//SHOW IN CORRECT ORDERthis.fix();
}
}
;
/** prototype **/
Array.prototype.shuffle = function (){
for(var rnd,tmp,i=this.length;
i;
rnd=parseInt(Math.random()*i),tmp=this[--i],this[i]=this[rnd],this[rnd]=tmp);
}
;
JS代码(puzzle.js):
var Puzzle={
'BORDER_WIDTH':5,'BORDER_COLOR':'#000','SPEED':200,make:function(how_many){
if(!$('puzzle')||!$E('img','puzzle')){
alert("Sorry no DIV with id #puzzle,OR it does not have an img tag.");
return false}
if(Puzzle.initialized){
alert('Puzzle ALREADY initialized.');
return false}
how_many=parseInt(how_many);
Puzzle.how_many=parseInt(how_many);
Puzzle.empty_x=Puzzle.how_many-1;
Puzzle.empty_y=Puzzle.how_many-1;
var puzzle_image=$E('img','puzzle');
$('puzzle').setStyles({
width:puzzle_image.width+'px',height:puzzle_image.height+'px',overflow:'hidden'}
);
Puzzle.width=Math.round((puzzle_image.width-((Puzzle.how_many+1)*Puzzle.BORDER_WIDTH))/how_many);
Puzzle.height=Math.round((puzzle_image.height-((Puzzle.how_many+1)*Puzzle.BORDER_WIDTH))/how_many);
Puzzle.solution='';
Puzzle.counter=0;
var p_num=0;
Puzzle.piece_arr=new Array();
for(var x=0;
x<how_many;
x++){
for(var y=0;
y<how_many;
y++){
if(!((y==(how_many-1))&&(x==(how_many-1)))){
Puzzle.solution+=''+x+y;
var b_x=(Puzzle.width+Puzzle.BORDER_WIDTH)*y*-1;
var b_y=(Puzzle.height+Puzzle.BORDER_WIDTH)*x*-1;
var puzzle_piece=new Element('div');
puzzle_piece.setStyles({
border:Puzzle.BORDER_WIDTH+'px solid '+Puzzle.BORDER_COLOR,'background-image':'url('+puzzle_image.src+')','background-position':b_x+'px '+b_y+'px','overflow':'hidden','position':'absolute','width':Puzzle.width+'px','margin-left':(b_x*-1)+'px','margin-top':(b_y*-1)+'px','height':Puzzle.height+'px'}
);
var puzzle_href=new Element('a');
puzzle_href.appendText('');
puzzle_href.setStyles({
'display':'block','width':Puzzle.width+'px','height':Puzzle.height+'px'}
);
puzzle_href.setProperty('href','#');
puzzle_href.onclick=function(){
Puzzle.move(this);
return false}
;
puzzle_href.injectInside(puzzle_piece);
puzzle_piece.setProperty('p_num',p_num);
puzzle_piece.setProperty('p_x',x);
puzzle_piece.setProperty('p_y',y);
puzzle_piece.injectAfter($('puzzle').getLast())}
Puzzle.piece_arr.push(p_num);
p_num++}
}
Puzzle.initialized=true;
puzzle_image.remove();
return false}
,shuffle:function(){
if(!Puzzle.initialized){
alert('Puzzle not initialized');
return false}
Puzzle.counter=0;
this.auto_move(true);
return false}
,fix:function(){
if(!Puzzle.initialized){
alert('Puzzle not initialized');
return false}
Puzzle.counter=0;
this.auto_move(false);
return false}
,switch_image:function(imageSrc){
this.preload=new Image();
if(Puzzle.initialized){
this.preload.onload=this.do_switch_puzzle_image.bind(this)}
else{
this.preload.onload=this.do_switch_image.bind(this)}
this.preload.src=imageSrc;
return false}
,check:function(){
var div_string='';
$$('#puzzle div').each(function(el){
div_string+=''+el.getProperty('p_x')+el.getProperty('p_y')}
);
if(div_string==Puzzle.solution){
alert('Solved in '+Puzzle.counter+' tries.')}
}
,'how_many':4,'counter':0,'empty_x':3,'empty_y':3,'width':3,'height':3,'solution':'','initialized':false,'piece_arr':new Array(),move:function(this_piece_a){
var this_piece=this_piece_a.getParent();
var piece_x=this_piece.getProperty('p_x').toInt();
var piece_y=this_piece.getProperty('p_y').toInt();
var valid_piece=false;
var is_row=false;
var is_col=false;
if((piece_x==Puzzle.empty_x)&&((piece_y==(Puzzle.empty_y-1))||(piece_y==(Puzzle.empty_y+1)))){
valid_piece=true;
is_row=true}
else if((piece_y==Puzzle.empty_y)&&((piece_x==(Puzzle.empty_x-1))||(piece_x==(Puzzle.empty_x+1)))){
valid_piece=true;
is_col=true}
if(valid_piece){
Puzzle.counter++;
var previous_margin=(is_row)?this_piece.getStyle('margin-left').toInt():this_piece.getStyle('margin-top').toInt();
var new_margin=(is_row)?(Puzzle.width+Puzzle.BORDER_WIDTH)*Puzzle.empty_y:(Puzzle.height+Puzzle.BORDER_WIDTH)*Puzzle.empty_x;
var s_margin=(is_row)?new Fx.Style(this_piece,'margin-left',{
duration:Puzzle.SPEED}
):new Fx.Style(this_piece,'margin-top',{
duration:Puzzle.SPEED}
);
s_margin.start(previous_margin,new_margin);
if(is_row){
this_piece.setProperty('p_y',Puzzle.empty_y)}
else{
this_piece.setProperty('p_x',Puzzle.empty_x)}
Puzzle.empty_x=piece_x;
Puzzle.empty_y=piece_y;
this.check()}
}
,auto_move:function(do_shuffle){
var tmp=Puzzle.piece_arr.copy();
if(do_shuffle){
tmp.shuffle()}
var pause_factor=0;
var index_pos=0;
$$('#puzzle div').each(function(el){
var p_num=tmp[index_pos];
var x=Math.floor(p_num/Puzzle.how_many);
var y=Math.floor(p_num%Puzzle.how_many);
var b_x=(Puzzle.width+Puzzle.BORDER_WIDTH)*y;
var b_y=(Puzzle.height+Puzzle.BORDER_WIDTH)*x;
var l_margin=el.getStyle('margin-left').toInt();
var t_margin=el.getStyle('margin-top').toInt();
if((b_x!=l_margin)||(b_y!=t_margin)){
var s_l_margin=new Fx.Style(el,'margin-left',{
duration:Puzzle.SPEED}
);
var s_t_margin=new Fx.Style(el,'margin-top',{
duration:Puzzle.SPEED}
);
el.setProperty('p_x',x);
el.setProperty('p_y',y);
s_l_margin.start.pass([l_margin,b_x],s_l_margin).delay(100*pause_factor);
s_t_margin.start.pass([t_margin,b_y],s_t_margin).delay(100*pause_factor);
pause_factor++}
index_pos++}
);
var p_num=tmp[index_pos];
Puzzle.empty_x=Math.floor(p_num/Puzzle.how_many);
Puzzle.empty_y=Math.floor(p_num%Puzzle.how_many);
return false}
,do_switch_image:function(){
if(!$('puzzle')&&!$E('img','puzzle')){
alert("Sorry no DIV with id #puzzle,OR it does not have an img tag.");
return false}
var puzzle_image=$E('img','puzzle');
puzzle_image.src=this.preload.src;
puzzle_image.setProperty('height',this.preload.src.height);
puzzle_image.setProperty('width',this.preload.src.width);
return false}
,do_switch_puzzle_image:function(){
var new_src=this.preload.src;
$('puzzle').setStyles({
width:this.preload.width+'px',height:this.preload.height+'px'}
);
Puzzle.width=Math.round((this.preload.width-(Puzzle.how_many*Puzzle.BORDER_WIDTH))/Puzzle.how_many);
Puzzle.height=Math.round((this.preload.height-(Puzzle.how_many*Puzzle.BORDER_WIDTH))/Puzzle.how_many);
var p=0;
$$('#puzzle div').each(function(el){
var x=Math.floor(p/Puzzle.how_many);
var y=Math.floor(p%Puzzle.how_many);
var b_x=(Puzzle.width+Puzzle.BORDER_WIDTH)*y*-1;
var b_y=(Puzzle.height+Puzzle.BORDER_WIDTH)*x*-1;
el.setStyles({
'background-image':'url('+new_src+')','width':Puzzle.width+'px','height':Puzzle.height+'px','background-position':b_x+'px '+b_y+'px'}
);
p++}
);
this.fix()}
}
;
/** prototype **/
Array.prototype.shuffle = function (){
for(var rnd,tmp,i=this.length;
i;
rnd=parseInt(Math.random()*i),tmp=this[--i],this[i]=this[rnd],this[rnd]=tmp);
}
;
CSS代码(puzzle.css):
/*-----------------------------------------------author:daniel bulliweb:http://www.nuff-respec.com/technology/slide-puzzle-javascript-mootoolsemail:dbulli_puzzle@nuff-respec.com----------------------------------------------- */
/* -- initialize base -- */
*,td,img{margin:0;padding:0;}
img{border:0;}
form,fieldset{font:100%/120% verdana,arial,sans-serif}
p{padding:0 0 0 0;margin:0 0 1em 0}
form label{cursor:pointer}
fieldset{border:none}
input,select,textarea{font-size:100%}
/* -- body -- */
body{background-color:#fff;color:#333436;font-family:"Lucida Sans Unicode","Trebuchet MS",Helvetica,Sans-Serif;font-size:13px;line-height:1.6em;padding:3em 0 3em 50px;width:700px;}
/* -- [ content ]-----------------------------------------------*/
#content{padding:20px 0 0 50px;}
#content h1{margin-bottom:1em;color:#7F222B;}
p{color:#999;font-size:.9em;margin-top:2em;}
/* -- [ footer ]-----------------------------------------------*/
#footer{color:#666;clear:both;font-size:10px;line-height:20px;letter-spacing:1px;padding:0 0 2em 50px;height:6em;overflow:hidden;}
/* -- [ links ]-----------------------------------------------*/
/* -- general -- */
a:link,a:visited{color:#cf852c;text-decoration:underline;}
a:hover,a:active,a:focus{color:#6A2680;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
