一个拖动拼图游戏的代码小问题想不通

html代码:
<!doctype html>


Sliding Puzzle
<br> .picture {<br> border: 1px solid black;<br> }<br>

Sliding Puzzle

Easy Hard



js代码:var context = document.getElementById('puzzle').getContext('2d');

var img = new Image();
img.src = './img/dimetrodon.jpg';
img.addEventListener('load', drawTiles, false);

var boardSize = document.getElementById('puzzle').width;
var tileCount = document.getElementById('scale').value;

var tileSize = boardSize / tileCount;

var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;

var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;

var solved = false;

var boardParts = new Object;
setBoard();

document.getElementById('scale').onchange = function() {
tileCount = this.value;
tileSize = boardSize / tileCount;
setBoard();
drawTiles();
};

document.getElementById('puzzle').onmousemove = function(e) {
clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};

document.getElementById('puzzle').onclick = function() {
if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
slideTile(emptyLoc, clickLoc);
drawTiles();
}
if (solved) {
setTimeout(function() {alert("You solved it!");}, 500);
}
};

function setBoard() {
boardParts = new Array(tileCount);
for (var i = 0; i < tileCount; ++i) {
boardParts[i] = new Array(tileCount);
for (var j = 0; j < tileCount; ++j) {
boardParts[i][j] = new Object;
boardParts[i][j].x = (tileCount - 1) - i;
boardParts[i][j].y = (tileCount - 1) - j;
}
}
emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
solved = false;
}

function drawTiles() {
context.clearRect ( 0 , 0 , boardSize , boardSize );
for (var i = 0; i < tileCount; ++i) {
for (var j = 0; j < tileCount; ++j) {
var x = boardParts[i][j].x;
var y = boardParts[i][j].y;
if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {
context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
i * tileSize, j * tileSize, tileSize, tileSize);
}
}
}
}

function distance(x1, y1, x2, y2) {
return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}

function slideTile(toLoc, fromLoc) {
if (!solved) {
boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
// var a = toLoc.x;
// var b = toLoc.y;
toLoc.x = fromLoc.x;
toLoc.y = fromLoc.y;
// fromLoc.x = a;
// fromLoc.y = b;//这边为什么不用给emptyLoc改变坐标?
checkSolved();
}
}

function checkSolved() {
var flag = true;
for (var i = 0; i < tileCount; ++i) {
for (var j = 0; j < tileCount; ++j) {
if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
flag = false;
}
}
}
solved = flag;
}
请问为什么js中的emptyLoc的x和y不需要更新,或者他的x和y是怎么更新的,他代码里面emptyLoc.x和emptyLoc.y的值貌似都是2,没有变化,不更新的话没办法继续判断距离distance==1啊,为什么它程序可以正确运行,还是我理解错了?

2个回答

slideTile(emptyLoc, clickLoc);在这里传入的清空位置和点击位置

而 clickLoc 在你鼠标移动到某个puzzle上面,就根据它的位置确定了。
document.getElementById('puzzle').onmousemove = function(e) {
clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};

iron_nerve
iron_nerve clickLoc的位置了,谢谢啦~
一年多之前 回复
iron_nerve
iron_nerve 谢谢大佬~我想通了,我理解反了,其实那个位置信息只需要更新emptyLoc的,而他toLoc就是更新的enptyLoc的位置,我理解成更新的
一年多之前 回复
iron_nerve
iron_nerve 哦,您的意思是,在方法内fromLoc的位置信息也会跟着onmousemove而变化是吧,谢谢
一年多之前 回复
iron_nerve
iron_nerve // var a = toLoc.x; // var b = toLoc.y; toLoc.x = fromLoc.x; toLoc.y = fromLoc.y; // fromLoc.x = a; // fromLoc.y = b;//这边为什么不用给emptyLoc改变坐标? 他这边只是给toLoc.x = fromLoc.x; toLoc.y = fromLoc.y;,这样更新,而没有给fromLoc也就是emptyLoc的x,y更新位置信息,emptyLoc的位置信息好像一直都是emptyLoc.x=0,emptyLoc.y=0, 请问您他的信息是在哪儿更新的?
一年多之前 回复

// var a = toLoc.x;
// var b = toLoc.y;
toLoc.x = fromLoc.x;
toLoc.y = fromLoc.y;
// fromLoc.x = a;
// fromLoc.y = b;//这边为什么不用给emptyLoc改变坐标?
他这边只是给toLoc.x = fromLoc.x;
toLoc.y = fromLoc.y;,这样更新,而没有给fromLoc也就是emptyLoc的x,y更新位置信息,emptyLoc的位置信息好像一直都是emptyLoc.x=0,emptyLoc.y=0,
请问您他的信息是在哪儿更新的?

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