Click here to Skip to main content
Click here to Skip to main content

Image Puzzle: A Html Game

, 24 Sep 2014 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.

Introduction

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: http://gandhisoft.com/ImagePuzzle/puzzle.html

Rules

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 16 different parts, 16 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/16th 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:

    for (var i = 0; i < 16; i++) {
        var xpos = (33.33 * (i % 4)) + '%';
        var ypos = (33.33 * Math.floor(i / 4)) + '%';
        var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
            'background-image': 'url(' + image.src + ')',
            'background-position': xpos + ' ' + ypos
    });

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.

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) {
        $(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 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.

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 time-taken to complete the picture. For now, enjoy playing the game.

History

Aug 29, 2014: First version release.

License

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

Share

About the Author

Anurag Gandhi
Technical Lead
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: soft.gandhi@gmail.com
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionDrag not working Pinprofessionalnithyananthamn28-Aug-14 12:31 
AnswerRe: Drag not working PinprofessionalAnurag Gandhi28-Aug-14 12:38 
AnswerRe: Drag not working PinprofessionalAnurag Gandhi28-Aug-14 12:48 
GeneralRe: Drag not working PinmemberCarsten V2.029-Aug-14 5:59 
GeneralRe: Drag not working PinprofessionalAnurag Gandhi29-Aug-14 6:28 
GeneralRe: Drag not working [modified] PinmemberCarsten V2.029-Aug-14 9:03 
AnswerRe: Drag not working Pinprofessionalaarif moh shaikh4-Oct-14 2:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web02 | 2.8.1411019.1 | Last Updated 24 Sep 2014
Article Copyright 2014 by Anurag Gandhi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid