jQuery制作拼图小游戏

2020-05-24 21:18:48易采站长站整理

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