平武建站

jQuery如何实现网页拼图游戏

这篇文章主要讲解了jQuery如何实现网页拼图游戏，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联建站专注于吴江网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供吴江营销型网站建设，吴江网站制作、吴江网页设计、吴江网站官网定制、小程序开发服务，打造吴江网络公司原创品牌,更为您提供吴江网站排名全网营销落地服务。

看效果：

1.生成格子图片成功：

jQuery如何实现网页拼图游戏

2.打乱图片次序

jQuery如何实现网页拼图游戏

3.手动设置行列，这里限定了最大的行列都是 10 ，最小是3，多了会眼花撩乱。

jQuery如何实现网页拼图游戏

4.再次打乱

jQuery如何实现网页拼图游戏

5.去除小格子的边框，去除了图片分格子就不明显了

在页面上这用调用：

完整的js：

(function($){
 /*
 * 坐标类
 * @param {Object} x
 * @param {Object} y
 * @memberOf {TypeName} 
 */
 function Point(x,y){
 this.top=x;
 this.left=y;
 }
 
 /**
 * 修正版本，原图右下角的小图不显示，是活动格子
 * 添加 “打乱”，“换图按钮”
 * 
 * @param {Object} options
 * @memberOf {TypeName} 
 * @return {TypeName} 
 */
 $.fn.tablePic=function(options){
 var DEFAULT={
 target:'',
 row:2,
 col:2,
 isBorder:true,
 borderColor:'#f88',
 mode:'strict',//是否严格判断格式相邻移到，如果不是strict，那么就是不管怎样都是直接和空白格式内容交换
 freeColor:'#92cf28' //空白格子的背景颜色
 }
 
 var options=$.extend(DEFAULT,options);
 //系统变量
 var SYSTEM={
 width:0,height:0,
 //小格子的大小
 sonWidth:0,sonHeight:0,
 src:null,
 current:'',correct:0,//正确个数
 hits:0//步数
 }
 var parent=null;//这个是待分割的图片
 var target=null;//这个是格子存放的容器，一般是一个div，也应该是！！！！！别搞独特=.=
 
 //这个是左，上 的margin
 var margin=new Array();
 
 this.each(function(){
 parent=$(this);
 SYSTEM.src=parent.attr("src");
 SYSTEM.width=parseInt(parent.css("width"));
 SYSTEM.height=parseInt(parent.css("height"));
 SYSTEM.sonWidth=Math.round(SYSTEM.width/options.col);
 SYSTEM.sonHeight=Math.round(SYSTEM.height/options.row);
 
 init();
 initMargin();
 });
 
 //初始化目标
 function init(){
 target=$("#"+options.target);
 initTarget();
 //最后我们要添加一个空白的divprepend
 target.append($("
").attr("id","control").css("position","absolute").css("top",SYSTEM.height+8+((options.isBorder)?(options.row):0)+'px').css("right","0px").css("width",SYSTEM.Width/3).css("height",SYSTEM.sonHeight)
 .append($("").attr("id","correctInfo"))
 .append($("