Project 2048

Using our shared knowledge of CSS, HTML, and Javascript we developed a similar concept to the original 2048.

Comment

Inspiration

We got inspired by the single player game: 2048. It seemed tough to figure out how to make it work, but we know it wouldn't be impossible.

The objective of the game is to slide numbered tiles on a grid to combine them to create a tile with the number 2048.

What it does

It is a replica of the popular 2048 game. Click here to check it out!

2048

How we built it

We divided the work into three different logic:

  • Game logic - Starting with the HTML portion of the code, we added the necessary grids and linked them to CSS. We checked for keyboard inputs and how they should refer to the right moves in the game. This portion also consisted of checking for blocked moves and realizing when it is game over.
  • Canvas logic - Initializing a canvas with a 4x4 grid block took us a bit of time to figure out.
  • Animation logic - This logic mainly focused on animations and took us the most time to implement. We had to read into a lot of existing animation knowledge, and even now we couldn't figure out how to implement the sliding logic the game is widely known for.

Challenges we ran into

Our biggest challenge was finding the right documentation and examples of how to implement animations for our board game. The other challenge was also into figure out how to organize and divide HTML document tree so its easier to apply customization to each element.

Accomplishments that we're proud of

We are proud of successfully creating an application for other hackers to enjoy and tweak in their free time!

What we learned

  • We learned how JavaScipt and HTML/CSS can be a powerful combination to make a complicated application. We also learned how to write more efficiently in ES6 style and the importance of discussing a plan for implementation before the actual implementation.
  • It was our first time using Netlify to deploy the web version of the app, and realized how easy it is to setup that feature!

What's next for Project 2048

  1. Add an easy, normal, and hard mode for the game with different grid sizes.
    • For example, easy would be 5x5, normal would be 4x4, and hard would be 3x3.
  2. Add some powerups like removing a number from a certain square or adding a row or column for extra space.
  3. We could combine 2048 with other games like tetris, wordle, or pacman.
  4. Add some smoother animations like the sliding motion that is in the original 2048.

Built With

Share this project:

Updates