/slide-game

A slide puzzle game made with HTML 5 canvas.

Primary LanguageJavaScript

Slide Puzzle

Image of puzzle

Link to hosted puzzle.

Who doesn't like a good puzzle? I made this mainly as an exercise for learning code. My learning goals:

  • familiarize myself with the HTML 5 canvas.
  • organize code into ES6 classes.
  • challenge myself with the game logic.

Built With

ES6 Javascript, HTML 5 canvas, bootstrap.

Getting Started

Enter the board width in squares and click 'new game'. Slide pieces by clicking them so that you get the numbers in order from left to right in rows. It doesn't matter where the empty square ends up.

Prerequisites

Chrome browser

Installing

open index.html

Completed Features

  • A random puzzle is generated.
  • Slide pieces by clicking on them.
  • A message is displayed when a user wins.
  • Moves are animated.
  • User can select the board size.

Next Steps

Features that you would like to add at some point in the future.

  • Annimated reset of board
  • Animated scrambling of board on start.
  • AI solver.

Author

Brendt Bly

Acknowledgments

Thanks to Juan Mendes for his rounded rectangle function: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas