Sliding Tiles Game
Created by Maggie Yan
Languages used HTML, CSS, Javascript
Objective This project was for an assignment in my Intro to Front-End Web Development course. The objective of the project was create a web application game of an 8-piece sliding tile puzzle, where the player, using both arrow and WASD keys, can infinitely play the assembling jigsaw game until the correct image is formed. The purpose of this project was to maintain data structures, such as keeping track of where all the tiles are, while the user is moving the tiles around.
The Process
In the Javascript code, the grid was represented using a 2D array. The code keeps track of the location of the blank tile instead of having to search for it within the 2D array. Each piece of the puzzle is given a data- attribute so that it can be easily referred to in the code when trying to move pieces around. First, low level functions like getRightTile() were written, which would simpy just return the tile right of the blank tile. Then, a higher level function like doMove() was written, taking the direction from a lower level function, determining which tile to slide and then moving that tile one space in given direction. Data structures and global variables were always updated after a call to the higher level function. Keyboard event handlers were finally added, so that the buttons or keys pressed would do the right thing.
A snippet of Javascript code showing the higher level function, doMove(). See full code on Github.