I wrote a 2048 clone which you can play here. And the source code for it is here.
The goals for this first version were the following:
- Implement all the rules of the game.
- Stop when you get to 2048.
- Minimal styling.
- No animations.
How I built it
This was my first time building this game so I first studied the original JavaScript source code by Gabriele Cirulli, which I must say was surprisingly well written.
Then, I did a short sprint to figure out how to put everything together in Elm. That work can be found in the v1-sprint branch.
Finally, I organized the solution into a series of commits (which interestingly can be done in about 9 incremental steps) that can be used to teach someone how to design and build the game.
The app is separated into four modules Game, Game.Config, Game.Grid and Game.List.
Game is where the main function lives and where TEA is used.
Game.Config is where all the configurable values of the game lives.
Game.Grid is a data structure (no view or update here) for representing the collection of tiles. It has functions to create grids (empty, fromList) and take grids apart (toList) since the Grid type is opaque. Functions for generating grids with random tiles (start, next). A function for moving tiles in a given direction on the grid and more.
And, Game.List just has a useful helper function.
Why
I looked through the source code of previous attempts to build a 2048 clone in Elm and hands down Gabriele’s JavaScript version looked way easier to understand.
I just felt that the Elm clones needed to be as easy to understand while still reaping all the benefits that Elm provides. I can’t say whether or not my code is any better since that’s for you to decide but I hope someone will use it to help them write better Elm programs. Your feedback will be appreciated.
N.B. If you watched Richard Feldman’s Elm Europe 2018 talk then the design of this clone is very much in line with what he said there. If you want a gentle introduction to that way of designing programs then I highly recommend that you read How to Design Programs.
Next step
The next thing I’d be working on is adding animations. I’d let you know how that goes. 