Question

我正在努力制作一个十五个谜题，但是控制台说funciton“可移动”有一个错误。如果它是未占用的瓷砖旁边的瓷砖（不是水平的，而是水平和垂直的方式），则应该返回“可移动”功能。这会导致“随机播放”和“移动”中的错误。这段代码有什么问题吗？对不起，代码有点长。感谢。

(function(){
'use strict';

var unoccupied_x = 3;
var unoccupied_y = 3;

window.onload = function(){
    createPuzzle();
    document.getElementById("shufflebutton").onclick = shuffle;
};

function createPuzzle() {
    var pieceNum = 0;

    for (var i = 0; i < 4; i++){
        for (var j = 0; j < 4; j++){
            var tile = document.createElement("div");
            tile.classList.add("piece");

            tile.style.top = 100*i + "px";
            tile.style.left = 100*j + "px";
            tile.style.backgroundPosition = (0 - 100 * j) + "px"+ " " + (0 - 100 * i) + "px";
            tile.setAttribute("id","square" + "_" + j + "_" + i);
            pieceNum++;
            tile.innerHTML = pieceNum;

            tile.onclick = clickTile;

            if (i != 3 || j != 3){
              document.getElementById("puzzlearea").appendChild(tile);  
            }

        }
    }
}

function clickTile(){
    move(this);
}

function shuffle(){
    for (var i = 0; i < 1000; i++){
        var neighbors = searchNeighbors();
        var random = parseInt(Math.random() * neighbors.length);
        var tile = document.getElementById(neighbors[random]);

        move(tile);
    }
}

function searchNeighbors() {
    var up = 'square_' + unoccupied_x + "_" + (unoccupied_y - 1);
    var right = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;
    var down = 'square_' + unoccupied_x + "_" + (unoccupied_y + 1);
    var left = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;

    var neighborTiles = [up, down, left, right];
    var output = [];
    for( var i = 0; i < neighborTiles.length; i++){
        if(document.getElementById(neighborTiles[i]) != null){
            output.push(neighborTiles[i]);
        }    
    }
    return output;
}

function move(tile){
    if(movable(tile)){
        var originalX = parseInt(tile.style.left) /100;
        var originalY = parseInt(tile.style.top) / 100;
        var forSetAttributeX = unoccupied_x;
        var forSetAttributeY = unoccupied_y;

        tile.style.top = unoccupied_y * 100 + "px";
        tile.style.left = unoccupied_x * 100 + "px";
        unoccupied_x = originalX;
        unoccupied_y = originalY;
        tile.setAttribute("id", forSetAttributeX + "_" + forSetAttributeY);
    }
}

function movable(tile){
    var neighbors = searchNeighbors();
    return neighbors.indexOf(tile.getAttribute("id")) > -1 ;
}

})();

HTML低于（以防万一）

<head>
    <title>Fifteen Puzzle</title>

    <link href="fifteen.css" type="text/css" rel="stylesheet" />
    <script src="fifteen.js" type="text/javascript"></script>
</head>

<body>
    <h1>Fifteen Puzzle</h1>

    <p>
        The goal of the fifteen puzzle is to un-jumble its fifteen squares
        by repeatedly making moves that slide squares into the empty space.
        How quickly can you solve it?
    </p>

    <div id="puzzlearea"></div>

    <p id="controls">
        <button id="shufflebutton">Shuffle</button>
    </p>

    <div id="output"></div>

</body>

CSS是：

body{
    font-family: cursive, serif;
    font-size: 14pt;
    text-align: center;
}

#puzzlearea{
    height: 400px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.piece{
    width: 90px;
    height: 90px;
    position: absolute;
    background-image: url('background.jpg');
    border: 5px solid black;
}

Answer 1

您的searchNeighbors方法不能创建正确的ID。添加＆＃39; square _＆＃39; +每个。

var up = 'square_' + unoccupied_x + "_" + (unoccupied_y - 1);
var right = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;
var down = 'square_' + unoccupied_x + "_" + (unoccupied_y + 1);
var left = 'square_' + (unoccupied_x - 1) + "_" + unoccupied_y;

高亮和不高亮也是未定义的。在那之后你仍然有问题，但它会随机播放。

Answer 2

标题存储HTML元素。包含邻居的输出存储一个字符串数组。所以你使用indexOf

执行错误的搜索

然后if else没用，你可以直接返回语句

return neighbours.indexOf(...) > -1

如何在Javascript中使用getAttribute和indexOf

2 个答案: