Js + html5 implement jigsaw puzzle games that can be played on mobile phones, html5 machines

Js + html5 implement jigsaw puzzle games that can be played on mobile phones, html5 machines

This example describes how to implement a jigsaw puzzle game that can be played on a mobile phone using js + html5. 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/#/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 <lis. length; I ++) {fb (lis [I], I);} var upico =. $ ('upic '), imgo = new Image (), upe = 0, rsrc = '', rl = 3, rh = 3, rsx = [], rem = null; function fc (el, I) {on (el, function () {if (mo. style. right = '0px ') {fa ();} if (_ zp <I) {ui. error (['select an image! ', '','', 'Disrupt the order of plates'] [_ zp]); return;} if (el. className. indexOf ('dp ') =-1) {return;} var farr = [function () {var tm = new Date (). getTime (); if (tm-upe <3000) {ui. error ('if you cannot select an image, open this page in a browser. ', 3000) ;}upe = tm ;}, function () {fc3 (true) ;}, function () {var I = rand (0, _ l * _ h-1); fc5.call (po. children [I], I) ;}, function () {_ zp = 4; fc1 (); fc7 () ;}, function () {fcv () ;}]; farr [I] () ;});} function fcv () {. aj ('.. /do. php', 'Type = pts & hshu = '+ rh +' & lshu = '+ rl +' & sxu = '+ rsx, function (da) {if (da. ztai) {ui. success! ', 3600); setTimeout (function () {location. href = 'index. php? Id = '+ da. id ;}, 5000) ;}}, 'json') ;}var rfc7 = true; function fc7 () {for (var I = 0; I <50; I ++) {yds (rand (37,40) ;}if (rfc7) {pts () ;}} function fc1 () {for (var I = 0; I <= _ zp; I ++) {zps [I]. rcss ('', 'dp ');} if (_ zp> 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 <zps. length; I ++) {fc (zps [I], I);} function fc2 (da) {if (_ zp = = 0) {rsrc = da; _ zp = 1; fc1 (); fc3 (true);} else {_ img = rsrc = da; pts (); fc5.call (po. children [_ k]);} var f3o = doc. querySelector ('. pwh'), f3o1 = doc. querySelector ('. pwh1 A'); on (f3o1, function () {fc3 (false);}) function fc3 (z) {if (z) {f3o. style. display = 'block'; setTimeout (function () {f3o. style. opacity = 1 ;}, 30) ;}else {var h = doc. querySelector ('. pwhh '). value, l = doc. querySelector ('. pwhl '). value; if (h <3 | h> 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 <rl * rh; I ++) {rsx. push (I) ;}fc6 (true); _ zp = 3; fc1 (); fc5.call (po. children [0], 0);} // function fc6 (w) {if (w) {r_r = [_ l, _ h, _ img, _ k, _ Sx1]; _ sx1 = rsx; _ img = rsrc; _ l = rl; _ h = rh; _ k = _ rk ;} else {_ sx1 = r_r [4]; _ img = r_r [2]; _ l = r_r [0]; _ h = r_r [1]; _ k = r_r [3];} pts ();} function fc5 (I) {if (rem) {rem. style. display = 'block';} _ sx1 [_ rk] = _ rk; _ rk = I; _ k = _ rk; _ sx1 [_ k] = false; this. style. display = 'none'; rem = this;} // upload the image upico. onchange = function () {var f = this. files [0]; if (! F) {return false;} var ext = f. name. match (/\. (png | jpg | gif) $/I); if (f. type. match ('image. * ') | ext) {var r = new FileReader (); r. onload = function () {var ida = this. result; if (f. type = '') {ida = ida. replace ('data: ', 'Data: image/' + ext [1]. replace ('jpg ', 'jpeg') + ';');} imgo. setAttribute ('src', ida) ;}; r. readAsDataURL (f);} else {ui. error ('select the correct image format (png, jpg, gif) ');} imgo. onload = function () {var rc =. $ ('canvas '); var ct = rc. getContext ('2d '); var w = 300; rc. width = w; rc. height = w; ct. drawImage (imgo, 0, 0, w, w);. aj ('.. /do. php', 'Type = ptpic & pda = '+ encodeURIComponent (rc. toDataURL ('png '), function (da) {if (da. ztai) {fc2 (da. src);} else {ui. error (da. msg) ;}}, 'json') ;}return {'fc5 ': fc5 };})();

(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 =. $ ('<p style = "width:' + w + '%; height:' + h + '%; left:' + ls + '%; top: '+ ts +' %; ">  </p> '); 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, y D1) ;}} 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! <Br> 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.