Anatomy of JavaScript Puzzle

What do you mean by JavaScript puzzle and what unique features does it have? JavaScript puzzle uses some simple features. To show the individual pieces of a picture it uses the concept of DHTML. Hence it gets rid from using multiple graphic files for various purposes.

We will discuss the code and the puzzle in this tutorial piece. How does the puzzle work? The puzzle just revolves around straight and forward shuffle the picture pieces puzzle. You can see one space blank and then other remaining pictures are floating in incorrect places. The player who is playing has to use the blank spaces so that everything gets settled at perfect position.

Now another puzzle type but you have similar scripts. The main difference in it is the way in which it is being generated. When you start making any image puzzle, you cut the whole picture in to small pieces. All the images that are cut are in equal sizes and you get the 16 small GIF files along with you. So you get from a large file to 16 small GIF files. This latest technique uses some more things and that includes using of different technique in JavaScript. This is helpful in creating little images Rather than any kind of copy paste approach it uses new approach to it.

You can also get help from script by yourself. This is a manipulative language and it cannot manipulate any image file. What are the methods of taking off the picture? How to slice it away from the puzzle? You need to give it an impression that you are slicing. The main trick behind is the way you set up the trick. How to do this? This is very simple, where you need to show starting 50 pixels and create a div tag. Further, different style is given along with different crop size. This way you are using the puzzle coding and managing in it.

[codesyntax lang=”html4strict”]

<div id="Holder" style="position: absolute; top: 200; left:100; clip : rect(0px, 50px, 50px, 0px)">


You may put anything inside it and it will give you 5o pixels cropped up picture. This constitutes a block of puzzle. With the help of some div-tags, you have to crop the images and then order out the whole block incorrectly so that it can be arranged in distorted order. With addition of functionality, we are helping the user so that he can manipulate the position. There are many extra problems that need to be solved.

If you have an image of 500*100 pixels then the blocks cannot be made a square of 50 pixels. This kind of division might not work properly. There are few line of codes that can be helpful in defining the image size. Further, you need to divide it according to the total blocks and this way determines the crop dimension. Here is the piece of coding that you need to write:

[codesyntax lang=”javascript”]

var rows = 4;
var lines = 4;
var Ihight, Iwidth, cellH, cellW;
BaseImg = new Image;
BaseImg.src = "birth_of_venus.jpg";
Ihight = BaseImg.height;
Iwidth = BaseImg.width;
cellH = parseFloat(Ihight/rows);
cellW = parseFloat(Iwidth/lines);


The variables cell H and cell W denote the dimensions of the image. And we use the same concept in this image too.
No what another problem we have in this is that the image is shown to the top corner where that image covers initial 50 pixels.  There is one more div tag needed.

You require it when you work upon the other areas. This div goes in to the initial one and then it is moved in different spaces. This is inside the initial div and you can further assume the initial div to be looked upon window where you are working from second div. Within the second dov tag we need to place <img> Tag. Following is the piece of coding that you need to perform:

[codesyntax lang=”html4strict”]

<div id="Holder" style="position: absolute; top: 200; left:100; clip : rect(0px, 50px, 50px, 0px)">
<div id="Inn" style="position: absolute; top:-100; left:-150;">
<img src="birth_of_venus.jpg" name="mag4" border="0">


In this coding, you can see the div, which is named Inn, in on the wrong side of position and it displays the top 100 pixel image from initial corner. The div is required to be on wrong side position so that it helps in lifting any image. This is kept into holder div. Now, you will find that the both of them are related with each other. Further, this holder div is nearly relative to its page itself on which it is working.

Let us find that the all elements working in this condition: The following set of code is the way by which you can set up all elements inside:

Use this code to build up rows as well as lines

[codesyntax lang=”javascript”]

var Divnum=0;
for (i=0; i<rows; i++) {
for (a=0; a<lines; a++) {
Makeholder(Divnum, Itop, Ileft, cellH, cellW);
Ileft = Ileft+cellW;
MakeInner(Divnum, Ctop, Cleft);
Cleft = Cleft-cellW;
Ileft = 100;
Cleft = 0;
Itop = Itop+cellH;
Ctop = Ctop-cellH;
function Makeholder(number, top, left, ctop, cleft)
HoldDiv[number] = '<div id="Holder'+number+'" style="position: absolute; top: '+top+'; left:'+left+'; clip : rect(0px, '+cleft+'px, '+ctop+'px, 0px)" onclick="pop('+number+')" >';
function MakeInner(number, top, left) {
InnerDiv[number] = '<div id="Inn'+number+'" style="position: absolute; top:'+top+'; left:'+left+';">';


With the help of this program, you create blocks inside the puzzle. Now what about those those are out of the order? We have the following set of codes to be performed:
The blocks here and there and you need to maintain it in your browser. Let’s take an array of 12 random unordered numbers:

[codesyntax lang=”javascript”]

RandNum: new Array(4,15,14,3,7,6,0,9,5,10,12,11,1);


Have your own array created, but be different from repeated numbers and with the help of this array, you need to write puzzle within the same window. For writing about the blocks, here are the codes:

[codesyntax lang=”javascript”]

for (q=0; q<cells; q++) {
var Rnumber = RandNum[q];
if (q != cells-1){
document.write('<img src="'+IMAGE+'" name="mag'+q+'" border="0">');
eval ("document.mag"+q+".src = BaseImg.src");


Now the last step that is remaining in this puzzle is the block movement and you are close to your JavaScript puzzle. The things move when you click hence there is no need of drag and drop style. You need to create an array and then this array keeps position of empty blocks that starts from sixteenth position. As soon as any block is called there is a pop up function and you have following coding:

[codesyntax lang=”javascript”]

AName = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);
function pop(val) {
for (a=0; a<AName.length; a++) {
if (AName[a] == val) {
Cell = a;
if (AName[Cell-1] == 15 || AName[Cell+1] == 15 || AName[Cell+4] == 15 || AName[Cell-4] == 15 ) {


Here the last line is there to keep checking whether the block user is suing is after fifteenth or not and then it starts changing its position accordingly. In final step, it changes its position of fifteenth block and then user can check it by clicking on the box.

We provide fast success in 70-640 certification along with 199-01 exam. You can also use our high quality rh131 dumps. We also offer up-to-dated 70-630 dumps and with definite guarantee of success in 70-181 exam.

Email this to someoneShare on Facebook0Share on Google+0Share on StumbleUpon39Tweet about this on TwitterShare on Reddit0Pin on Pinterest0Digg this

5 Responses to “Anatomy of JavaScript Puzzle”

  1. Nice concept. good walk-through on the steps and calculations
    needed. I would argue though that you use some very bad habits,
    especially the use of document.write, where it is simply unneeded.
    There are may valid ways of creating these elements using the DOM,
    and if you must use the string syntax, simply concatenate
    document.body.innerHTML. also – a question – why use the clip
    attribute? you can simply give the div normal dimenstions and
    overflow:hidden, or use a positioned background image instead
    (which would save you the extra div and image tags)

  2. So nice blog. Thanks for sharing. I think if everyone have a firm target, their dream must come true. Just believe yourself.

  3. I think if everyone have a firm target, their dream must come true. Just believe yourself.

  4. This can be normally an awesome weblog web-site. I’ve been back as soon as or two times more than the previous days.

  5. I believe that is one of the such a lot vital information for me.
    And i am happy reading your article. But wanna observation on few common things,
    The web site style is ideal, the articles is in point of fact nice : D.

    Good job, cheers

Leave a Reply