This is a clone of 2048 implemented using React.
The game logic is implemented in ./src/components/mainBoard.jsx. It was much cleaner at first, but in order to get movement animations, a lot of state needs to be saved for each of the tiles on the board.
The view logic is in ./src/index.js. There is one main component called MainBoard which keeps a Board object as its state. It handles all the events by forwarding them to the Board appropriately, and then propagates the changes to its child components.
The Cell is used only for the lighter grey background when there is no tile on a given position.
The TileView is where most of the fun view stuff happens! It was the most fun to create as well! It receives a Tile in its props object and determines whether it is new or moving, and if it's moving - what are the source and the destination. Then it sets the appropriate CSS classes in order to trigger the correct animations.
The animations are implemented in CSS3. Since there is a separate class for each movement from cell A to cell B, those classes cannot be written directly in CSS (or, at least, it would be really suboptimal) and have to be generated. ./src/styles/style.css.
To run, simply start a you can use the React standard command.
npm run start
- Platform - VS Code
- Languages - HTML, CSS, Javascript
- Front-end - React.js