我正在尝试制作十五个拼图，但控制台显示“可移动”功能出错。如果“可移动”功能是未被占用的瓷砖旁边的瓷砖(不是倾斜的，而是水平和垂直的方式)，则应该返回。因此，这会导致“洗牌”和“移动”错误。这段代码有什么问题吗？对不起，代码有点长。谢谢。
(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;
}
最佳答案
您的 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;
highlight 和 unhighlight 也是未定义的。之后你仍然有问题，但它会洗牌。
关于javascript - 如何在 Javascript 中使用 getAttribute 和 indexOf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43749466/