我的选择难度怎么赋值给切割函数啊

var contentDiv = document.getElementById("content");

var ofrag;

var oldimgs = []; //旧数组
var newimgs = []; //新数组
var imgItems = []; // 存放DIV
var pos = []; // 存放图片位置
var minindex = 5;
var near;
var xxx;
var xxx1;
function getone(num){ //选择难度
if(num==3){
row=col=3
xxx=3; //xxx代表 行列数
xxx1=200; ///xxx1 代表要乘的数

}
else if(num==4){
    row=col=4
    xxx=4;
    xxx1=150;

}
else if(num==6){
    row=col=6
    xxx=6
    xxx1=100;


}

}

function init(row,col){

//为oldimgs赋值
for(var i=1;i<=row*col;i++){
oldimgs.push(i);
}

newimgs = oldimgs.slice(0);//赋值新数组   
ofrag = document.createDocumentFragment();  //文档碎片

for(var i=0;i<row * col;i++){
//i-----0-8 i%3 0%3=0 1%3=1 2%3=2 3%3=0
// 0/3=0 1/3=0 2/3=0 4/3=1
/*
3.3 200
4.4 150
6.6 100
*/

var x = -((i%xxx)*xxx1); //0 200 400 进行循环
var y = -(Math.floor((i/xxx))*xxx1); //0 0 200
var div = document.createElement("div");
div.style.cursor = "move";
div.style.backgroundImage = "url(pintu.jpeg)";
div.style.backgroundRepeat = "no-repeat";
div.style.float = "left";
div.style.height = "xxx1px";
div.style.width = "xxx1px";
div.style.backgroundPosition = ""+ x +"px "+y+"px";
imgItems.push(div);
ofrag.appendChild(div);
}
contentDiv.appendChild(ofrag);
getone(3);
}
init(xxx,xxx);

document.getElementById("start").onclick = function(){

startGame();  //开始游戏

}
function startGame(){
//打乱图片位置
newimgs.sort(function(a,b){
return Math.random() > 0.5 ?1: -1;
})
//记住之前图片的位置
for(i=0;i<row*col;i++){
pos[i] = [imgItems[i].offsetLeft,imgItems[i].offsetTop];

}
for(var i =0; i<row*col;i++){
    var num = newimgs[i]-1;
    var x = -(num%xxx)*xxx1;
    var y = -Math.floor((num/xxx))*xxx1;
    imgItems[i].style.left = pos[i][0] + "px";
    imgItems[i].style.top = pos[i][1] + "px";
    imgItems[i].style.position = "absolute";

    imgItems[i].style.backgroundPosition = ""+x+"px "+y+"px ";
    imgItems[i].index = i;  //设置访问的下标
    imgItems[i].onmousedown = dragImage;

}

}

function cheakNear(dom1,dom2){ //判断是否重合到一起了
//dom1是我们拖动的DIV dom2是我们循环的每一个DIV
if(dom1==dom2){
return;
}
var l1 = dom1.offsetLeft;
var t1 = dom1.offsetTop;
var r1 = dom1.offsetWidth +l1;
var b1 = dom1.offsetHeight + t1;

var l2 = dom2.offsetLeft;
var t2 = dom2.offsetTop;
var r2 = dom2.offsetWidth +l1;
var b2 = dom2.offsetHeight + t1;
// 如何去判断我拖动的图片覆盖到下面的图片了

if(l1 > r2 || t1 > b2 || r1 < l2 || b1 < t2){    //一定没有覆盖到图片   别忘了练习
    return false;
}
else{
    return true;
}       

}
function dis(dom1,dom2){
var l1 = dom1.offsetLeft - dom2.offsetLeft;
var l2 = dom1.offsetTop - dom2.offsetTop;

return Math.sqrt(l1*l1+l2*l2);        //不能为负数

}

function findnear(dom){
var index_nei = -1;
var imin = 999999;

for(var i=0;i<row*col;i++){
    imgItems[i].className = "";
    if(cheakNear(dom,imgItems[i])){
        var dx = dis(dom,imgItems[i]);

        if(imin>dx){
            imin = dx;
            index_nei = i;
        }
    }
}

if(index_nei==-1){
    return null;
}
else{
    return imgItems[index_nei];
}

}

var disX,disY,l,t;

function dragImage(event){
//确定我们点的是哪个DIV
var dom = this;
minindex++;

dom.style.zIndex = minindex;

disX = event.clientX - dom.offsetLeft; //X坐标距离差

disY = event.clientY- dom.offsetTop;


document.onmousemove = function(event){
    l = event.clientX - disX;
   //鼠标拖动图片
    near = findnear(dom);
    if(near){          //如果是一个真实的对象 返回真 ,反之。

        near.className= "active";



    }

    dom.style.left = l+"px";
    dom.style.top = t+"px";
}
document.onmouseup = function(){     //鼠标释放
    //move函数代表着图片移动回去
    if(near){
        near.className = "";       
        move(dom,pos[near.index][0],pos[near.index][1]);
        move(near,pos[dom.index][0],pos[dom.index][1]);

        // 交换一下index 

        var temp = 0;
        temp = near.index;
        near.index = dom.index;
        dom.index = temp; 

        for(var i =0; i<row*col;i++){
            oldimgs[i] = imgItems[i].index+1;

        }

        if(success()){
            gameOver();
        }

    }
    else{
        move(dom,pos[dom.index][0],pos[dom.index][1]);     //move 函数
    }

    //释放资源
    document.onmousemove = null;
    document.onmouseup = null;


}

}

//拼图结束
function success(){
for(var i=0;i<row*col-1;i++){
if(newimgs[i]!=oldimgs[i]){
return false;
}

}
return true;

}
//游戏结束
function gameOver(){
var successDIV = document.createElement("div");
var inner_p = document.createElement("p");
var t = 2;
var timer ;
successDIV.style.cssText = "position:absolute;z-index:99999;top:50%;width:100%;text-align:center;font-size:70px;color:red;";

successDIV.innerHTML = "good job !!";
successDIV.appendChild(inner_p);
contentDiv.appendChild(successDIV);


function timerClear(){
    inner_p.innerHTML = t--;

    if(t<=0){


        clearInterval(timer);
        window.location.reload(); //刷新本页面
        return;

    }

    timer=setTimeout(function(){
        timerClear();

    },1000);

}
timerClear();

}

//拖动后不交换位置回到原位置
function move(dom,left,top){
//left和top是原始数据
clearInterval(dom.timer);
dom.timer = setInterval(function(){
var stop_index = false;// 标志,停止移动
//移动到的新数据
var i_left = parseInt(dom.style.left);
var i_top = parseInt(dom.style.top);

    if(left!=i_left || top!=i_top){
        //  i_speed 一般代表速度值
        var i_speed_left = (left - i_left)/5;
        var i_speed_top = (top - i_top)/5;
        // Math.ceil 吐过这个值是整数 会将小数部分进一, 如果是负数则会舍弃小数
        i_speed_left = i_speed_left > 0 ? Math.ceil(i_speed_left)  : Math.floor(i_speed_left);
        i_speed_top = i_speed_top > 0 ? Math.ceil(i_speed_top) : Math.floor(i_speed_top);

        dom.style.left = (i_left + i_speed_left) + "px";
        dom.style.top = (i_top + i_speed_top) + "px";
    }
    else{
        stop_index = true;
    }
    if(stop_index){
        clearInterval(dom.timer);
    }
},10);

}

1个回答

在线等 内心着急的一批

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐