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

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

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

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

编辑于：2018.07.15 02:46 发布于：2018.07.14 15:43

游戏 html5 javascript canvas

| 评论0 | 收藏 | 浏览1054 |

: iron_nerve

声望： 2

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

发布于：2018.07.14 22:13

评论 4 |

| 已采纳

: 贵阳老马马善福专业维修游泳池堵漏防水工程

声望： 371166

: iron_nerve clickLoc的位置了，谢谢啦~; 大约 2 年之前回复

: iron_nerve 谢谢大佬~我想通了，我理解反了，其实那个位置信息只需要更新emptyLoc的，而他toLoc就是更新的enptyLoc的位置，我理解成更新的; 大约 2 年之前回复

: iron_nerve 哦，您的意思是，在方法内fromLoc的位置信息也会跟着onmousemove而变化是吧，谢谢; 大约 2 年之前回复

: 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, 请问您他的信息是在哪儿更新的？; 大约 2 年之前回复

// 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,
请问您他的信息是在哪儿更新的？

发布于：2018.07.15 02:20

评论 0 |