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;
}
は、ソリューションをありがとう文を返すことができます。私は「正方形」が不足していて、私はそれらを私のコードに加えました。さて、それはうまく動作しますが、私がシャッフルを実行すると、まだエラーがあります...（混乱のために申し訳ありませんが、ハイライトとノンハイトを考える必要はありません） – Tak
シャッフル無効である。 'if（tile）{ move（tile）; } ' – AndyB