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

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


    请问为什么js中的emptyLoc的x和y不需要更新,或者他的x和y是怎么更新的,他代码里面emptyLoc.x和emptyLoc.y的值貌似都是2,没有变化,不更新的话没办法继续判断距离distance==1啊,为什么它程序可以正确运行,还是我理解错了?


繁华开满天机
浏览 671回答 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);};

偶然的你

// 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,请问您他的信息是在哪儿更新的?
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript