Click here to Skip to main content
15,860,943 members
Articles / Web Development / XHTML

Image Puzzle: An HTML Game

Rate me:
Please Sign up or sign in to vote.
4.89/5 (91 votes)
19 Aug 2019CPOL6 min read 236K   10.4K   125   77
An HTML 2D game to describe some basic game development tips in HTML/CSS and JavaScript.

Introduction

This is the article for beginners who want to start the game development in web with some simple approach and without using any heavy tools. This article provides simplified steps to start with the 2D game development using HTML/CSS and JavaScript. Here, I am presenting 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. Now, we have plain JavaScript version also for the same game in GitHub.

You can play the game online here.

Rules

The rules of the game are simple. You just need to drag and drop the broken image pieces to swap it. You need to swap them in a way that it forms 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 the 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 divide 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:

JavaScript
setImage: function (images, gridSize) {
    console.log(gridSize);
    gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
    console.log(gridSize);
    var percentage = 100 / (gridSize - 1);
    var image = images[Math.floor(Math.random() * images.length)];
    $('#imgTitle').html(image.title);
    $('#actualImage').attr('src', image.src);
    $('#sortable').empty();
    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
        });
        $('#sortable').append(li);
    }
    $('#sortable').randomize();
}

Here, you can see that broken effect is achieved using simple background-image and background-position styles. After the broken images have 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 the corresponding radio button.

Randomizing the Broken Parts

After setting up the images' broken parts, as you can see in the last line of the 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:

JavaScript
$.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;
        }).remove().appendTo(this);
    });
    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.

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

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

                imagePuzzle.enableSwapping(this);
                imagePuzzle.enableSwapping($dragElem);
            }
        });
    }   

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 the 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, the game is over and if no, increment the stepCount variable by 1. Then, update the stepCount in UI using jquery.

Timer

Timer is also one of the important parts of most 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.
JavaScript
tick: function () {
     var now = new Date().getTime();
     var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
     $('#timerPanel').text(elapsedTime);
     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 DateTimes in JavaScript. I would not like to rely on 1000 milli-second gap in setTimeout() to increment to 1 second.

Levels

Based on the feedback given by users, 3 difficulty levels have been added in the game:

  1. Easy
  2. Medium
  3. Hard

In our example, choosing easy sets the puzzle in 3x3 matrix, medium in 4x4 matrix and hard is set to 5x5 matrix.

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 browsers. This game may not work for older browsers < IE11 due to the latest JavaScript code used. If you wish to use this game in older browser 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 browsers. I have tested it in IE 11 and Google Chrome.

Future Consideration

Well, it is an article for beginners who want to start with game development with a 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. Any suggestions to improve the game are welcome.

History

  • 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.
  • Mar 12, 2017: Added project to github and other minor updates
  • May 13, 2019: Added plain JavaScript version GitHub link

License

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


Written By
Architect
India India
Anurag Gandhi is a Freelance Developer and Consultant, Architect, Blogger, Speaker, and Ex Microsoft Employee. He is passionate about programming.
He is extensively involved in Asp.Net Core, MVC/Web API, Node/Express, Microsoft Azure/Cloud, web application hosting/architecture, Angular, AngularJs, design, and development. His languages of choice are C#, Node/Express, JavaScript, Asp .NET MVC, Asp, C, C++. He is familiar with many other programming languages as well. He mostly works with MS SQL Server as the preferred database and has worked with Redis, MySQL, Oracle, MS Access, etc. also.
He is active in programming communities and loves to share the knowledge with others whenever he gets the time for it.
He is also a passionate chess player.
Linked in Profile: https://in.linkedin.com/in/anuraggandhi
He can be contacted at soft.gandhi@gmail.com

Comments and Discussions

 
GeneralRe: Pieces Pin
JEST248-Feb-15 3:39
JEST248-Feb-15 3:39 
QuestionDrag not working Pin
nithyananthams28-Aug-14 11:31
professionalnithyananthams28-Aug-14 11:31 
AnswerRe: Drag not working Pin
Anurag Gandhi28-Aug-14 11:38
professionalAnurag Gandhi28-Aug-14 11:38 
AnswerRe: Drag not working Pin
Anurag Gandhi28-Aug-14 11:48
professionalAnurag Gandhi28-Aug-14 11:48 
GeneralRe: Drag not working Pin
Carsten V2.029-Aug-14 4:59
Carsten V2.029-Aug-14 4:59 
GeneralRe: Drag not working Pin
Anurag Gandhi29-Aug-14 5:28
professionalAnurag Gandhi29-Aug-14 5:28 
GeneralRe: Drag not working Pin
Carsten V2.029-Aug-14 8:03
Carsten V2.029-Aug-14 8:03 
AnswerRe: Drag not working Pin
aarif moh shaikh4-Oct-14 1:20
professionalaarif moh shaikh4-Oct-14 1:20 
Just Try to run it in Latest Version of Firefox and also run it on Google Chrome .
I am using Google chrome, it Working fine Smile | :)

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.