a jumbled mess
One of the first games I built - before board games and arcade games and word games - was a simple tile-sliding puzzle.
In this square of squares, you have to slide the pieces into the right places, from 1 to 15 (with a gap so you've always got somewhere to slide a tile to). At the time, my JavaScript knowledge (aka jQuery) was more limited, so instead of sliding with mousemove, it's just click listeners - and since there's only ever one gap, it's always clear where you want to push the piece. What is not clear is why I added a layer of invisible, clickable <div>s over the actual tiles.
Yeah... you're not actually clicking the tile, but an invisible area on top, whose values sort of carry through, I guess. The sliding itself is powered by a jQuery animation, which identifies the direction, then moves the square in question a set distance over the course of a set time - set, of course, by how big the board is.
The game knows you win when all of the elements are in their "home" position. This might be clever, but continuing to loop through everything even after hitting a false is not:
Another weird quirk - those numbers are actually sections of an image.
Yeah, all that weird inline CSS means that each tile is actually the entire "finished" board, but with a mask so only that one square is visible. This is massively wasteful for these number tiles, but sort of makes sense when you see it used on a custom image (by changing the background-image: url() attribute).
The strangest thing (well... second strangest, after line 37′s if (!(gridSize.length > 0)) {) is the animation on game startup. That janky jumbling isn't just for show: it's actually to ensure the board is solvable, by sliding to it one legal move at a time. In other words, no matter how weird this code might be, it definitely works.
tl;dr: jQuery animations really do simplify things; don't repeat yourself, like I do in that convoluted slide directions section; clip-path works great for image masks
project: tileSlider
