Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
public
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
webpack.config.js

README.md

15-puzzle

About

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.

Run on the Web

The site generated by this repo is hosted at http://ignacioprado.com/15-puzzle/

Run Locally

  1. Make sure you have NodeJS installed on your machine. You can find instructions for downloading and installation here: https://nodejs.org/en/download/
  2. Clone the repo
  3. Register as a developer at Unsplash: https://unsplash.com/developers
  4. Generate your API keys at Unsplash and set the public key in the unsplash field in /config/default.json of this repo (you will not need your private key to run the app)
  5. Type npm start from the command line in the root directory of the repo
  6. Visit localhost:8000 in your browser
You can’t perform that action at this time.