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 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php写的简易聊天室代码
2011/06/04 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php文件下载处理方法分析
2015/04/22 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python制作简单五子棋游戏
2019/06/18 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python如何调用字典的key
2020/05/25 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
《宿建德江》教学反思
2014/04/23 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
监守自盗观后感
2015/06/10 职场文书
法律讲堂观后感
2015/06/11 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书