十五拼图空瓦

Question

我当前正在做十五难题，并尝试编写一个函数，该函数将返回持有空图块的html图块元素的html id。 到目前为止，我只得到空结果。 有人知道解决方案吗？

 <!DOCTYPE html> <html lang="en"> <head> <title> Fifteen Puzzle Part III </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="FifteenPuzzlePart3.js" type="text/javascript"></script> <style type="text/css"> { border : 0; margin : 0; padding : 0; } body { font-family : "Times New Roman", serif; font-size : 16pt; } #page { background-color: black; color : white; height : 20em; margin-left : auto; margin-right : auto; text-align : center; width : 15em; } #puzzleTitle { font-size:25pt; padding-top:10px; padding-bottom:10px; } #puzzleBoard { height : 75%; margin-left : auto; margin-right: auto; width : 75%; } #button { background-color: grey; height : 2.2em; margin-left : auto; margin-right : auto; width : 8em; } .square { float : left; margin : 1px; padding-left : 1px; padding-bottom : 1px; width : 2.5em; } .tile { background-color: red; border : solid white; font-size : 25pt; } .tile15 { background-color: transparent; border : none; } .clear { clear: left; clear: right; } </style> </head> <body> <div id="page"> <div id="puzzleTitle">The Fifteen Puzzle</div> <div id="puzzleBoard"> <div class="square"> <div class="tile" id="tile0">1</div> </div> <div class="square"> <div class="tile" id="tile1">2</div> </div> <div class="square"> <div class="tile" id="tile2">3</div> </div> <div class="square"> <div class="tile" id="tile3">4</div> </div> <div class="square"> <div class="tile" id="tile4">5</div> </div> <div class="square"> <div class="tile" id="tile5">6</div> </div> <div class="square"> <div class="tile" id="tile6">7</div> </div> <div class="square"> <div class="tile" id="tile7">8</div> </div> <div class="square"> <div class="tile" id="tile8">9</div> </div> <div class="square"> <div class="tile" id="tile9">10</div> </div> <div class="square"> <div class="tile" id="tile10">11</div> </div> <div class="square"> <div class="tile" id="tile11">12</div> </div> <div class="square"> <div class="tile" id="tile12">13</div> </div> <div class="square"> <div class="tile" id="tile13">14</div> </div> <div class="square"> <div class="tile" id="tile14">15</div> </div> <div class="square tile15"> <div id="emptyTile"></div> </div> <div class="clear"></div> </div> <div id="button">Click For New Puzzle</div> </div> </body> </html>

 "use strict"; window.onload=function() { document.getElementById("button").onclick=scrambleTiles; } function getTileElement(tileNumber) { var prefix; var result; prefix="tile"; result=""; if(document.getElementById(prefix+tileNumber)!==null) { result=document.getElementById(prefix+tileNumber); } else { result=null; } return result; } function swapInfo(element1, element2) { var tmp; var tmp2; tmp=element1.className; element1.className=element2.className; element2.className=tmp; tmp2=element1.innerHTML; element1.innerHTML=element2.innerHTML; element2.innerHTML=tmp2; } function getEmptyTile() { var i; var prefix; var result; i=0; prefix="tile"; result=""; while(i<15 && result !== null) { if(getTileElement(i).className==="square tile15") { result=result+prefix+i; } i=i+1; } return result; } function scrambleTiles() { swapInfo(document.getElementById("emptyTile"),document.getElementById("tile"+getRandomInteger(14))); } function getRandomInteger(upperLimit) { return Math.floor(Math.random()*(upperLimit+1)); };

Answer 1

问题是

if（getTileElement（i）.className ===“方形tile15”）

"square tile15"类属于父节点，而不是当前节点。

<div class="square tile15">
    <div id="emptyTile"></div>
</div>

或在交换功能中，因为您要传递innerNodes

swapInfo(document.getElementById("emptyTile"),document.getElementById("tile"+getRandomInteger(14)));

但这有点令人困惑。

完成代码后，我建议您将其发布在https://codereview.stackexchange.com/上，以获取有关优化/改进代码的意见。

我希望这有帮助。

十五拼图空瓦

问题描述

1 个解决方案

解决方案1
0 2014-12-02 07:09:52

十五拼图空瓦

问题描述

1 个解决方案

解决方案1 0 2014-12-02 07:09:52

解决方案1
0 2014-12-02 07:09:52