https://github.com/mrglaster/js-picture-puzzle

Jigsaw Puzzle Game made with Javascript. Image for puzzle can be uploaded by user and after splited to different amount of pieces depended from difficulty level the user selected
https://github.com/mrglaster/js-picture-puzzle

axios css headbreaker html imgbb javascript jigsaw jigsaw-puzzle jigsaw-puzzle-game js nescss pure-javascript sweetalert

Last synced: about 2 months ago
JSON representation

Jigsaw Puzzle Game made with Javascript. Image for puzzle can be uploaded by user and after splited to different amount of pieces depended from difficulty level the user selected

• Host: GitHub
• URL: https://github.com/mrglaster/js-picture-puzzle
• Owner: mrglaster
• Created: 2022-12-17T16:06:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-12T02:51:09.000Z (about 3 years ago)
• Last Synced: 2025-01-15T07:11:35.640Z (over 1 year ago)
• Topics: axios, css, headbreaker, html, imgbb, javascript, jigsaw, jigsaw-puzzle, jigsaw-puzzle-game, js, nescss, pure-javascript, sweetalert
• Language: JavaScript
• Homepage:
• Size: 2.52 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## JavaScript Jigsaw Puzzle Game

Jigsaw Puzzle Game made with Javascript. Image for puzzle can be uploaded by user and after splited to different amount of pieces depended from difficulty level the user selected

### How to prepare for use? 

1) Download the project from repository 

  ```git clone https://github.com/mrglaster/js-picture-puzzle/```

2) [Get the API key for ImgBB](https://imgbb.com/api)

![alt text](https://github.com/mrglaster/js-picture-puzzle/blob/main/readme_images/image_5.png)

3) Find following lines in ```/scripts/main_menu.js```

  ```

  /**ImgBB API key */

  let API_KEY = 'USE YOUR OWN!'

  ```

4) Replace ```USE YOUR OWN!``` to your API key.

5) Open ```index.html``` in browser

6) Profit!

### Screenshots

![alt text](https://github.com/mrglaster/js-picture-puzzle/blob/main/readme_images/image_1.png)

![alt text](https://github.com/mrglaster/js-picture-puzzle/blob/main/readme_images/image_2.png)

![alt text](https://github.com/mrglaster/js-picture-puzzle/blob/main/readme_images/image_3.png)

![alt text](https://github.com/mrglaster/js-picture-puzzle/blob/main/readme_images/image_4.png)

### Used Libraries

1) [Axios HTTP Requests Library](https://github.com/axios/axios)

2) [SweetAlert Popup Messages Library](https://sweetalert.js.org/)

3) [Headbreaker Library](https://github.com/flbulgarelli/headbreaker)