0
我目前正在做十五益智，并试图编写一个函数，将返回持有空瓷砖的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 \t : \t 0;
margin \t : \t 0;
padding \t : \t 0;
}
body
{
font-family \t : \t "Times New Roman", serif;
font-size \t : \t 16pt;
}
#page
{
background-color: black;
color \t \t \t : white;
height \t \t \t : 20em;
margin-left \t \t : auto;
margin-right \t : auto;
text-align \t \t : center;
width \t \t \t : 15em;
}
#puzzleTitle
{
font-size:25pt;
padding-top:10px;
padding-bottom:10px;
}
#puzzleBoard
{
height \t \t : 75%;
margin-left \t : auto;
margin-right: auto;
width \t \t : 75%;
}
#button
{
background-color: grey;
height \t \t \t : 2.2em;
margin-left \t \t : auto;
margin-right \t : auto;
width \t \t \t : 8em;
}
.square
{
float \t \t \t : left;
margin \t \t \t : 1px;
padding-left \t : 1px;
padding-bottom \t : 1px;
width \t \t \t : 2.5em;
}
.tile
{
background-color: red;
border \t \t \t : solid white;
font-size \t \t : 25pt;
}
.tile15
{
background-color: transparent;
border \t \t \t : 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)
{
\t var prefix;
\t var result;
\t prefix="tile";
\t result="";
\t if(document.getElementById(prefix+tileNumber)!==null)
\t {
\t \t result=document.getElementById(prefix+tileNumber);
\t }
\t else
\t {
\t \t result=null;
\t }
\t return result;
}
function swapInfo(element1, element2)
{
\t var tmp;
\t var tmp2;
tmp=element1.className;
element1.className=element2.className;
element2.className=tmp;
tmp2=element1.innerHTML;
element1.innerHTML=element2.innerHTML;
element2.innerHTML=tmp2;
}
function getEmptyTile()
{
\t var i;
\t var prefix;
\t var result;
\t i=0;
\t prefix="tile";
\t result="";
\t while(i<15 && result !== null)
\t {
\t \t if(getTileElement(i).className==="square tile15")
\t \t {
\t \t \t result=result+prefix+i;
\t \t }
\t \t \t i=i+1;
\t }
\t return result;
}
function scrambleTiles()
{
\t swapInfo(document.getElementById("emptyTile"),document.getElementById("tile"+getRandomInteger(14)));
}
function getRandomInteger(upperLimit)
{
\t return Math.floor(Math.random()*(upperLimit+1));
};
我的答案有帮助吗？或者我错过了什么？ – 2014-12-03 15:47:55
你好，你需要更多的帮助吗？ – 2014-12-04 19:30:44
实际上我的程序有很多搞砸了，所以很难说。尽管谢谢您的帮助！ – shortbutevil 2014-12-08 06:25:49