After over an year learning by the FCC curriculum, completing various projects and learning from online sources, i finally came to the point to start and complete my first self-driven project, and im pleased to share it with the FCC community! Its based on the 2048 game. Here are few things of note about the project:
- It uses basic JS DOM manipulations without additional frameworks/libraries. My aim was to become more familiar with this particular topic, as its barely represented on FCC lessons, yet is in the core of it all.
- The style sheets are rendered using SCSS. There is a loop which purpose is to generate classes representign every number tag in the game and assign it a distinguishable background color, as well as adjustable font colors and font sizes, for larger numbers to fit their containers.
- The HTML only places the skeleton of the page, the game grid itself is generated within the JS logic and uses a grid layout system.
- Game interaction is performed using arrow keys for keyboard users, as well as swipe direction detection for touchscreens(tablets, smartphones etc.).
- For movement animation effects, the app uses a second grid, which comes visible only when movement is performed and only for squares that are moving. The movement is performed using simple CSS translate and transition rules and no “animation” features.
- There are additional visual effects for when numbers collide and add up and to display score increasement.
- There is good size responsiveness to decrease the game grid and font size for smaller screens.
- It has a game-over effect as well as “new game” button to initiate a new game.
Here is a link to the Github live version, if you would like to play the game
Here is a link to the Github repo itself
A Codepen for those of you that would like to play with the code
Im most concerned if there are any leftover bugs to be found.
