No description, website, or topics provided.
Switch branches/tags
Nothing to show
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.

This version of the game is not random, you can - in theory - solve it. Every position of the game generates a tile with a specific value in a specific point

This project has been made to teach in a react+redux workshop, it is not production ready and some choices are to illustrate a functionality even if not the "best".

To play with this code (you can use redux devtool to undo etc)

alt text

To start:

  • npm start

Test and coverage:

  • npm test

Build (go to /dist)

  • npm run copy & webpack --env=dist


  • Step 1: Clone the boilerplate (
  • Step 2: draw a board
  • Step 3: add tiles
  • Step 4: add Sass (change the require on top of app.js)
  • Step 5: add keyboard listeners
  • Step 6: move tiles to state and add the first movement concept
  • Step 7: time to write a test (failing isolated test for business logic)
  • Step 7: Right movement, no merging
  • Step 8: full algorithm
  • Step 9: Adding CSS
  • Step 10: Adding reducer yo react-webpack-redux:reducer main
  • Step 11: Moving state to reducer (breakes the game)
  • Step 12: Creating actions, dispatching, moving business logic (game is back)
  • Step 13: Testing the game logic in the reducer
  • Step 14: Animation
  • Step 15: Score
  • Step 16: Redux dev tool
  • Step 17: Moving business logic
  • Step 18: Adding logic to add a tile
  • Step 19: Adding game over concept
  • Step 20: Adding new tile animation
  • Step 21: Moving tiles to its own component
  • Step 22: Game Over Screen (Trigger by invalid move not by "no more moves")
  • Step 23: Real game over
  • Step 24: Deciding where next tile goes
  • Step 25: Restart button
  • Step 26: Fix test (yeah, I should have done it earlier...)
  • Step 27: Adding not on non implemented test
  • Step 28: Generating different values of tiles