欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript编程开发之jQuery制作拼图小游戏

程序员文章站 2023-11-11 17:42:46
源代码思路分析: 【一】如何生成图片网格,我想到两种方法:    (1)把这张大图切成16张小图,然后用img标签的src    (2)只有一张大图,然后每个元素的背景图用c...

源代码思路分析:

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

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

 

【三】判断是否完成

        第二个元素(p)应用了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),
              nbsp;  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 = $('<p data-bgi="'+this.abgp[n][2]+'" class="puzzle_list"></p>').
                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 $p = this.target.find('.puzzle_list'),
                _that = this;
            var    haselem = function(){
                    var t = false;
                    $p.each(function(){
                        if($(this).hasclass("on")){
                            t = true;
                        }
                    });
                    return t;
                };
            // click
            $p.click(function(){
                var $this = $(this);   
                if(haselem()&&!$this.hasclass("on")){
                    var index = $('.on').index();
                    if($p.eq(index).is(':animated')||$this.is(':animated')){
                        return false;
                    }
                    var l = $p.eq(index).position().left,
                        t = $p.eq(index).position().top,
                        myl = $this.position().left,
                        myt = $this.position().top;
                    $(this).animate({'left':l,'top':t});
                    $p.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($p) == _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('<p class="puzzle_mask"></p><p class="puzzle_pass">恭喜过关</p>');
        }
    });