Details of an html puzzle game

Details of an html puzzle game

This article is an original translation of love programming. For more information, see the reprint requirements at the end of this Article. Thank you for your cooperation!

Game Introduction

This article is intended for web game developers to develop a game with simple development tools. This article describes how to use html, css, and javascript to develop a 2d game in just a few simple steps. Here, I want to show you how to create a puzzle game. In this game, you can drag a small block to create a complete big image.

Click here to view the game effect.

Game Rules

The game rules are very simple. You just need to drag the chopped image block to form a complete big picture. You must use the correct method to final build a complete image. The number of times a small image is dragged in the game will be counted. So. The game should be completed with the least steps possible. The correct image effect is displayed on the right side of the page.

The game is as follows:

Code

To better understand the code, we divide the code into three parts: html, css, and javaspt PT. Html code includes simple markup to layout the game. Css provides a series of inductive designs. Javascript is the main logic code of the game. The main code of the game is as follows:

Break an image

An image is cut into 16 small pieces. Place the 16 small pieces under ul's li label. Set the display attribute of is under the li label to inline-block. The background-image attribute of each Li tag is set to the first part of the image, and the position of the background image is set accordingly. The implementation code is as follows:

 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

    });

In this step, you can see the effect of the broken image. There is a Sort button on the right side. Click the random number generation method to randomly arrange the small fragments. In the game, users need to rearrange these fragments to complete the image.

Drag an image

To make small broken images accessible, We need to reference the jquery draggable plug-in. Make sure that the jquery-ui.js has been referenced in your page.

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);

            }

        });

    }    

We can see that every time the small image is moved, isSorted will check whether each small image is re-sorted. A small image being sorted will check the data-value Attribute of its li tag. If the pictures are arranged in normal order, the game will be completed.

Set Style

A short section of very short css code is very easy to understand. These css codes are used to complete responsive design, so that the game can be perfectly displayed on tablets and mobile phones. 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 completed by users is the most common part of game design. The same is true for this game, where a simple step is applied. After each drag, check whether the image is successfully completed. If the game ends, if not, the number of moves increases by 1. Here we use jquery ui to increase the number of moves by 1.

Browser compatibility

I didn't use any html5 or css3 attributes, so this game supports most browsers. This game cannot run in ie8 or earlier versions. If you want to make this game compatible with ie8, you just need to replace the referenced jquery version with version 1.9 or an older version. The latest jquery version does not support browsers of these earlier versions.

The referenced code needs to run in the latest browser. ie11 and google browsers have been tested to run perfectly.

Game Improvement

Okay. This article uses simple code to introduce developers to the development of this puzzle game. In terms of game improvement, we can add music and animation effects to make our game more dynamic. As a developer, you can also think about the improved solution, such as adding the time statistics function used by the game. That's it. Have a good time playing the game.

Link: http://www.w2bc.com/Article/5898
Image Puzzle: A Html Game
Translated by: Love programming-shouhu Chong

 

Download Online Preview source code

Modify the JS puzzle game

Can I use html5 and js to implement this? Can html5 + js process images? Or uploaded by the user.

I think this js cannot process images. You need to process the images in the background, cut the images, upload them to the front-end page, and then perform the puzzles, I don't know what language your background uses.
 
Find a piece of puzzle game software

Go to www.onlinedown.net/soft/8762.htm and check if this is what you need.