A simple puzzle game where a player uploads any image by drag/drop or select a image, which is then splitted into grids of specified rows and columns. After that they shuffle the grids and then can solve the puzzle. I have built it using HTMl,CSS/Bootstrap, JavaScript/Jquery. I would appreciate every contribution in making the project more elegant. Also, it would be a very valuable and important step in correcting any errors or bugs if they exist in it.
You can visit this link to have an overview of my work here ➡️ (https://bhaskarworld.github.io/Brain-Puzzle/)
- User can select any image of their choice.
- User can increase/decrease the difficulty level by defining the number of Rows & Columns.
| HTML | CSS | JavaScript | Bootstrap |
|---|---|---|---|
 |
 |
 |
 |
Step 1: Enter Rows and Columns to divide get a puzzle grid of row X col.
Step 2: Choose a picture either by clicking on the puzzle grid or by performing drag & drop on the puzzle grid.
Step 3: Hit Shuffle to shuffle the chosen image in the grid.
Step 4: Now solve the puzzle.
Rule 1: You can swap two cut image piece at a time to arrange and solve the puzzle.
Rule 2: You can swap any piece either with the NORTH piece or SOUTH piece or EAST piece or WEST piece.
Rule 3: Each swap you perform will increase Number of moves.
Rule 4: Enjoy Playing!
- Display the Actual Image for solving reference
- Make the game a bit tougher by letting the user solve the puzzle, provided the image is rotated by a multiple of 90deg
- Improve the UI.
Bhaskarjyoti Sarma Bhaskarjyoti Sarma's GitHub < Send mail @ bhaskarjyotisarma85@gmail.com