I Built this Game in 1 Hour!

Introduction

Game Concept and Mechanics

• Two players each have their own 4x4 grid.
• Player 1 controls movement with WASD, and Player 2 uses Arrow Keys.
• Every move merges matching tiles, doubling their value (just like the original 2048).
• There’s a countdown timer (60 seconds). Whoever has the higher score at the buzzer wins, unless both boards become stuck first, in which case the game ends immediately.
• Merging logic and scoring remain true to the original game, but the thrill comes from a live competition.

Outline of the AWS Services I Used

1. Amplify
   • I used Amplify to quickly host my app, it automatically detected that it was a react app and performed the necessary steps.
   • It was easy to update the code all I had to do was to add the next files to my github repository and the Amplify server would automatically detect the change and push the changes.
   • It made it easy to keep track of files as they were on github and also push the code version as per requirement.
2. Amazon S3 + Amazon CloudFront
   • As an alternative experiment, I also hosted my website on S3.
   • I store my React build artifacts in an S3 bucket.
   • I serve these files through CloudFront for global low-latency delivery and secure HTTPS access.
3. AWS Lambda + Amazon API Gateway
   • I wrote a simple Node.js Lambda function that accepts POST requests for saving scores, and GET requests for retrieving them.
   • API Gateway exposes /scores endpoints for my React app to call.
4. Amazon DynamoDB
   • I needed a serverless, flexible database for scores, so DynamoDB was a natural choice.
   • My Lambda stores each game’s final score, along with a timestamp and player ID.

My Development Journey

• Dual Keyboard Inputs: I had to carefully structure React’s event handlers so that WASD only updated Player 1’s board, and Arrow Keys only updated Player 2’s board.
• Simultaneous Game Over: If both boards run out of moves, the game must immediately declare a winner (or a tie). I used a React useEffect hook that checks each board’s status after any move.
• AWS Setup:
  • Giving my Lambda function the correct IAM policy for DynamoDB took some trial and error.
  • Integrating Amazon Q required exporting some data to QuickSight so I could type natural queries like “Which day had the highest average score?”
• React State Organization: Since each board needed the same merging, tile generation, and scoring logic, I wrote utility functions that each board could call independently.

Conclusion