js+html5实现可在手机上玩的拼图游戏

这篇文章主要介绍了js+html5实现可在手机上玩的拼图游戏,涉及javascript结合html5进行图形操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下：

手机版的拼图。pc上用Chrome 或者 Firefox

1. var R=(function(){ 
2. /*右边菜单*/ 
3. function fa(){ 
4. if(mo.style.right!='0px'){ 
5. mo.style.right='0px'; 
6. mco.rcss('','cmck'); 
7. }else{ 
8. mo.style.right='-100px'; 
9. mco.rcss('cmck',''); 
10. } 
11. } 
12. on(mco,fa); 
13. //设置全局常量 
14. var to=doc.querySelector('.pzuo'),tmid,r_r; 
15. function fb(el,i){ 
16. on(el,function(){ 
17. if(i==3){ 
18. location.reload(); 
19. }else if(i==0){ 
20. if(_gj.length > 0){ 
21. localStorage['ptgj']=_gj.join(','); 
22. ui.success('保存成功!'); 
23. }else{ 
24. ui.error('没有轨迹可保存！'); 
25. } 
26. }else if(i==2){ 
27. if(_zz){ 
28. to.style.top='-50px'; 
29. this.innerHTML='制作拼图'; 
30. _zz=false; 
31. if(_zp > 0){ 
32. fc6(false); 
33. } 
34. }else if(_dl){ 
35. to.style.top='0px'; 
36. this.innerHTML='取消'; 
37. _zz=true; 
38. if(_zp > 0){ 
39. fc6(true); 
40. } 
41. }else{ 
42. location.href='/login.php?cback='+location.href; 
43. } 
44. }else if(i==1){ 
45. sio.style.display='block'; 
46. fa(); 
47. clearTimeout(tmid); 
48. tmid=setTimeout(function(){ 
49. sio.style.display='none'; 
50. },2500); 
51. }else if(i==4){ 
52. if(_dl){ 
53. location.href='top.php?my=1'; 
54. }else{ 
55. location.href='/login.php?cback=http://m.yxsss.com/apps/pt.php'; 
56. } 
57. }else if(i==5){ 
58. location.href='/'; 
59. }else if(i==6){ 
60. location.href='top.php'; 
61. } 
62. }); 
63. } 
64. var lis=doc.querySelectorAll('.menu li'); 
65. for(var i=0;i<lis.length;i++){ 
66. fb(lis[i],i); 
67. } 
68. var upico=A.$('upic'),imgo=new Image(),upe=0,rsrc='',rl=3,rh=3,rsx=[],rem=null; 
69. function fc(el,i){ 
70. on(el,function(){ 
71. if(mo.style.right=='0px'){ 
72. fa(); 
73. } 
74. if(_zp < i){ 
75. ui.error(['请选择图片！','','','请打乱板块的顺序'][_zp]); 
76. return ; 
77. } 
78. if(el.className.indexOf('dp')==-1){ 
79. return ; 
80. } 
81. var farr=[ 
82. function(){ 
83. var tm=new Date().getTime(); 
84. if(tm - upe < 3000){ 
85. ui.error('若不能选择图片，请用浏览器打开本页面。',3000); 
86. } 
87. upe=tm; 
88. }, 
89. function(){ 
90. fc3(true); 
91. }, 
92. function(){ 
93. var i=rand(0,_l*_h -1); 
94. fc5.call(po.children[i],i); 
95. }, 
96. function(){ 
97. _zp=4; 
98. fc1(); 
99. fc7(); 
100. }, 
101. function(){ 
102. fcv(); 
103. } 
104. ]; 
105. farr[i](); 
106. }); 
107. } 
108. function fcv(){ 
109. A.aj('../do.php','type=pts&hshu='+rh+'&lshu='+rl+'&sxu='+rsx,function(da){ 
110. if(da.ztai){ 
111. ui.success('拼图制作成功,马上邀请好友来挑战吧!',3600); 
112. setTimeout(function(){ 
113. location.href='index.php?id='+da.id; 
114. },5000); 
115. } 
116. },'json'); 
117. } 
118. var rfc7=true; 
119. function fc7(){ 
120. for(var i=0;i<50;i++){ 
121. yds(rand(37,40)); 
122. } 
123. if(rfc7){ 
124. pts(); 
125. } 
126. } 
127. function fc1(){ 
128. for(var i=0;i<=_zp;i++){ 
129. zps[i].rcss('','dp'); 
130. } 
131. if(_zp > 3){ 
132. for(var i=0;i<3;i++){ 
133. zps[i].rcss('dp',''); 
134. } 
135. upico.style.display='none'; 
136. } 
137. } 
138. var zps=doc.querySelectorAll('.pzuo li'); 
139. for(var i=0;i<zps.length;i++){ 
140. fc(zps[i],i); 
141. } 
142. function fc2(da){ 
143. if(_zp==0){ 
144. rsrc=da; 
145. _zp=1; 
146. fc1(); 
147. fc3(true); 
148. }else{ 
149. _img=rsrc=da; 
150. pts(); 
151. fc5.call(po.children[_k]); 
152. } 
153. } 
154. var f3o=doc.querySelector('.pwh'),f3o1=doc.querySelector('.pwh1 a'); 
155. on(f3o1,function(){ 
156. fc3(false); 
157. }) 
158. function fc3(z){ 
159. if(z){ 
160. f3o.style.display='block'; 
161. setTimeout(function(){ 
162. f3o.style.opacity=1; 
163. },30); 
164. }else{ 
165. var h=doc.querySelector('.pwhh').value,l=doc.querySelector('.pwhl').value; 
166. if(h < 3 || h > 10){ 
167. ui.error('行数只能在 3 - 10 之间'); 
168. return false; 
169. } 
170. if(l < 3 || l > 10){ 
171. ui.error('列数只能在 3 - 10 之间'); 
172. return false; 
173. } 
174. rl=parseInt(l); 
175. rh=parseInt(h); 
176. f3o.style.opacity=0; 
177. setTimeout(function(){ 
178. f3o.style.display='none'; 
179. },300); 
180. fc4(); 
181. } 
182. } 
183. function fc4(){ 
184. for(var i=0;i<rl*rh;i++){ 
185. rsx.push(i); 
186. } 
187. fc6(true); 
188. _zp=3; 
189. fc1(); 
190. fc5.call(po.children[0],0); 
191. } 
192. //交换数据 
193. function fc6(w){ 
194. if(w){ 
195. r_r=[_l,_h,_img,_k,_sx1]; 
196. _sx1=rsx; 
197. _img=rsrc; 
198. _l=rl; 
199. _h=rh; 
200. _k=_rk; 
201. }else{ 
202. _sx1=r_r[4]; 
203. _img=r_r[2]; 
204. _l=r_r[0]; 
205. _h=r_r[1]; 
206. _k=r_r[3]; 
207. } 
208. pts(); 
209. } 
210. function fc5(i){ 
211. if(rem){ 
212. rem.style.display='block'; 
213. } 
214. _sx1[_rk]=_rk; 
215. _rk=i; 
216. _k=_rk; 
217. _sx1[_k]=false; 
218. this.style.display='none'; 
219. rem=this; 
220. } 
221. //上传图片 
222. upico.onchange=function(){ 
223. var f=this.files[0]; 
224. if(!f){ 
225. return false; 
226. } 
227. var ext=f.name.match(//.(png|jpg|gif)$/i); 
228. if(f.type.match('image.*') || ext){ 
229. var r = new FileReader(); 
230. r.onload = function(){ 
231. var ida=this.result; 
232. if(f.type==''){ 
233. ida=ida.replace('data:','data:image/'+ext[1].replace('jpg','jpeg')+';'); 
234. } 
235. imgo.setAttribute('src',ida); 
236. }; 
237. r.readAsDataURL(f); 
238. }else{ 
239. ui.error('请选择正确的图片格式（png、jpg、gif）'); 
240. } 
241. } 
242. imgo.onload=function(){ 
243. var rc = A.$('canvas'); 
244. var ct = rc.getContext('2d'); 
245. var w=300; 
246. rc.width=w; 
247. rc.height=w; 
248. ct.drawImage(imgo,0,0,w,w); 
249. A.aj('../do.php','type=ptpic&pda='+encodeURIComponent(rc.toDataURL('png')),function(da){ 
250. if(da.ztai){ 
251. fc2(da.src); 
252. }else{ 
253. ui.error(da.msg); 
254. } 
255. },'json'); 
256. } 
257. return {'fc5':fc5}; 
258. })(); 

1. (function(win,doc){ 
2. var ao = doc.querySelector('.pwap'), 
3. po = doc.querySelector('.pbd'), 
4. mo = doc.querySelector('.menu'), 
5. mco = doc.querySelector('.menu .cm'), 
6. sio = doc.querySelector('.pimg'), 
7. sbdo = doc.querySelector('.sbd'); 
8. 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; 
9. //屏幕大小或者旋转 改变拼图大小 
10. function ini(){ 
11. var w=Math.min(win.innerWidth,h=win.innerHeight); 
12. sbdo.style.width=win.innerWidth+'px'; 
13. sbdo.style.height=win.innerHeight+'px'; 
14. _wh=w*0.9; 
15. ao.style.width=ao.style.height=_wh+'px'; 
16. ao.style.marginTop=(win.innerHeight - w*0.9)*0.5+'px'; 
17. if(_h && _l){ 
18. pts(); 
19. } 
20. } 
21. win.addEventListener('norientationchange' in win ? 'orientationchange' : 'resize' , ini, false); 
22. ini(); 
23. function on(el,fun){ 
24. if(_t){ 
25. A.on(el,'touchstart',fun); 
26. }else{ 
27. A.on(el,'click',fun); 
28. } 
29. } 
30. function rand(n,m){ 
31. return Math.round(Math.random()*(m-n)+n); 
32. } 
33. //阻止默认动作 
34. win.addEventListener('touchmove', function(e){ 
35. e.preventDefault(); 
36. },false); 
37. function pts(){ 
38. po.innerHTML=''; 
39. _sx2=[]; 
40. var h=1/_h*100,w=1/_l*100; 
41. _sx1.forEach(function(v,i){ 
42. if(_zz && _zp < 4){v=i}; 
43. if(v!==false){ 
44. var ls=i%_l,ts=Math.floor(i/_l); 
45. ls=ls>0?ls*100/_l:0; 
46. ts=ts>0?ts*100/_h:0; 
47. var li=v%_l,ti=Math.floor(v/_l); 
48. li=li>0?li*_wh/_l:0; 
49. ti=ti>0?ti*_wh/_h:0; 
50. var p=A.$('<p style="width:' + w + '%; height:' + h + '%; left:' + ls + '%; top:' + ts + '%;"><img src="'+_img+'" width="'+_wh+'" style="left:-' + li + 'px; top:-' + ti + 'px;"></p>'); 
51. p.k=i; 
52. yd(p); 
53. _sx2.push(p); 
54. po.appendChild(p); 
55. }else{ 
56. _k=i; 
57. _sx2.push(false); 
58. } 
59. }); 
60. if(_zz && _zp < 4){ 
61. R.fc5.call(po.children[_rk],_rk); 
62. } 
63. } 
64. function yd(t){ 
65. if(_zz && _zp < 4){ 
66. on(t,yd2); 
67. }else{ 
68. on(t,yd1); 
69. } 
70. } 
71. function yd1(){ 
72. var k=this.k; 
73. if(_k-k==1 && k%_l <_l -1){ 
74. yds(39); 
75. }else if(_k-k==-1 && k%_l > 0){ 
76. yds(37); 
77. }else if(_k-k==_l){ 
78. yds(40); 
79. }else if(k-_k==_l){ 
80. yds(38); 
81. } 
82. if(!_zz){ 
83. ydd(); 
84. } 
85. } 
86. function ydd(){ 
87. var c=true; 
88. _sx1.forEach(function(i,v){ 
89. if(v!==false && i!=v){ 
90. c=false; 
91. } 
92. }); 
93. if(c){ 
94. ui.confirm('您经过'+_gj.length+'步，挑战成功！<br>提交成绩到排行榜？',function(rt){ 
95. if(rt){ 
96. rtsu(); 
97. } 
98. }); 
99. } 
100. } 
101. function rtsu(){ 
102. A.aj('../do.php','type=ptrt&ct='+_gj.join(',')+'&cts='+_gj.length+'&pid='+_pid,function(da){ 
103. if(da.ztai){ 
104. ui.success('保存成功！'); 
105. setTimeout(function(){ 
106. location.href='top.php?id='+_pid; 
107. },3000); 
108. }else{ 
109. location.href='/login.php?cback='+location.href+'#1'; 
110. } 
111. },'json'); 
112. } 
113. (function(){ 
114. var mp=location.href.match(/#1/); 
115. if(mp){ 
116. A.aj('../do.php','type=ptrto',function(da){ 
117. if(da.ztai){ 
118. ui.success('保存成功！'); 
119. setTimeout(function(){ 
120. location.href='top.php?id='+_pid; 
121. },3000); 
122. } 
123. },'json'); 
124. } 
125. })(); 
126. function yd2(){ 
127. R.fc5.call(this,this.k); 
128. } 
129. function yds(n){ 
130. if(n==37){ 
131. if(_k%_l < _l - 1){ 
132. _sx2[_k + 1].style.left=_k%_l*100/_l+'%'; 
133. chge(_k + 1); 
134. _gj.push(n); 
135. } 
136. }else if(n==38){ 
137. if(_k < (_h-1)*_l){ 
138. var nk=parseInt(_k) + parseInt(_l); 
139. _sx2[nk].style.top=Math.floor(_k/_l)*100/_h+'%'; 
140. chge(nk); 
141. _gj.push(n); 
142. } 
143. }else if(n==39){ 
144. if(_k%_l > 0){ 
145. _sx2[_k - 1].style.left=_k%_l*100/_l+'%'; 
146. chge(_k - 1); 
147. _gj.push(n); 
148. } 
149. }else if(n==40){ 
150. if(_k >= _l){ 
151. _sx2[_k - _l].style.top=Math.floor(_k/_l)*100/_h+'%'; 
152. chge(_k - _l); 
153. _gj.push(n); 
154. } 
155. } 
156. } 
157. function chge(k){ 
158. _sx1[_k]=_sx1[k]; 
159. _sx1[k]=false; 
160. _sx2[_k]=_sx2[k]; 
161. _sx2[k]=false; 
162. _sx2[_k].k=_k; 
163. _k=k; 
164. } 
165. var _pid=1; 
166. function lda(){ 
167. var g=location.href.match(/id=(/d+)/) || [1,1]; 
168. _pid=g[1]; 
169. A.aj('../do.php?id='+g[1],'type=getpt',function(da){ 
170. _sx1=eval('['+da.sxu+']'); 
171. _img=da.src; 
172. _h=da.hshu; 
173. _l=da.lshu; 
174. _k=_h*_l-1; 
175. sio.innerHTML='<img src="'+_img+'">'; 
176. pts(); 
177. },'json') 
178. } 
179. lda(); 
180. })(window,document); 

希望本文所述对大家的javascript程序设计有所帮助。