javascript - Fifteen Puzzle Empty Tile -
i'm doing fifteen puzzle , trying write function return html id of html tile element holding empty tile. far i'm getting null results. know solution this?
<!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 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)); };
the problem is
if(gettileelement(i).classname==="square tile15")
the class "square tile15" of parent node, not current.
<div class="square tile15"> <div id="emptytile"></div> </div> or in swap function since passing innernodes
swapinfo(document.getelementbyid("emptytile"),document.getelementbyid("tile"+getrandominteger(14))); but bit confusing.
on finishing code recomend posting on https://codereview.stackexchange.com/ input on optimizing/improving code.
i hope helps.
Comments
Post a Comment