JS拖动拼图小游戏 调用函数不会啊

[Mainづ鑫]

我这个选择难度的值怎么调用啊


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

[Mainづ鑫]

真的在线等啊

[讨厌走开啦]

没明白你想问什么，能把想问的问题描述清楚吗。

[Mainづ鑫]

就是我这个拼图怎么进行 选择难度

[Mainづ鑫]

我只写了 选择难度的代码 但是怎么用啊 就是 怎么把它得到的值赋给ROW 和col

[Mainづ鑫]

效果应该是点击简单就是3*3的拼图 普通就是4*4 困难是6*6