2017-05-03 3 views
0

私は15個のパズルを作ろうとしていますが、コンソールにはfunciton "moving"にエラーがあります。関数 "可動"は、空ではないタイルの次のタイルである場合(スラットなしではなく、水平および垂直方向)に返されるはずです。そして、その結果、 "シャッフル"と "移動"でエラーが発生します。このコードに何か問題がありますか?申し訳ありませんがコードは少し長いです。ありがとう。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; 
} 

答えて

0

あなた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; 

ハイライトとハイライトは未定義です。その後も問題は残っていますが、シャッフルします。

+0

は、ソリューションをありがとう文を返すことができます。私は「正方形」が不足していて、私はそれらを私のコードに加えました。さて、それはうまく動作しますが、私がシャッフルを実行すると、まだエラーがあります...(混乱のために申し訳ありませんが、ハイライトとノンハイトを考える必要はありません) – Tak

+0

シャッフル無効である。 'if(tile){ move(tile); } ' – AndyB

0

タイトルにはHTML要素が格納されます。 ネイバーを含む出力には文字列の配列が格納されます。 だからあなたは無用である他の場合、indexOfの

と間違って検索を実行している、あなたは直接

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

ご意見ありがとうございます。あなたの提案に基づいて、私は改訂しましたが、まだ "可動"に誤りがあります。 (あなたは私のリビジョンを質問で見ることができます)このコードには何か間違いがありますか? – Tak

関連する問題