# Yet another 2048 clone but this one may be suitable for learning how to design programs in Elm

**URL:** <https://discourse.elm-lang.org/t/yet-another-2048-clone-but-this-one-may-be-suitable-for-learning-how-to-design-programs-in-elm/1480>\
**Category:** Show and Tell\
**Created:** [July 11, 2018, 2:06pm UTC](https://discourse.elm-lang.org/t/yet-another-2048-clone-but-this-one-may-be-suitable-for-learning-how-to-design-programs-in-elm/1480 "2018-07-11T14:06:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dwayne](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dwayne/32/5478_2.png) [@dwayne](https://discourse.elm-lang.org/u/dwayne)\
**Post date:** [July 11, 2018, 2:06pm UTC](https://discourse.elm-lang.org/t/yet-another-2048-clone-but-this-one-may-be-suitable-for-learning-how-to-design-programs-in-elm/1480/1 "2018-07-11T14:06:45Z")

</div>

I wrote a 2048 clone which you can play [here](https://dwayne.github.io/elm-2048/). And the source code for it is [here](https://github.com/dwayne/elm-2048).

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](https://github.com/gabrielecirulli/2048) by [Gabriele Cirulli](https://gabrielecirulli.com/), 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](https://github.com/dwayne/elm-2048/commits/v1-sprint).

Finally, I organized the solution into a [series of commits](https://github.com/dwayne/elm-2048/commits/master) (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](https://github.com/dwayne/elm-2048/blob/d499ad39d59428b9e48b905390cae9e22af577c2/src/Game/Grid.elm#L153) 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](https://youtu.be/MlyGg-DIqnU?t=25m) 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](http://htdp.org/)._

**Next step**

The next thing I’d be working on is adding animations. I’d let you know how that goes. 🤞

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [July 21, 2018, 2:17pm UTC](https://discourse.elm-lang.org/t/yet-another-2048-clone-but-this-one-may-be-suitable-for-learning-how-to-design-programs-in-elm/1480/2 "2018-07-21T14:17:46Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.