Skip to content

A sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. (React, Material-UI)

Notifications You must be signed in to change notification settings

ChrisWiles/Slide-Puzzle

Repository files navigation

Slider-Puzzle

The Slide-Puzzle is the generalised version of the 8-puzzle problem) The problem: The 8-puzzle problem is a puzzle popularized by Sam Loyd in the 1870s. It is played on a 3-by-3 grid with 8 square blocks labeled 1 through 8 and a blank square. The goal is to rearrange the blocks so that they are in order. The player is permitted to slide blocks horizontally or vertically into the blank square.

See Live Slider-Puzzle

User Stories

  • User slides tiles with arrow keys
  • User wins when all tiles are in order
  • User can see winning time
  • User can reset board
  • User can play a variety of board sizes
  • User can see top scores
  • User can set a top score
  • User can submit their top score

Tech

Slider-Puzzle uses a number of open source projects to work properly:

  • React - Open-source JavaScript library providing a view for data rendered as HTML
  • react-motion - A spring that solves your animation problems.
  • Heroku - Create, deploy, and manage apps in the cloud
  • Material UI - Google's material design UI components built with React.

Installation

Requires Node.js v6+ to run.

Install the dependencies and devDependencies and start the server.

  SET MONGOLAB_URI=mongodb://User:password@ds147995.mlab.com:47995/melodymap
  npm install
  npm run

Todos

  • Write tests
  • Add code comments
  • Mouse control
  • Add move history and option to watch replays
  • Add React Motion

http://i.imgur.com/PTBaev5.gif

About

A sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. (React, Material-UI)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published