Skip to content
An Elm implementation of Gabriele Cirulli's 2048 game
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.npmrc setup new application May 31, 2019
LICENSE.txt setup new application May 31, 2019

Elm 2048

An Elm version of Gabriele Cirulli's 2048 game

Deployed to Github Pages:

MIT License

I wrote this to learn more about Elm.

Possibly helpful/useful/interesting features:

  1. Save game state to local storage.
  • JSON Encoding of Int, Bool, Union Type, and List of Tile records.
  • Send game state to JavaScript where it is saved in local storage.
  1. Load game state on application startup.
  • JavaScript extracts game state from local storage, converts to JSON and passes to application via flags.
  • Handle successful or failed JSON decoding of game state.
  1. Model Tiles using Html.Keyed to allow CSS animations to work effectively.
  2. Use Events.onKeyDown and Subscriptions to handle arrow keys for Tile movement.
    • Additional JavaScript code to prevent arrow keyboard events bubbling and causing page scroll.
  3. Use JavaScript and incoming Port to turn touch interface swipes into Tile movements.
  4. Game state record is nested one-level deep in Model.
    • Helper functions work with Update Msg branches to cleanly handle game state record manipulation and updates.

This project is bootstrapped with Create Elm App. Readme generated by elm-app:

Build dependencies:

  • nvm and node 10.15.3 installed
  • yarn (or just npm)

To build locally:

$ git clone
$ cd elm-2048
$ nvm use
$ yarn
$ yarn build-css
$ elm-app start

Local development: open two shells and run:

$ elm-app start
$ yarn watch-css

Deploy to Github Pages:

$ yarn run build-deploy
You can’t perform that action at this time.