Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Number slider

Flying as a kid, I remember getting these free square puzzles with a 4x4 grid of numbers on them. Each number was housed in a square. That last piece was missing, so you could slide the squares could slide around.

The objective of the game was to have someone scramble the board for you then solve it so that the numbers appeared sequentially, with the empty piece on the lower right side.


Making this game presents a number of neat challenges. The key algorithm to making this work is, given a matrix of numbers with size N*M, and empty piece, E; move each piece from a select piece P0 toward E.

Suppose we number each piece adjacent to P0 in an increasing fashion, ie P1, P2, ...Pn until we reach the empty square E. After the move, Pn will occupy the position of E, and each piece before it will move likewise until P0 is in the position of P1.

Finally, after P0 moves, the piece E is placed in its prior position.

Game Design

This game can be thought of as breaking down following the MVC structure. The main algorithms can be thought of as the Model, and the code manipulates the DOM as the Controller. Finally, the html page and the styles involved can be considered the View.

I use these names loosely, the essential idea is to break up our code into just enough abstractions to organize our code; but not so many as to create confusion.

Play around!

Have fun!

Follow me on Twitter at Babakness.


number slider game -- moving number around on a matrix






No releases published


No packages published