I'm creating the Fifteen Puzzle and having trouble with
Getting the numeric suffix of the tiles. I know there is a built-in function for this, but I have to do this manually.
Creating functions that find the column and row where a tile is located. I think this might be where arrays are used, but I'm not sure.
"use strict";
window.onload=function()
{
document.getElementById("button").onclick=scrambleTiles;
window.alert(getEmptyTile())
}
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));
};
getRowNumber(tileNumber)
{
}
getColumnNumber(tileNumber)
{
}<!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>
Just a little matrix math and regexp will do the trick. Here are your functions: