2018-12-05 11:14

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

``````
``````

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

}

• 点赞
• 收藏
• 复制链接分享

• Mainづ鑫 3年前

在线等 内心着急的一批

点赞 评论 复制链接分享