A detailed HTML puzzle game

This article is Love programming original translation, reproduced please see the text at the end of the reprint requirements, thank you for your cooperation!

Game Introduction

This article is dedicated to web game developers to develop a game with simple development tools. This article describes the development of a 2d game with HTML, CSS, and JavaScript in just a few simple steps. Here, I want to show you how to create a puzzle game, in this game you can drag small tiles to make a full larger image.

Click here to see the game effect.

Game rules

The rules of the game are very simple, you just drag the pieces of chopped blocks to form a full larger image. You need the right method to end up with a complete picture. The number of times a small picture is dragged in the game is counted. So. You should try to complete the game with minimal steps. The correct picture effect is on the right side of the interface.

The game is as follows:

About Code

To better understand the code, we divide the code into three parts, Html,css and Javasctipt. The HTML code includes simple tags to lay out the game. CSS provides a range of inductive designs. The JavaScript part is the main logic code of the game. The main code of the game is as follows:

Smash Pictures

A picture is cut into 16 small pieces. Put these 16 small pieces under the UL's Li tag. The is display property under the LI tag is set to Inline-block. The Background–image property of each Li tag is set to 16 1 parts of this picture, and the position of the background map is set according to the corresponding settings. The implementation code is as follows:

For (i++) {

        Xpos = (33.33 * ('% '; 

        Ypos = (Math.  Floor ('% ';  

        $ (' <li class= ' item "data-value=" ' + (' ></li> ').  CSS ({  

            Image.  ') ',

            Ypos

    });

At this point you can see the effect of the broken picture, with a sort button on the right, and click to randomly arrange the small fragments using the random number generation method. In the game, users need to rearrange these small fragments to complete this picture.

How to drag a picture

In order to let the broken small picture can be dragged, we need to refer to the jquery draggable plugin. It is important to make sure that Jquery-ui.js is already referenced in your page.

function (elem) {

        $ (elem). draggable ({ 

            ' #droppable ',

            ' Outer ',

            "Invalid",

            "Clone"

        });

        $ (elem). droppable ({ 

            Function (UI) {

                $ (UI. draggable). Clone (). ReplaceAll (this);    

                $ (this). replaceall (UI.  draggable);   

                $ (' #sortable > Li '). Map (function ($ (el).  attr (' data-value ');});      

                if (issorted (currentlist)) 

                    $ (' #actualImageBox '). empty (). HTML ($ (' #gameOver ').  HTML ());     

                Imagepuzzle. enableswapping (this); 

                Imagepuzzle. enableswapping ($dragElem); 

            }

        });

    }    

We can see that every time a small picture is moved, issorted will check to see if each small picture is reordered. The small picture being sorted will check the Data-value property of the Li tag it is in. If the small pictures are arranged in a normal order, the game is finished.

Set style

A small piece of very short CSS code is very easy to understand. Use these CSS code to complete the responsive design, so that the game can be perfectly displayed on tablets and mobile phones. There is no reference to any third-party CSS code, so these CSS code is very easy to understand.

Count the number of moves

Counting the number of steps a user has completed is the most common part of game design. The same is true of this game, where a simple step is applied. After each drag, check that the picture has completed successfully. If it is the end of the game, if not, the number of moves plus 1. Here we use the jquery UI to complete the number of moves plus 1.

Browser compatibility

I didn't use any HTML5 and CSS3 properties, so this game can support most browsers. This game cannot be run in IE8 or lower. If you want to make this game compatible with IE8, simply replace the quoted jquery version with the 1.9 version or the older version. The latest jquery version does not support these low-version browsers.

The referenced code needs to run in the latest browser and has been tested with IE11 and Google Chrome to run flawlessly.

Game improvements

All right. This article is a simple code for developers to introduce the development of this puzzle game. In the game improvements we can add some music and some animations to make our game more vibrant. As a developer, you can also think of improved solutions, such as adding time statistics to the game's completion. Let's get here. Have a good time playing the game.

Original link: http://www.w2bc.com/Article/5898
English Original: Image puzzle:a Html Game
Translation Love Programming – carrying a pot charger

Online preview Source Download

A detailed HTML puzzle game