Click here to Skip to main content
11,934,783 members (48,696 online)
Click here to Skip to main content
Add your own
alternative version


51 bookmarked

Image Puzzle: A Html Game

, 10 Mar 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
An html 2d game to describe some basic game development tips in html/css and javascript.


This is the article for beginners who wants to start the game development in web with some simple approach and without using any heavy tools. This article provides a simplified steps to start with the 2d game development using html/css and javascript. Here, I am presenting on how to create an Image Puzzle game where you can drag and drop image parts to swap and re-arrange the parts to form the complete image.

You can play the game online here:


The rules of the game is simple. You just need to drag and drop the broken image pieces to swap it. You need to swap them in a way it form the correct image. The number of steps taken to drag and drop the image parts will be counted. So, you may wish to think and try to do it in minimum possible steps. The correct image is provided at right hand side for your reference.

The screen for the game looks like this:

Image Puzzle

Image Puzzle: Solved

About the code

To understand it, we can devide the code in 3 parts. Html, Css and Javascript. Html part contains simple tags to form the layout of the game. CSS provides a bit of responsive design and Javascript part contains the main logic of the game. Few of the important steps of the game are as follows:

Breaking the Images

For images to look like broken into nxn different parts, where n is the number of parts each side, nxn li element has been used in a ul. The display property of each li has been set to inline-block so that it should appear like a grid. The background image of each li has been set to display 1/(nxn)th part of the image only and position of the background image has been set accordingly. data-value attribute has been assigned to each li to identify the index of the piece.

The code for the same looks like this:

    setImage: function (images, gridSize) {
        gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
        var percentage = 100 / (gridSize - 1);
        var image = images[Math.floor(Math.random() * images.length)];
        $('#actualImage').attr('src', image.src);
        for (var i = 0; i < gridSize * gridSize; i++) {
            var xpos = (percentage * (i % gridSize)) + '%';
            var ypos = (percentage * Math.floor(i / gridSize)) + '%';
            var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
                'background-image': 'url(' + image.src + ')',
                'background-size': (gridSize * 100) + '%',
                'background-position': xpos + ' ' + ypos,
                'width': 400 / gridSize,
                'height': 400 / gridSize

Here you can see that broken effect is achieved using simple background-image and background-position styles. After the borken images has been set, in the right order, randomize method is used to randomize the pieces. In the game, user has to re-arrange the pieces to form the complete image.

The gridSize indicates that how many parts the image needs to be broken each side (horizontally as well as vertically). The hard-coded value 400 is the size of the box. Please note that you might want to get rid of this hard coded value. I will update this with a variable in my next update. Based on gridSize, I have divided the level of puzzle into 3 parts: easy, medium and hard. Easy being 3x3 grid, medium 4x4 and hard 5x5. You may implement the same in a different way just by changing the value of corresponding radio button.

Randomizing the broken parts

After setting up the images' broken parts, as you can see in the last line of previous code block, randomize method is used to randomize the broken pieces. For this, a small generic randomize function is created to randomize any jquery element collection.

The implementation of randomize method is as follows

$.fn.randomize = function (selector) {
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function () {
        $(this).children(selector).sort(function () {
            return Math.round(Math.random()) - 0.5;
    return this;

Here, we are simply looping through each child element of the given selector and changing its position based on a random number. The random number should be between 0 and the number of elements in collection.

Drag and Drop of Pieces

To make each broken piece draggable, jquery draggable has been used. Please make sure that jquery-ui.js is included in your page to implement draggable/droppable functionality.

enableSwapping: function (elem) {
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            helper: "clone"
            drop: function (event, ui) {
                var $dragElem = $(ui.draggable).clone().replaceAll(this);

                currentList = $('#sortable > li').map(function (i, el) { 
                    return $(el).attr('data-value'); });
                if (isSorted(currentList))


As you can see in the above code snippet, after each drop, isSorted is being called to check whether the pieces have been sorted or not. Sorting of each piece is being checked based on the data-value attribute of the containing li element. If the pieces are sorted, it means the picture is complete.

Setting up the styles

A very minimum css has been used to make it simple to understand. The used css allows the page to be responsive and you can play the game in your tablet or mobile also. No third party library for css has been used so that you can understand the native css styling easily.

Counting the steps

Counting the steps or any user action is most common part of any game. Here too, it has been implemented with a simple step. After each drop, it checks if the picture is formed. If yes, game is over and if no, increment the stepCount variable by 1. Then, update the stepCount in UI using jquery.


Timer is also one of the important part of most of the games. Based on the feedback provided by the readers, a basic timer has been implemented to check the number of seconds it takes to complete the puzzle. The timer is being started at the start of the game and will call tick method every second to update the timer. Tick method is once called from the start method and then calls to itself after each second (using javascript SetTimeout) recursively and update the time elapsed in the UI using JQuery. When the picture is completed i.e., the game is over, final time-taken is calculated and shown at the output using JQuery.

Below is the implementation of timer method.
   tick: function () {
        var now = new Date().getTime();
        var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
        timerFunction = setTimeout(imagePuzzle.tick, 1000);

Please note that the getTime() method gives the number of milli-seconds passed since 01/01/1970. I would welcome if you would suggest the better way to calculate the time between two DateTime in javascript. I would not like to rely on 1000 milli-second gap in setTimeout() to increment to 1 second.

Browser Compatibility

I have avoided using Html 5 or CSS 3 for the sake of simplicity so that it can work in most of the browser. This game may not work for older browser < IE8 due to the JQuery version used. If you wish to use this game in older broswer versions too, you may simply replace the script reference to the older JQuery version (1.9 or earlier). The latest JQuery version doesn't support older browser.

The attached sample code should work in most of the latest browser. I have tested it in IE 11 and Google Chrome.

Future Consideration

Well, it is an article for beginners who wants to start with game development with simple approach. In future, I will implement and demonstrate the sound effects and a bit of animations too to make it more dynamic. You may also wish to consider to implement the timer and time-taken to complete the picture. For now, enjoy playing the game.


Aug 29, 2014: First version release.

Feb 08, 2015: Update: Added difficulty level based on the number of broken parts. Based on feedback by user.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Anurag Gandhi
Architect SPAN Infotech (India) Pvt. Ltd.
India India
Anurag Gandhi currently works in web application design/development and has done so for many years now as he is passionate about programming.
He is extensively involved in Asp.Net and Asp.Net MVC web application architecture, AngularJs, design and development. His languages of choice are C#, Asp.Net, MVC, Asp, C, C++. But he is familiar with many other coding languages. He works with MS Sql Server as the database architecture of choice.
He is active in programming communities and loves to share his knowledge with other developers whenever he gets the opportunity.
He is also a passionate chess player.

He can be contacted at:

You may also be interested in...

Comments and Discussions

QuestionFamily Tree Quiz with 19x8 pieces Pin
Member 1171532524-May-15 10:16
memberMember 1171532524-May-15 10:16 
QuestionDifficulty level Pin
Mohammed Sharif8-Apr-15 6:47
memberMohammed Sharif8-Apr-15 6:47 
QuestionNot Compatible with Bootstrap Pin
solomon20124-Mar-15 1:55
membersolomon20124-Mar-15 1:55 
AnswerRe: Not Compatible with Bootstrap Pin
Anurag Gandhi24-Mar-15 7:47
professionalAnurag Gandhi24-Mar-15 7:47 
GeneralRe: Not Compatible with Bootstrap Pin
solomon20125-Mar-15 1:20
membersolomon20125-Mar-15 1:20 
SuggestionLet me help you a bit. Pin
Carlos Luis11-Mar-15 10:23
professionalCarlos Luis11-Mar-15 10:23 
AnswerRe: Let me help you a bit. Pin
Anurag Gandhi12-Mar-15 7:38
professionalAnurag Gandhi12-Mar-15 7:38 
Questiondrag not working on android devices Pin
Member 1146027722-Feb-15 17:09
memberMember 1146027722-Feb-15 17:09 
AnswerRe: drag not working on android devices Pin
Anurag Gandhi8-Mar-15 18:38
professionalAnurag Gandhi8-Mar-15 18:38 
AnswerRe: drag not working on android devices Pin
joan_rp9-Mar-15 3:54
memberjoan_rp9-Mar-15 3:54 
GeneralRe: drag not working on android devices Pin
Anurag Gandhi10-Mar-15 5:36
professionalAnurag Gandhi10-Mar-15 5:36 
Questiontimer Pin
Member 1146027717-Feb-15 20:47
memberMember 1146027717-Feb-15 20:47 
AnswerRe: timer Pin
Anurag Gandhi17-Feb-15 20:58
professionalAnurag Gandhi17-Feb-15 20:58 
GeneralRe: timer Pin
Member 1146553719-Feb-15 17:36
memberMember 1146553719-Feb-15 17:36 
GeneralRe: timer Pin
Member 1146027722-Feb-15 17:11
memberMember 1146027722-Feb-15 17:11 
GeneralRe: timer Pin
JEST2425-Feb-15 2:20
memberJEST2425-Feb-15 2:20 
GeneralRe: timer Pin
Anurag Gandhi26-Feb-15 8:05
professionalAnurag Gandhi26-Feb-15 8:05 
GeneralRe: timer Pin
JEST242-Mar-15 13:49
memberJEST242-Mar-15 13:49 
GeneralRe: timer Pin
JEST245-Mar-15 12:40
memberJEST245-Mar-15 12:40 
GeneralRe: timer Pin
Anurag Gandhi10-Mar-15 5:39
professionalAnurag Gandhi10-Mar-15 5:39 
QuestionPieces Pin
Member 114327396-Feb-15 18:46
memberMember 114327396-Feb-15 18:46 
AnswerRe: Pieces Pin
Anurag Gandhi7-Feb-15 2:14
professionalAnurag Gandhi7-Feb-15 2:14 
GeneralRe: Pieces Pin
Anurag Gandhi7-Feb-15 2:17
professionalAnurag Gandhi7-Feb-15 2:17 
GeneralRe: Pieces Pin
Member 114327398-Feb-15 2:53
memberMember 114327398-Feb-15 2:53 
AnswerRe: Pieces Pin
Anurag Gandhi8-Feb-15 3:36
professionalAnurag Gandhi8-Feb-15 3:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 10 Mar 2015
Article Copyright 2014 by Anurag Gandhi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid