如何在Javascript中使用getAttribute和indexOf

我試圖做一個十五個難題，但控制檯說有「移動」功能的錯誤。如果功能「可移動」是未被佔用的貼磚旁邊的貼磚（不是鬆弛的，而是水平和垂直的方式），則應該返回。結果導致「洗牌」和「移動」中的錯誤。這段代碼有什麼問題嗎？對不起，代碼有點長。謝謝。如何在Javascript中使用getAttribute和indexOf

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

來源

2017-05-03 Tak

你searchNeighbors方法不產生正確的ID。爲每個添加'square_'+。

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;

此外突出顯示和unhighlight未定義。之後你仍然有問題，但它會洗牌。

來源

2017-05-03 01:19:09 AndyB

謝謝你的解決方案。我錯過了「方塊」，並將它們添加到了我的代碼中。現在，這種方法效果更好，但是當我運行「洗牌」時，仍然存在錯誤...（我不需要考慮突出顯示和不明顯...對於混淆，抱歉） – Tak

shuffle（）需要不移動一片空白。 'if（tile）{move（tile）; }' – AndyB

標題存儲HTML元素。包含鄰居的輸出存儲一串字符串。所以你執行與的indexOf

一個錯誤的搜索那麼如果別人是沒有用的，你可以直接返回語句

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

來源

2017-05-03 01:19:42 quirimmo

感謝您的評論。根據你的建議，我進行了修改，但「可移動」仍然存在錯誤。（你可以在問題中看到我的修訂）這段代碼還有什麼問題嗎？ – Tak

如何在Javascript中使用getAttribute和indexOf

回答

相關問題