Create Fifteen Puzzle with your own photo/image

roy

What is fifteen puzzle?

The fifteen puzzle actually consists of an image divided into 16 parts of equal dimensions arranged in a 4×4 matrix. The last part is omitted so that there is left an empty space where we can slide the parts of the image so that we can create and solve the puzzle.

Fifteen puzzle (Sliding Puzzle) with Monalisa Smile is a common puzzle. But have you ever tried it with your own picture? I have written a simple script with which you can puzzle up any photo of yours if it’s a 512×512 Jpeg image.


fifteen puzzle

Want to give it a try? Download the code and go through the following parts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
.box
{
	height:512px;
	width:512px;
	border:#333 thick solid;
}
.slice
{
	height:128px;
	width:128px;
	float:left;
}
</style>
<script type="text/javascript">

function swap(item)
{
	x=document.getElementById(item).id;
	y=parseInt(x)
	a=y+1;
	b=y-1;
	c=y+4;
	d=y-4;
	if(item!=4&& item!=8&& item!=12&& item!=16){
	if(document.getElementById(a).innerHTML=="")
	{
		xx=document.getElementById(item).innerHTML;
		document.getElementById(a).innerHTML=xx;
		document.getElementById(item).innerHTML="";
	}}
	if(item!=1&& item!=5&& item!=9&& item!=13){
	if(document.getElementById(b).innerHTML=="")
	{
		xx=document.getElementById(item).innerHTML;
		document.getElementById(b).innerHTML=xx;
		document.getElementById(item).innerHTML="";
	}}
	if(item!=13&& item!=14&& item!=15&& item!=16){
	if(document.getElementById(c).innerHTML=="")
	{
		xx=document.getElementById(item).innerHTML;
		document.getElementById(c).innerHTML=xx;
		document.getElementById(item).innerHTML="";
	}}
	if(item!=1&& item!=2&& item!=3&& item!=4){
	if(document.getElementById(d).innerHTML=="")
	{
		xx=document.getElementById(item).innerHTML;
		document.getElementById(d).innerHTML=xx;
		document.getElementById(item).innerHTML="";
	}}
}
</script>
</head>

<body>
<div style="float:left" class="box">
<div id="1" class="slice" onclick="swap(this.id); check();"><img src="test1.php" /></div>
<div id="2" class="slice" onclick="swap(this.id); check();"><img src="test2.php" /></div>
<div id="3" class="slice" onclick="swap(this.id); check();"><img src="test3.php" /></div>
<div id="4" class="slice" onclick="swap(this.id); check();"><img src="test4.php" /></div>
<div id="5" class="slice" onclick="swap(this.id); check();"><img src="test5.php" /></div>
<div id="6" class="slice" onclick="swap(this.id); check();"><img src="test6.php" /></div>
<div id="7" class="slice" onclick="swap(this.id); check();"><img src="test7.php" /></div>
<div id="8" class="slice" onclick="swap(this.id); check();"><img src="test8.php" /></div>
<div id="9" class="slice" onclick="swap(this.id); check();"><img src="test9.php" /></div>
<div id="10" class="slice" onclick="swap(this.id); check();"><img src="test10.php" /></div>
<div id="11" class="slice" onclick="swap(this.id); check();"><img src="test11.php" /></div>
<div id="12" class="slice" onclick="swap(this.id); check();"><img src="test12.php" /></div>
<div id="13" class="slice" onclick="swap(this.id); check();"><img src="test13.php" /></div>
<div id="14" class="slice" onclick="swap(this.id); check();"><img src="test14.php" /></div>
<div id="15" class="slice" onclick="swap(this.id); check();"><img src="test15.php" /></div>
<div id="16" class="slice" onclick="swap(this.id); check();"></div>
</div>
<div style="float:right;" class="box">
<div class="slice"><img src="test1.php" /></div>
<div class="slice"><img src="test2.php" /></div>
<div class="slice"><img src="test3.php" /></div>
<div class="slice"><img src="test4.php" /></div>
<div class="slice"><img src="test5.php" /></div>
<div class="slice"><img src="test6.php" /></div>
<div class="slice"><img src="test7.php" /></div>
<div class="slice"><img src="test8.php" /></div>
<div class="slice"><img src="test9.php" /></div>
<div class="slice"><img src="test10.php" /></div>
<div class="slice"><img src="test11.php" /></div>
<div class="slice"><img src="test12.php" /></div>
<div class="slice"><img src="test13.php" /></div>
<div class="slice"><img src="test14.php" /></div>
<div class="slice"><img src="test15.php" /></div>
<div class="slice"><img src="test16.php" /></div>
</div>
<div style="float:left; margin:0 0 0 50px;">
  <h3>&lt;&lt; Puzzle it up and solve!</h3></div>
<div style="float:right; margin:0 50px 0 0;">
  <h3>This one is for help!&gt;&gt;</h3></div>
</body>
</html>

How does the code work?

First of all, there are 15 php scripts which are used to crop an image named ‘x’ into 15 pieces. Now another file “index.php” includes a division (<div> tags) with dimensions 512×512 pixels, which is further sliced by 16 other divisions of 128×128 pixels each. Calling those 15 php files into index.php with the help of <img> tag into all but the 16th 128×128 pixel division, will generate the full image with just the last block missing. As it was mentioned earlier, the 16th division will remain empty so that the puzzle works.

Now comes the tricky part, i.e., creating the 16th empty block. This is done using Javascript. The small 128×128 divisions are assigned ‘id=1’ to ‘id=15’ and the Javascript calls a function whenever you click on any of the divisions. The function recognizes the ‘id’ of the clicked division and checks if any one of the adjacent divisions is empty. If any empty division is found then the part of the image is shifted from the division where the mouse was clicked to the empty division and if no empty division is found then the user has clicked on a wrong part of the image which can’t be swapped. The function is called every time any division is clicked.

How can you use your own image?

In the downloaded folder replace the 7labs image with your own image and rename it with ‘x’.

How to play?

You will need a php server stack (e.g., LAMP) in order to execute the php codes. Once you have it, run the ‘index.php‘ and click on a part or block of the image so that it moves to the empty space adjacent to it. Ask your friend to puzzle it up and try to solve it yourself.


About the Author

Name: roy

Share your thoughts