Multiplayer 2048 Game

A multiplayer 2048 game to play on the same PC! the retro style :D

Comment 1

Inspiration

This was built and fully hosted in 2 hours !! with the help and incredible power of Amazon Q. I wanted to test the power of AWS, especially Amazon Q through this project. I wanted to create a basic but fun and challenging game for multi player. I have always loved 2048 as solo player game, but I thought making it multiplayer would add to the fun and make it more competitive. 2048 is a great brain teaser game, which combines strategy with math and puzzles which puts this game in a perfect quick gameplay.

What it does

This is a 2-player 2048 game. Both players can play on the same PC, one player uses 'WASD' while the other uses the arrow keys to control their respective boards. The game has a 1-minute timer, before which both the players must try to score maximum points. The game ends when either the time has run out or both the players have reached a state where no further movements are possible (game over).

How we built it

  • AWS Services:

    • Hosting: Our React app is hosted on Amplify. I also hosted with S3 and CloudFront as a CDN.
    • Serverless Backend: We leveraged AWS Lambda + Amazon API Gateway to create an API for storing and retrieving high scores.

  • Front-End (React): We used React to create a 2-player version of 2048, managing two separate boards. Player 1 controls the board with WASD, while Player 2 controls theirs with arrow keys. We added a timer to limit each round and used local state management (React Hooks) to track each board, score, and game status.

    • Database: High scores and game data are persisted in Amazon DynamoDB.
    • Additional Integrations: We used IAM roles to manage permissions, potentially adding Amplify for an easier CI/CD flow in the future.

  • Game Logic: The 2048 mechanics (merging tiles, detecting game over, etc.) were adapted to run on separate boards. We introduced a “time left” counter that stops both players’ boards when it hits zero and determines the winner.

Use of Amazon Q

  • Amazon Q made it possible to make this app within 2 hours. It suggested to me the steps and possible Amazon services that can be used in this app to optimize the function of the app.
  • It suggested on how to host this app online and various options AWS offers and which is best suited. This made it very simple for me to host the app.
  • Q helped me document the app by adding comments which improved readability and made it extremely easy to update the code.
  • It was easy to write prompts, Q understood the task pretty accurately.

Challenges we ran into

  1. Synchronizing Two Boards: Managing separate board states for two players in one React component introduced complexity, especially around event handling (WASD vs. arrow keys).
  2. Detecting Simultaneous Game Over: Ensuring that if both boards ran out of moves, the game would immediately end (instead of waiting for another key press) required careful state checks.
  3. AWS Configurations:
    • Setting up the correct IAM permissions for Lambda to access DynamoDB.
    • Ensuring CloudFront and S3 were correctly configured for static hosting and SSL.
  4. Time Constraints: Implementing features like real-time updates or advanced animations were deprioritized in favor of core functionality and AWS integration.

Accomplishments that we're proud of

  1. Complete 2-Player Mode: Successfully adapted the single-player logic into two independent boards, each with distinct controls and score tracking.
  2. Persistent High Scores: Building out a serverless architecture (API Gateway + Lambda + DynamoDB) so players’ best scores are stored indefinitely in the cloud.
  3. AWS Integration: We managed to incorporate multiple AWS services—S3, CloudFront, Lambda, API Gateway, DynamoDB—in a cohesive way, demonstrating a scalable, serverless approach.
  4. User-Friendly Interface: Even with the complexity of two boards and a timer, the interface remains straightforward, allowing for easy gameplay and immediate feedback on winners.

What we learned

  1. React Hooks & State Management: Handling multiple states (two boards, timer, high scores) in a single application reinforced our understanding of React Hooks.
  2. Serverless Best Practices: We gained hands-on experience configuring a Lambda-based API, hooking it to DynamoDB, and managing cross-service permissions via IAM.
  3. AWS Architecture: The interplay between S3 static hosting, CloudFront caching, and the benefits of a serverless database taught us how to design a modern, scalable architecture.
  4. Game Logic Adaptation: Converting 2048 to a real-time, 2-player model with separate inputs was a valuable exercise in modularizing and reusing core logic.

What's next for Multiplayer 2048 Game

  • More Difficulty levels: adding difficulty configuration like changing the board size, or adding more tiles after each move to increase variations.
  • User Authentication: Implement Amazon Cognito for user sign-in, so high scores and player identities persist across sessions more securely.
  • Real-Time Mode: Integrate WebSocket APIs or AWS AppSync (GraphQL subscriptions) for truly live competition, which would open up new possibilities (e.g., spectating matches).
  • Cross-Device Support & Swipe Controls: Add mobile swipe gestures, letting users play on touch devices.
  • Deeper Analytics: Stream event data through Kinesis or Pinpoint to track usage trends, average game duration, and user engagement.

These improvements will keep the gameplay fresh, scale with new users, and provide a richer experience overall.

Share this project:

Updates