Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

readme.md

Play

https://number-slider.algogames.dev

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.

Algorithm

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!

https://number-slider.algogames.dev

Follow me on Twitter at Babakness.

About

number slider game -- moving number around on a matrix

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.