Menu
Hi!
Right – I’m trying to make a 16-piece puzzle where if you click on an image in a table next to the blank image, the blank image swaps with the image that you originally clicked on. Its like [URL=http://www.webreference.com/js/column45/puzzle.html]THIS
Here’s what I have so far:-
<?xml version=”1.0″ encoding = “UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“
<html xmlns=”
<head>
<title> Puzzle </title>
<script type=”text/javascript”>
function checkCells()
{
var cellId = event.srcElement.id;
var clickedCell = document.getElementById(cellId);
var blankCell = document.getElementById(“blank”);
if (blankCell -1 == clickedCell)
{
swapCells();
}
else if (blankCell -4 == clickedCell)
{
swapCells();
}
else if (clickedCell – 1 == blankCell)
{
swapCells();
}
else if (clickedCell -4 == blankCell)
{
swapCells();
}
else invalid();
}
function invalid()
{
alert(“Cell CANNOT move”);
}
function swapCells()
{
temp = clickedCell;
clickedCell = blankCell;
blankCell = temp;
}
</script>
</head>
<body>
<p>Puzzle Game</p>
<table border = “2”>
<tr>
<td id=”1″ onclick=”checkCells()”><img src=”1.gif”></td>
<td id=”2″ onclick=”checkCells()”><img src=”2.gif”></td>
<td id=”3″ onclick=”checkCells()”><img src=”3.gif”></td>
<td id=”4″ onclick=”checkCells()”><img src=”4.gif”></td>
</tr>
<tr>
<td id=”5″ onclick=”checkCells()”><img src=”5.gif”></td>
<td id=”6″ onclick=”checkCells()”><img src=”6.gif”></td>
<td id=”7″ onclick=”checkCells()”><img src=”7.gif”></td>
<td id=”8″ onclick=”checkCells()”><img src=”8.gif”></td>
</tr>
<tr>
<td id=”9″ onclick=”checkCells()”><img src=”9.gif”></td>
<td id=”10″ onclick=”checkCells()”><img src=”10.gif”></td>
<td id=”11″ onclick=”checkCells()”><img src=”11.gif”></td>
<td id=”12″ onclick=”checkCells()”><img src=”12.gif”></td>
</tr>
<tr>
<td id=”13″ onclick=”checkCells()”><img src=”13.gif”></td>
<td id=”14″ onclick=”checkCells()”><img src=”14.gif”></td>
<td id=”15″ onclick=”checkCells()”><img src=”15.gif”></td>
<td id=”blank”><img src=”blank.gif”></td>
</tr>
</table>
</body>
</html>
I want to use things like “document.srcElemement” and all that sort of stuff to point at the cell in question (be it the blank cell or the cell that was clicked on) and to grab its ID and then swap them by using a temporary variable to store one of the values until its overwritten.
So when you click on an image in the table, it calls the function “checkcells()” which then checks if the cell next to it is free, and if so calls function “swapCells()” which does the actual moving. But it doesnt work.
What am I doing wrong?
Hope someone can help.
Cheers! ?