jquery实现的美女拼图游戏实例

这篇文章主要介绍了jquery实现的美女拼图游戏,实例分析了jQuery操作图片的相关技巧,需要的朋友可以参考下

本文实例讲述了jquery实现的美女拼图游戏。分享给大家供大家参考。具体如下：

这里可以自由打乱拼图次序，3*3，4*4等多种组合来进行格数拼图

1. <!DOCTYPE html> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <title>Jquery-puzzle by 4074</title> 
6. <style> 
7. html{ 
8. height:100%; 
9. } 
10. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{ 
11. padding:0; 
12. margin:0; 
13. } 
14. body{ 
15. font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif; 
16. font-size:12px; 
17. background:#fff; 
18. color:#333; 
19. } 
20. a{ 
21. outline:none; 
22. -moz-outline:none; 
23. text-decoration:none; 
24. } 
25. .clearfix{ 
26. zoom:1; 
27. _height:1px; 
28. } 
29. .clearfix:after{ 
30. content:"."; 
31. display:block; 
32. height:0; 
33. clear:both; 
34. visibility:hidden; 
35. } 
36. .head{ 
37. height:50px; 
38. line-height:50px; 
39. padding-left:20px; 
40. border-bottom:1px solid #eee; 
41. box-shadow: 1px 1px 5px #ccc; 
42. } 
43. .head h1{ 
44. float:left; 
45. width:320px; 
46. font-weight:normal; 
47. font-size:22px; 
48. } 
49. .head span{ 
50. display:block; 
51. float:right; 
52. font-size:12px; 
53. color:#999; 
54. line-height:14px; 
55. margin:30px 10px 0 0; 
56. } 
57. .wrap{ 
58. width:1000px; 
59. margin:80px auto; 
60. } 
61. .play_wrap{ 
62. width:300px; 
63. float:left; 
64. padding:20px; 
65. margin-left:200px; 
66. } 
67. #play_area{ 
68. position:relative; 
69. width:300px; 
70. height:300px; 
71. margin:auto; 
72. background:#fefefe; 
73. border-radius:2px; 
74. color: black; 
75. box-shadow: 0px 0px 8px #09F; 
76. border:1px solid #fff; 
77. *border:1px solid #e5e5e5; 
78. cursor:default; 
79. } 
80. #play_area .play_cell{ 
81. width:48px; 
82. height:48px; 
83. border:1px solid #fff; 
84. border-radius:4px; 
85. position:absolute; 
86. background-position: 5px 5px; 
87. cursor: default; 
88. z-index:80; 
89. box-shadow:0px 0px 8px #fff; 
90. transition-property:background-position; 
91. transition-duration:300ms; 
92. transition-timing-function:ease-in-out; 
93. } 
94. #play_area .play_cell.hover{ 
95. filter: alpha(opacity=80); 
96. opacity:.8; 
97. box-shadow: 0px 0px 8px #000; 
98. z-index:90; 
99. *border:1px solid #09F; 
100. } 
101. .play_menu{ 
102. float:left; 
103. margin-left:60px; 
104. font-size:14px; 
105. padding-top:20px; 
106. } 
107. .play_menu p{ 
108. line-height:200%; 
109. clear:both; 
110. } 
111. .play_menu a.play_btn{ 
112. display:block; 
113. margin-bottom:20px; 
114. width:80px; 
115. height:28px; 
116. line-height:28px; 
117. text-align:center; 
118. text-decoration:none; 
119. color:#333; 
120. background:#fefefe; 
121. border:1px solid #eee; 
122. border-radius: 2px; 
123. box-shadow: 1px 1px 2px #eee; 
124. border-color: #ddd #d2d2d2 #d2d2d2 #ddd; 
125. outline:none; 
126. -moz-outline:none; 
127. } 
128. .play_menu a.play_btn:hover{ 
129. background-color: #fcfcfc; 
130. border-color: #ccc; 
131. box-shadow: inset 0 -2px 6px #eee; 
132. } 
133. .play_menu a#play_btn_level{ 
134. position:relative; 
135. margin-bottom:30px; 
136. } 
137. .level_text{ 
138. margin-left:-10px; 
139. } 
140. .level_icon{ 
141. display:block; 
142. position:absolute; 
143. top:12px; 
144. right:16px; 
145. width:0; 
146. height:0; 
147. overflow:hidden; 
148. border:5px solid #FFF; 
149. border-color:#999 transparent transparent transparent; 
150. } 
151. .level_menu{ 
152. position:absolute; 
153. margin:-30px 0 0px 1px; 
154. display:none; 
155. } 
156. .level_menu ul{ 
157. list-style:none; 
158. } 
159. .level_menu li{ 
160. float:left; 
161. } 
162. .level_menu li a{ 
163. display:block; 
164. padding:3px 10px; 
165. border:1px solid #e8e8e8; 
166. margin-left:-1px; 
167. color:#09c; 
168. } 
169. .level_menu li a:hover{ 
170. background:#09c; 
171. color:#fefefe; 
172. } 
173. #info{ 
174. font-size:16px; 
175. margin:30px 0 0 0; 
176. } 
177. #info a{ 
178. color:#09F; 
179. } 
180. </style> 
181. <script type="text/javascript" src="js/jquery.min.js"></script> 
182. <script type="text/javascript"> 
183. var puzzleGame = function(options){ 
184. this.img = options.img || ""; 
185. this.e_playArea = $("#play_area"); 
186. this.e_startBtn = $("#play_btn_start"); 
187. this.e_playScore = $("#play_score"); 
188. this.e_playCount = $("#play_count"); 
189. this.e_levelBtn = $("#play_btn_level"); 
190. this.e_levelMenu = $("#play_menu_level"); 
191. this.areaWidth = parseInt(this.e_playArea.css("width")); 
192. this.areaHeight = parseInt(this.e_playArea.css("height")); 
193. this.offX = this.e_playArea.offset().left; 
194. this.offY = this.e_playArea.offset().top; 
195. this.levelArr = [[3,3],[4,4],[6,6]]; 
196. this.level = 1; 
197. this.scoreArr = [100,200,400]; 
198. this.score = 0; 
199. this.playCount = 0; 
200. this.cellRow = this.levelArr[this.level][0]; 
201. this.cellCol = this.levelArr[this.level][1]; 
202. this.cellWidth = this.areaWidth/this.cellCol; 
203. this.cellHeight = this.areaHeight/this.cellRow; 
204. this.imgArr = []; 
205. this.ranArr = []; 
206. this.cellArr = []; 
207. this.easing = 'swing'; 
208. this.time = 400; 
209. this.thisLeft = 0; 
210. this.thisTop = 0; 
211. this.nextIndex; 
212. this.thisIndex; 
213. this.cb_cellDown = $.Callbacks(); 
214. this.isInit = false; 
215. this.isBind = false; 
216. this.start(); 
217. }; 
218. puzzleGame.prototype = { 
219. start:function(){ 
220. this.init(); 
221. this.menu(); 
222. }, 
223. set: function(options){ 
224. this.level = options.level === 0 ? 0 : (options.level || 1); 
225. }, 
226. menu:function(){ 
227. var self = this; 
228. this.e_startBtn.click(function(){ 
229. self.e_levelMenu.hide(); 
230. self.play(); 
231. }); 
232. this.e_levelBtn.click(function(){ 
233. if(self.playing) return; 
234. self.e_levelMenu.toggle(); 
235. }); 
236. this.e_levelMenu.find("a").click(function(){ 
237. self.e_levelMenu.hide(); 
238. self.e_levelBtn.find(".level_text").html($(this).html()) 
239. if(parseInt($(this).attr("level")) !== self.level){ 
240. self.set({ 
241. "level": $(this).attr("level") 
242. }); 
243. self.isInit = true; 
244. self.isBind = false; 
245. } 
246. }) 
247. }, 
248. play:function(){ 
249. if(this.isInit){ 
250. this.isInit = false; 
251. this.cellRow = this.levelArr[this.level][0]; 
252. this.cellCol = this.levelArr[this.level][1]; 
253. this.cellWidth = this.areaWidth/this.cellCol; 
254. this.cellHeight = this.areaHeight/this.cellRow; 
255. this.init(); 
256. } 
257. this.e_playCount.html(this.playCount = 0); 
258. this.randomImg(); 
259. if(!this.isBind)this.bindCell(); 
260. }, 
261. init:function(){ 
262. var _cell; 
263. this.cellArr = []; 
264. this.imgArr = []; 
265. this.e_playArea.html(""); 
266. for(var i = 0; i<this.cellRow; i++){ 
267. for(var j = 0; j<this.cellCol; j++){ 
268. this.imgArr.push(i*this.cellCol + j); 
269. _cell = document.createElement("div"); 
270. _cell.className = "play_cell"; 
271. $(_cell).css({ 
272. "width": this.cellWidth-2, 
273. "height": this.cellHeight-2, 
274. "left": j * this.cellWidth, 
275. "top": i * this.cellHeight, 
276. "background": "url(" + this.img + ")", 
277. "backgroundPosition": (-j) * this.cellWidth + "px " + (-i) * this.cellHeight + "px" 
278. }); 
279. this.cellArr.push($(_cell)); 
280. this.e_playArea.append(_cell); 
281. } 
282. } 
283. }, 
284. randomImg:function(){ 
285. var ran,arr; 
286. arr = this.imgArr.slice(); 
287. this.ranArr = []; 
288. for(var i = 0, ilen = arr.length; i < ilen; i++){ 
289. ran = Math.floor(Math.random() * arr.length); 
290. this.ranArr.push(arr[ran]); 
291. this.cellArr[i].css({ 
292. "backgroundPosition": (-arr[ran]%this.cellCol) * this.cellWidth + "px " + (-Math.floor(arr[ran]/this.cellCol)) * this.cellHeight + "px" 
293. }) 
294. arr.splice(ran,1); 
295. } 
296. $("#p").html(this.ranArr.join()) 
297. }, 
298. bindCell:function(){ 
299. var self = this; 
300. this.isBind = true; 
301. this.cb_cellDown.add(self.cellDown); 
302. for(var i = 0, len = this.cellArr.length; i<len; i++){ 
303. this.cellArr[i].on({ 
304. "mouseover": function(){ 
305. $(this).addClass("hover"); 
306. }, 
307. "mouseout": function(){ 
308. $(this).removeClass("hover"); 
309. }, 
310. "mousedown": function(e){ 
311. self.cb_cellDown.fire(e, $(this), self); 
312. return false; 
313. } 
314. }); 
315. } 
316. }, 
317. cellDown:function(e,_cell,self){ 
318. var //self = this, 
319. _x = e.pageX - _cell.offset().left, 
320. _y = e.pageY - _cell.offset().top; 
321. self.thisLeft = _cell.css("left"); 
322. self.thisTop = _cell.css("top"); 
323. self.thisIndex = Math.floor(parseInt(self.thisTop)/self.cellHeight)*self.cellCol; 
324. self.thisIndex += Math.floor(parseInt(self.thisLeft)/self.cellWidth); 
325. _cell.css("zIndex",99); 
326. $(document).on({ 
327. "mousemove": function(e){ 
328. _cell.css({ 
329. "left": e.pageX - self.offX - _x, 
330. "top": e.pageY - self.offY - _y 
331. }) 
332. }, 
333. "mouseup": function(e){ 
334. $(document).off("mouseup"); 
335. $(document).off("mousemove"); 
336. self.cb_cellDown.empty(); 
337. if( e.pageX - self.offX < 0 || e.pageX - self.offX > self.areaWidth || e.pageY - self.offY < 0 || e.pageY - self.offY > self.areaHeight ){ 
338. self.returnCell(); 
339. return; 
340. } 
341. var _tx, _ty, _ti, _tj; 
342. _tx = e.pageX - self.offX; 
343. _ty = e.pageY - self.offY; 
344. _ti = Math.floor( _ty / self.cellHeight ); 
345. _tj = Math.floor( _tx / self.cellWidth ); 
346. self.nextIndex = _ti*self.cellCol + _tj; 
347. if(self.nextIndex == self.thisIndex){ 
348. self.returnCell(); 
349. }else{ 
350. self.changeCell(); 
351. } 
352. } 
353. }) 
354. }, 
355. changeCell:function(){ 
356. var self = this, 
357. _tc = this.cellArr[this.thisIndex], 
358. _tl = this.thisLeft, 
359. _tt = this.thisTop, 
360. _nc = this.cellArr[this.nextIndex], 
361. _nl = (this.nextIndex % this.cellCol) * this.cellWidth, 
362. _nt = Math.floor(this.nextIndex / this.cellCol) * this.cellHeight; 
363. _nc.css("zIndex",98); 
364. this.cellArr[this.nextIndex] = _tc; 
365. this.cellArr[this.thisIndex] = _nc; 
366. this.ranArr[this.nextIndex] = this.ranArr[this.nextIndex] + this.ranArr[this.thisIndex]; 
367. this.ranArr[this.thisIndex] = this.ranArr[this.nextIndex] - this.ranArr[this.thisIndex]; 
368. this.ranArr[this.nextIndex] = this.ranArr[this.nextIndex] - this.ranArr[this.thisIndex]; 
369. _tc.animate({ 
370. "left": _nl, 
371. "top": _nt 
372. },self.time,self.easing,function(){ 
373. _tc.removeClass("hover"); 
374. _tc.css("zIndex",""); 
375. }) 
376. _nc.animate({ 
377. "left": _tl, 
378. "top": _tt 
379. },self.time,self.easing,function(){ 
380. _nc.removeClass("hover"); 
381. _nc.css("zIndex",""); 
382. self.check(); 
383. if(!self.cb_cellDown.has(self.cellDown)) self.cb_cellDown.add(self.cellDown); 
384. }) 
385. }, 
386. returnCell:function(){ 
387. var self = this; 
388. this.cellArr[this.thisIndex].animate({ 
389. "left": self.thisLeft, 
390. "top": self.thisTop 
391. },self.time,self.easing,function(){ 
392. $(this).removeClass("hover"); 
393. $(this).css("zIndex",""); 
394. if(!self.cb_cellDown.has(self.cellDown)) self.cb_cellDown.add(self.cellDown); 
395. }); 
396. }, 
397. check:function(){ 
398. this.e_playCount.html( ++ this.playCount); 
399. if(this.ranArr.join() == this.imgArr.join()){ 
400. this.success(); 
401. } 
402. }, 
403. success:function(){ 
404. alert("ok"); 
405. this.score += this.scoreArr[this.level] 
406. this.e_playScore.html(this.score); 
407. } 
408. } 
409. $(document).ready(function(e) { 
410. var pg = new puzzleGame({ 
411. img: "images/120908-1347075337_M.jpg" 
412. }); 
413. }); 
414. </script> 
415. </head> 
416. <body> 
417. <div class="wrap"> 
418. <div class="play_wrap"> 
419. <div id="play_area"></div> 
420. </div> 
421. <div class="play_menu"> 
422. <a id="play_btn_start" class="play_btn" href="javascript:void(0);" unselectable="on">开始</a> 
423. <a id="play_btn_level" class="play_btn" href="javascript:void(0);" unselectable="on"> 
424. <span class="level_text">4 x 4</span> 
425. <span class="level_icon"></span> 
426. </a> 
427. <div class="level_menu" id="play_menu_level"> 
428. <ul> 
429. <li> 
430. <a href="javascript:void(0);" level=0 >3 x 3</a> 
431. </li> 
432. <li> 
433. <a href="javascript:void(0);" level=1 >4 x 4</a> 
434. </li> 
435. <li> 
436. <a href="javascript:void(0);" level=2 >6 x 6</a> 
437. </li> 
438. </ul> 
439. </div> 
440. <p>完成：<span id="play_score">0</span></p> 
441. <p>交换：<span id="play_count">0</span></p> 
442. <p>说明：<br> 
443. -点击开始，小图片将随机打乱；<br> 
444. -拖动小图片可交换位置，顺序完全正确则为成功；<br> 
445. -难度分“3x3”、“4x4”、“6x6”三级；<br> 
446. -对应的分值为100、200、400； 
447. </p> 
448. </div> 
449. </div> 
450. </body> 
451. </html> 

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