' background-position': xpos + ' ' + ypos, ' background-image': ' url(' + image.src + ' )', $( ' #actualImage').attr( ' src', image.src) GridSize = gridSize || 4 // If gridSize is null or not passed, default it as 4. data-value attribute has been assigned to each li to identify the index of the piece. 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. The display property of each li has been set to inline-block so that it should appear like a grid. Few of the important steps of the game are as follows: Breaking the Imagesįor 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. CSS provides a bit of responsive design and JavaScript part contains the main logic of the game. HTML part contains simple tags to form the layout of the game. To understand it, we can divide the code in 3 parts. ![]() The correct image is provided at the right hand side for your reference. So, you may wish to think and try to do it in minimum possible steps. The number of steps taken to drag and drop the image parts will be counted. You need to swap them in a way that it forms the correct image. You just need to drag and drop the broken image pieces to swap it. Now, we have plain JavaScript version also for the same game in GitHub. 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. ![]() This article provides simplified steps to start with the 2D game development using HTML/CSS and JavaScript. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |