This repo generates a picture puzzle variation on the classic 15-puzzle. A new puzzle is generated from a random image divided into 16 pieces. The bottom right-hand corner piece is then removed and the remaining pieces, including the emptied slot, are shuffled to initiate game play.
To solve the 15-puzzle, drag pieces vertically or horizontally adjacent to the empty slot and drop them into it. When the puzzle is solved, the pieces will compose the original source image with the empty slot in the bottom right-hand corner.
The UI is implemented in ReactJS and uses the Unsplash API to fetch random images.
The site generated by this repo is hosted at http://ignacioprado.com/15-puzzle/
- Make sure you have NodeJS installed on your machine. You can find instructions for downloading and installation here: https://nodejs.org/en/download/
- Clone the repo
- Register as a developer at Unsplash: https://unsplash.com/developers
- Generate your API keys at Unsplash and set the public key in the
unsplashfield in/config/default.jsonof this repo (you will not need your private key to run the app) - Type
npm startfrom the command line in the root directory of the repo - Visit
localhost:8000in your browser