jQuery之-拼图小游戏

jQuery之-拼图小游戏源代码思路分析：【一】如何生成图片网格，我想到两种方法：（1）把这张大图切成16张小图，然后用img标签的src （2）只有一张大图，然后每个元素的背景图用css的background-position进行切割定位，这样就需要16个数组[0,0],[-150,0],[-300,0]..........（我采用这种）【二】图片背景定位数组与布局定位数组在选择了使用CSS定位切图，就需要生成数据。需要的css背景定位数组为：[0,0],[-150,0],[-300,0],[-450,0], [0,-150],[-150,-150],[-300,-150],[-450,-150], [0,-300],[-150,-300],[-300,-300],[-450,-300], [0,-450],[-150,-450],[-300,-450],[-450,-450] 它们当中都用到了[0,-150,-300,-450]其中的值（就是我定义图片高，宽150的倍数值），所以就利用这个值通过for（）{}自动生成数组 //this.nCol在这里是4 --- 因为我的拼图是4*4
// this.nArea是150，是每张图片的宽，高（600px/4）--大图是600*600
var l = [],p = [];for（var n=0;n<this.nCol;n++）{l.push（n*（this.nArea+1））; //生成[0,151,302,453] 网格的布局定位数组，因为我的效果需要边框（图中的绿色边框），所以与css背景定位数组就不一样了p.push（-n*this.nArea）; // 生成了[0,-150,-300,-450]就是上面说的，CSS背景定位值}for（var i=0;i<this.nLen;i++）{ // this.nLen 是为 16
var t = parseInt（i/this.nCol）,k = i - this.nCol*t,aP = [],aL = [];aP.push（p[k],p[t],i）; //这里我给css背景定位数组额外加了i，是为第3步判断用的，不需要拿来设置css属性的，我把它设置为标签的属性里[bg-i]aL.push（l[k],l[t]）;this.aBgp[i] = aP;this.aLayout[i] = aL;}【三】判断是否完成第二个元素（div）应用了css背景定位 this.aBgp[1] （值为[-150,0,1]），而随机分配的布局定位假如是this.aLayout[3] （这里的3是随机生成的）（值为[453,0]），那么left:453px,top:0；挪动这个元素，改变的是它的letf，top值，而不是本身结构的顺序，获取这个元素的left,top的值（假如是挪到left:151px,top:0），然后拿来与this.aLayout[1]的值[151,0]（里面的1索引，就是本身标签属性的[bg-i]=1也是this.aBgp[1] 的索引）判断，相等就说明这个元素挪动后的位置是正确。 详细代码：/*version:2.0*/function GyPuzzleGame（option）{this.target = $（option.target）;this.data = option.data; //图片数据this.opt = option;this.nLen = option.count; //多少张拼图this.aColLayout = option.aColLayout || [0,151,302,453];//布局横向数组this.aRowLayout = option.aRowLayout || [0,151];//布局竖向数组this.aColBgp = option.aColBgp || [0,-150,-300,-450];//布局横向数组this.aRowBgp = option.aRowBgp || [0,-150];//布局竖向数组this.nCol = this.aColLayout.length; this.nRow = this.aRowLayout.length;this.aLayout = []; //布局数组this.aBgp = []; //css背景定位数组this.init（）;}GyPuzzleGame.prototype = {getRand:function（a,r）{var arry = a.slice（0）,newArry = [];for（var n=0;n<r;n++）{var nR = parseInt（Math.random（）*arry.length）;newArry.push（arry[nR]）;arry.splice（nR,1）;}return newArry;},setPos:function（）{for（var i=0;i<this.nLen;i++）{var t = parseInt（i/this.nCol）,l = i - this.nCol*t,aP = [],aL = [];aP.push（this.aColBgp[l],this.aRowBgp[t],i）;aL.push（this.aColLayout[l],this.aRowLayout[t]）;this.aBgp[i] = aP;this.aLayout[i] = aL;}},isPass:function（item）{var _that = this,is = 0;item.each（function（）{var l = parseInt（$（this）.css（"left"））,t = parseInt（$（this）.css（"top"））,i = parseInt（$（this）.attr（"data-bgi"））;if（l==_that.aLayout[i][0]&&t==_that.aLayout[i][1]）{is ++;}}）;return is;},createDom:function（）{var layout = this.getRand（this.aLayout,this.nLen）;// console.log（layout）;for（var n=0;n<this.nLen;n++）{var t = parseInt（n/this.nCol）,l = n - this.nCol*t;var html = $（"<div data-bgi=""+this.aBgp[n][2]+"" class="puzzle_list"></div>"）.css（{"left":layout[n][0]+"px","top":layout[n][1]+"px","background-image":"url（"+this.data+"）","background-position":this.aBgp[n][0]+"px"+" "+this.aBgp[n][1]+"px"}）;this.target.append（html）;}},move:function（）{var $div = this.target.find（".puzzle_list"）,_that = this;varhasElem = function（）{var t = false;$div.each（function（）{if（$（this）.hasClass（"on"））{t = true;}}）;return t;};// click$div.click（function（）{var $this = $（this）;if（hasElem（）&&！$this.hasClass（"on"））{var index = $（".on"）.index（）;if（$div.eq（index）.is（":animated"）||$this.is（":animated"））{return false;}var l = $div.eq（index）.position（）.left,t = $div.eq（index）.position（）.top,myl = $this.position（）.left,myt = $this.position（）.top;$（this）.animate（{"left":l,"top":t}）;$div.eq（index）.css（{"z-index":"1"}）.animate（{"left":myl,"top":myt},function（）{$（this）.removeClass（"on"）;$（this）.find（"span"）.remove（）;$（this）.css（{"z-index":"0"}）;if（_that.isPass（$div） == _that.nLen）{if（typeof _that.opt.success == "function"）{_that.opt.success（{target:_that.target}）;}}}）;}else {if（$this.hasClass（"on"））{$this.removeClass（"on"）;$this.find（"span"）.remove（）;}else {$this.addClass（"on"）.append（"<span></span>"）;}}}）;},init:function（）{// 设置CSS背景定位与元素布局数组this.setPos（）;// 创建元素this.createDom（）;// 挪动图片this.move（）;}}//实例调用new GyPuzzleGame（{"data":"images/03.jpg","target":"#pA","count":8,"success":function（opt）{opt.target.append（"<div class="puzzle_mask"></div><div class="puzzle_pass">恭喜过关</div>"）;}}）;------------------------------------------分割线------------------------------------------jQuery权威指南 PDF版中文+配套源代码 http://www.linuxidc.com/Linux/2013-10/91059.htmjQuery实战中文PDF+源码 http://www.linuxidc.com/Linux/2013-09/90631.htm《jQuery即学即用（双色）》 PDF+源代码 http://www.linuxidc.com/Linux/2013-09/90383.htm锋利的jQuery（第2版）完整版PDF+源码 http://www.linuxidc.com/Linux/2013-10/91527.htmjQuery完成带复选框的表格行高亮显示 http://www.linuxidc.com/Linux/2013-08/89406.htmjQuery基础教程（第4版） PDF 完整高清版+配套源码 http://www.linuxidc.com/Linux/2014-03/98162.htm--------------------------------------分割线 --------------------------------------jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-02/113531.htm