Puzzle Game Using jQuery

Introduction

This is a simple puzzle game developed using pure HTML and jQuery. This puzzle consists of an image which is divided into fifteen small parts or we could call them segments. These parts are randomly arranged on the puzzle board. Your task isthat you have to rearrange the image segments in proper order. There are no limitations for moves or time; you can take your own time to complete this puzzle.

Background

This puzzle game is mainly based on swapping of divs on puzzle board, Puzzle board consist s of a total of 16 small divs, 15 image divs and one empty div. Div position is set on the puzzle board on random basis. When you click on any div adjacent to the empty div position of selected div and empty div gets changed.

Check Live Demo here.

Code

To swap clicked square and the current empty square, I have written the below function which will swap the position of these divs or segments using left and top co-ordinates.