Javascript + html5 implement jigsaw puzzle games that can be played on mobile phones _ javascript skills

This article mainly introduces how javascript + html5 implements a jigsaw puzzle game that can be played on mobile phones. It involves some related skills related to javascript and html5 graphic operations, and has some reference value, for more information about how to use JavaScript + html5 to implement a jigsaw puzzle game that can be played on a mobile phone, see the example in this article. Share it with you for your reference. The details are as follows:

Cell phone version of the puzzle. Chrome or Firefox on pc

Var R = (function () {/* right menu */function fa () {if (mo. style. right! = '0px ') {mo. style. right = '0px '; mco. rcss ('', 'cmck');} else {mo. style. right = '-100px'; mco. rcss ('cmck', '') ;}} on (mco, fa); // set the global constant var to = doc. querySelector ('. pzuo '), tmid, r_r; function fb (el, I) {on (el, function () {if (I = 3) {location. reload ();} else if (I = 0) {if (_ gj. length> 0) {localStorage ['ptgj'] = _ gj. join (','); ui. success ('saved successfully! ');} Else {ui. error (' no track can be saved! ') ;}} Else if (I = 2) {if (_ zz) {. style. top = '-50px'; this. innerHTML = 'create a jigsaw puzzle '; _ zz = false; if (_ zp> 0) {fc6 (false) ;}} else if (_ dl) {. style. top = '0px '; this. innerHTML = 'cancel'; _ zz = true; if (_ zp> 0) {fc6 (true) ;}} else {location. href = '/login. php? Cback = '+ location. href ;}} else if (I = 1) {sio. style. display = 'block'; fa (); clearTimeout (tmid); tmid = setTimeout (function () {SiO2. style. display = 'none' ;}, 2500) ;}else if (I = 4) {if (_ dl) {location. href = 'top. php? My = 1';} else {location. href = '/login. php? Cback = http://m.yxsss.com/apps/pt.php ';}} Else if (I = 5) {location. href = '/';} else if (I = 6) {location. href = 'top. php ';}}) ;}var lis = doc. querySelectorAll ('. menu li'); for (var I = 0; I
 
  
3) {for (var I = 0; I <3; I ++) {zps [I]. rcss ('dp ', '');} upico. style. display = 'none';} var zps = doc. querySelectorAll ('. pzuo li '); for (var I = 0; I
  
   
10) {ui. error ('rows can only be between 3 and 10 '); return false;} if (l <3 | l> 10) {ui. error ('columns can only be 3-10 '); return false;} rl = parseInt (l); rh = parseInt (h); f3o. style. opacity = 0; setTimeout (function () {f3o. style. display = 'none';}, 300); fc4 () ;}} function fc4 () {for (var I = 0; I
   
    

    

    
(Function (win, doc) {var ao = doc. querySelector ('. pwap '), po = doc. querySelector ('. pbd'), mo = doc. querySelector ('. menu '), mco = doc. querySelector ('. menu. cm '), SiO2 = doc. querySelector ('. pimg '), sbdo = doc. querySelector ('. sbd'); var _ t = 'ontouchstart' in doc, _ h = 0, _ l = 0, _ k = 0, _ sx1 = [], _ sx2 = [], _ img = '', _ wh = 0, _ gj = [], _ zp = 0, _ rk = 0, _ zz = false, _ dl = DL; // screen size or rotation function ini () {var w = Math. min (win. innerWidth, H = win. innerHeight); sbdo. style. width = win. innerWidth + 'px '; sbdo. style. height = win. innerHeight + 'px '; _ wh = w * 0.9; ao. style. width = ao. style. height = _ wh + 'px '; ao. style. marginTop = (win. innerHeight-w * 0.9) * 0.5 + 'px '; if (_ h & _ l) {pts () ;}} win. addEventListener ('norientationchange' in win? 'Orientationchang': 'resize', ini, false); ini (); function on (el, fun) {if (_ t) {. on (el, 'touchstart', fun);} else {. on (el, 'click', fun) ;}} function rand (n, m) {return Math. round (Math. random () * (m-n) + n);} // block the default action win. addEventListener ('touchmove ', function (e) {e. preventDefault () ;}, false); function pts () {po. innerHTML = ''; _ sx2 = []; var h = 1/_ h * 100, w = 1/_ l * 100; _ sx1.forEach (function (v, I) {if (_ zz & _ z P <4) {v = I}; if (v! = False) {var ls = I % _ l, ts = Math. floor (I/_ l); ls = ls> 0? Ls * 100/_ l: 0; ts = ts> 0? Ts * 100/_ h: 0; var li = v % _ l, ti = Math. floor (v/_ l); li = li> 0? Li * _ wh/_ l: 0; ti = ti> 0? Ti * _ wh/_ h: 0; var p = A. $ ('
'); P. k = I; yd (p); _ sx2.push (p); po. appendChild (p);} else {_ k = I; _ sx2.push (false) ;}}); if (_ zz & _ zp <4) {R. fc5.call (po. children [_ rk], _ rk) ;}} function yd (t) {if (_ zz & _ zp <4) {on (t, yd2 );} else {on (t, yd1) ;}} function yd1 () {var k = this. k; if (_ k-k = 1 & k % _ l <_ l-1) {yds (39 );} else if (_ k-k =-1 & k % _ l> 0) {yds (37);} else if (_ k-k = _ l) {yds (40);} else if (k-_ k = _ l) {yds (38);} if (! _ Zz) {ydd () ;}} function ydd () {var c = true; _ sx1.forEach (function (I, v) {if (v! = False & I! = V) {c = false ;}}); if (c) {ui. confirm ('You passed '+ _ gj. length +' step, challenge successful!
Submit the score to the ranking list? ', Function (rt) {if (rt) {rtsu () ;}} function rtsu () {. aj ('.. /do. php', 'Type = ptrt & ct = '+ _ gj. join (',') + '& cts =' + _ gj. length + '& pid =' + _ pid, function (da) {if (da. ztai) {ui. success ('saved successfully! '); SetTimeout (function () {location. href = 'top. php? Id = '+ _ pid;}, 3000);} else {location. href ='/login. php? Cback = '+ location. href + '# 1' ;}}, 'json') ;}( function () {var mp = location. href. match (/#1/); if (mp) {. aj ('.. /do. php', 'Type = ptrto ', function (da) {if (da. ztai) {ui. success ('saved successfully! '); SetTimeout (function () {location. href = 'top. php? Id = '+ _ pid ;}, 3000) ;}, 'json') ;}} (); function yd2 () {R. fc5.call (this, this. k);} function yds (n) {if (n = 37) {if (_ k % _ l <_ l-1) {_ sx2 [_ k + 1]. style. left = _ k % _ l * 100/_ l + '%'; chge (_ k + 1); _ gj. push (n) ;}} else if (n = 38) {if (_ k <(_ h-1) * _ l) {var nk = parseInt (_ k) + parseInt (_ l); _ sx2 [nk]. style. top = Math. floor (_ k/_ l) * 100/_ h + '%'; chge (nk); _ gj. push (n) ;}} else if (n = 39) {if (_ k % _ l> 0) {_ sx2 [_ k-1]. style. Left = _ k % _ l * 100/_ l + '%'; chge (_ k-1); _ gj. push (n) ;}} else if (n = 40) {if (_ k >=_ l) {_ sx2 [_ k-_ l]. style. top = Math. floor (_ k/_ l) * 100/_ h + '%'; chge (_ k-_ l); _ gj. push (n) ;}} function chge (k) {_ sx1 [_ k] = _ sx1 [k]; _ sx1 [k] = false; _ sx2 [_ k] = _ sx2 [k]; _ sx2 [k] = false; _ sx2 [_ k]. k = _ k; _ k = k;} var _ pid = 1; function lda () {var g = location. href. match (/id = (\ d +)/) | [1, 1]; _ pid = g [1];. aj ('.. /do. php? Id = '+ g [1], 'Type = getpt', function (da) {_ sx1 = eval (' ['+ da. sxu + ']'); _ img = da. src; _ h = da. hshu; _ l = da. lshu; _ k = _ h L-1; SiO2. innerHTML = ''; pts () ;}, 'json')} lda () ;}) (window, document );
    

    
I hope this article will help you design javascript programs.