2048 Game Remake on Webpage

The game was based on the ideas and the prototype of 2048 by gabrielecirulli.

Usage

• Could use arrow keys (up, down, left, and right), w/s/a/d, and W/S/A/D to control the moving direction of the blocks.

Libraries & Resources

• jQuery 3.5.1
• Images
  • Win: src/img/win.png Retrieved from link優勝杯のイラスト.
  • Lose: src/img/lose.png Retrieved from キノコ雲のイラスト.

Structure

• The layout was based on CSS flex and grid diplay modes.
• jQuery was utilized to manipulate DOM objects.
• jQuery promise was used for smoother animated transitions.

Progress

• Set up the layout of the game.
• Set up the directory structure of the system.
• Finished planning on the future work.
• Finished the layout on the board (4*4).
• Implemented the moving functions.
• Implemented the point-calculating functions.
• Utilized cookie to record the best score.
• Finished the game lose condition.
• Added keyboard control.

Plan

• Add sliding gesture detection (touch events on smartphones).
• Tune the layout for mobile devices.

Notice

• The permissions and restrictions of the original 2048 game (The MIT License (MIT)) should also be applied on this webpage version.
• This piece of work was created solely for practicing and sharing my webpage programming skills. Please do not use it for commercial purposes.