consulting and development

maps, GIS and geospatial software

The 2048 Game

Once again I was challenged with a code test for a frontend job; create a replicate of the 2048 game. Apparently, it is a rather well-known game, though I hadn’t heard of it before:

It has been replicated multiple times both in javascript and other languages. I decided it would require too much effort for me replicate the core functionality leaving little time to create a good UI, so I went looking for other implementations. I chose this github repo:

The code had a simple structure which made it simpler for me to re-write the code to my own structure using ES6 classes, Browserify, VueJS to name a few components. My code is in this repo:

Try the live demo here:

Or run it locally as a Docker container, e.g. like this:

The assignment: Create a replica of the game 2048

  • Create a simple 4×4 grid that is randomly populated with two tiles
  • Move the tiles when user presses arrow keys
  • Generate new tiles for every turn
  • Merge two colliding tiles into one
  • Apply the same color to tiles of same value
  • Display a message when the game is ‘won’ or when no more moves can be made
  • Add touch/mobile support – swipe to move the tiles
  • Add your own flavor and features as time permits