Tutorial Update: Puzzle Game Completion with HTML5 and Javascript

One of the more popular tutorials on the site is the Puzzle Game Basics with HTML5 and Javascript piece. Over the last few months I've had a lot of requests asking how to detect that the player has correctly ordered all the pieces. That's what we're looking at today. As you'll see, it's rather simple to implement!

I'm going to be using the completed code from the previous tutorial as the starting point. If you haven't checked out the puzzle game basics tutorial, you should do that now and then come back here when you're finished. If you're ready to go, continue on!

At the top of our javascript block, we have a list of variables we're using for the game that looks something like this:

var can;
var ctx;		
var img;
var clickX;
var clickY;
var selected1;
var selected2;		
var blockSize = 160;
var piecesArray = new Array();

All we want to do here is add another array. This array will hold the correct order of the puzzle pieces. I've named my array: correctOrder.

var can;
var ctx;		
var img;
var clickX;
var clickY;
var selected1;
var selected2;		
var blockSize = 160;
var piecesArray = new Array();
var correctOrder = new Array();

Next, we're going to make a slight change to the onImage1Load function as shown below.

function onImage1Load()
{
    var r;
    for(var i = 0; i < 4; i++)
    {
        for(var j = 0; j < 3; j++)
        {
            r = new Rectangle(i * blockSize, j * blockSize, i*blockSize + blockSize, j * blockSize + blockSize);
            piecesArray.push(r);
            correctOrder.push(r);
        }				
    }
			
    scrambleArray(piecesArray, 30);
    drawImage();
}

Notice that inside the double for loop, we are now pushing the rectangle piece into the correctOrder array, as well as the piecesArray. The difference is that we do not scramble the correctOrder array. We want this array to remain in the original order. Now when the user moves pieces, we will compare these two arrays. If they match up, then the user has correctly placed all the pieces.

Next we'll write a function to handle the compare. So go ahead and add the following function to your javascript.

function checkWinner()
{
    var match = true;
			
    for(var i = 0; i < piecesArray.length; i++)
    {
        if(piecesArray[i] != correctOrder[i])
        {
            match = false;
        }
    }
			
    if(match)
    {
        console.log('puzzle complete!');
    }
    else
    {
        console.log('not complete');
    }
}

This function is fairly simple, but let's walk through it together anyway. First we set a boolean, match, to true. Then we loop through all the game pieces in piecesArray. We compare each piece against the pieces in the correctOrder array. If any two pieces are not the same, then the puzzle is incomplete and we set our boolean to false. And really, though we have not done so here, we could break out of the loop at that point as well.

After the loop runs we check to see if our boolean is still true. If it is, that means no mismatches were found and the puzzle is complete! All that's left is to find a good place to call our new function. I think the end of the swapRects function is a great spot to do that! So find the swapRects function and add a call to checkWinner at the end of it as shown below.

function swapRects(r1, r2)
{
    var index1;
    var index2;
    var temp = r1;
			
    index1 = piecesArray.indexOf(r1);
    index2 = piecesArray.indexOf(r2);
			
    piecesArray[index1] = r2;
    piecesArray[index2] = temp;			
			
    checkWinner();
}

That's all there is to it! One new function and three lines of extraneous code! You can view the end result here. To see the console logs in chrome, press F12 and click the console tab if it isn't open by default.

Congratulations! You now know how to create a simple puzzle with HTML5 and you can detect completion!

Bookmark and Share

5 Responses to “Tutorial Update: Puzzle Game Completion with HTML5 and Javascript”

  1. H├ęctor says:

    Hi, great post! Now I understand it and it even seems easy! I have 2 questions, let’s see if you can help me!
    1. How can I show in some way on screen when the puzzle is done?
    2. How can I change the number of pieces to make it a little bit more difficult?
    Sorry, I amb very new at HTML! Thanks a lot!

  2. Rhuno says:

    There are a lot of ways to accomplish the first. You could just have an element on the page be hidden and then show it when the puzzle is complete or you could draw another image directly to the html5 canvas element. For more on html5 and the canvas element, I recommend checking out w3 schools: http://www.w3schools.com/html/html5_intro.asp

    As for your second question, I answered it for someone else here: http://rhuno.com/flashblog/2012/08/01/tutorial-puzzle-game-basics-with-html5-and-javascript/

  3. Jarek says:

    Hi, it works great, but I have one question. Is it possible in some way to count how many movements have been arranged puzzle? Thanks!!

  4. Cherry says:

    Nothing happens when I completed the puzzle? Was there supposed to pop up saying that you’ve completed the puzzle or something?

  5. Ziur says:

    hey i was wondering if you could possibly do something like the user will select an image thing to puzzle it out?

Leave a Reply

Subscribe to RSS feed FGS5 Badge