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.
ES6 Javascript, HTML 5 canvas, bootstrap.
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.
Chrome browser
open index.html
- 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.
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.
Brendt Bly
Thanks to Juan Mendes for his rounded rectangle function: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas