jQuery制作拼图小游戏


Posted in Javascript onJanuary 12, 2015

源代码思路分析:

【一】如何生成图片网格,我想到两种方法:

 (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;

            var    hasElem = 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>');

        }

    });
Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 #Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 #Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
You might like
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python中__call__方法示例分析
2014/10/11 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python如何使用代码运行助手
2020/07/03 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
如何撰写岗位职责
2014/02/01 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
房屋买卖协议书
2014/04/10 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
运动会宣传口号
2014/06/09 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
子女赡养老人协议书
2016/03/23 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技