Trivia Snake

Imagine a classic snake game, but with the added excitement of trivia questions & the ability to architect your own adventure to undertake alone or with your friends & family!

Comment

Inspiration

Growing up in the 90s if there was one game I played obsessively, it was the classic snake game on my very first phone - a Nokia 1100. Fast forward to 2020, what helped me keep my sanity was all the zoom calls with family where we would play trivia for hours on Kahoot! I wanted to see if I could combine the two and make a more challenging & fun game for friends and family to enjoy together.

What it does

Trivia Snake combines the addictive gameplay of the classic snake game with educational trivia in a multiplayer or singleplayer format:

Core Gameplay

  • Players control a snake on the game grid using arrow keys or WASD
  • The trivia question appears on the left of the grid with options from A to D
  • Multiple choice option letters are spread across the game board
  • Player must guide the snake to eat the letter corresponding to the correct option
  • Avoid collisions with walls and your own snake body

Singleplayer Mode

  • Questions appear in random order one at a time
  • Player must answer the question correctly to proceed to the next question
  • The game ends when either one of the following occurs - wrong answer selected, collision with the wall or collision with the snake body
  • Completing all questions successfully will display the leaderboard for that adventure, player with the highest score in the lowest time taken wins the 1st place

Multiplayer Mode

  • Player can either start a session or join an existing session using the session code
  • Once all players have joined the session and appear in the multiplayer lobby, the host can start the game
  • Questions appear in random order one at a time, with a 3 second count down timer before each question is displayed to all players at the same instant
  • Player must answer the question correctly within 30 secs to score a single point for that question
  • Once answered, the players wait for all other players to finish answering before moving on to the next question
  • The game ends when all questions of the trivia are answered and a leaderboard with every players score and total time taken to respond to questions is displayed
  • Player with the highest score in the lowest time taken wins the 1st place

Create your own Adventure

  • Players can create their own Trivia Quiz using the Create Custom Adventure button
  • Players can leverage AI to generate questions by providing a topic
  • Adventures must have a Title, Description, Cover Image, Genre & atleast one question with 4 options specified
  • An Adventure is only saved successfully after the contents of the trivia pass a profanity check by the AI

How I built it

The entire infrastructure is deployed using aws cdk.

Frontend Architecture

  • Built using React 18 with TypeScript for type safety
  • Responsive UI using Tailwind CSS and Shadcn/UI components
  • Framer Motion for smooth animations and transitions
  • Structured components for:
    • Game Screen with real-time score tracking
    • Multiplayer lobby screen
    • Question display and timer
    • Interactive snake grid
    • Create custom adventure

Backend Infrastructure

  • S3: Used for storing the FE code & game assets.
  • Cloudfront: Utilized for content delivery, in this case the web page.
  • API Gateway: RESTful API for the game to get/create adventures, save scores and get the leaderboard. Also leveraged websockets for the multiplayer functionality
  • Lambda: This is the game's backend where the API logic is implemented.
  • DynamoDB: It is used for storing game data and multiplayer game session info
  • Amazon Cognito: This is used for user authentication and authorization.
  • AWS Bedrock: Leveraged for AI capabilities using Claude Haiku 3.5

Challenges I ran into

I can group these into a few categories -

Amazon Q Developer Challenges

  • The AI seems to have a tough time closing the span tag in any HTML code it provided. I would always need to go through the provided code snippet and figure out where to add the missing span closing tags to ensure the code worked
  • When I would ask it to make multiple changes in the /dev mode, there were instances where it would forget to provide all the files it had modified. Since we get only 3 attempts to provide feedback, you need to start over again if this happens on your last feedback attempt
  • Similar to the above, it would sometimes say it made a change, but that change would be missing in the final changes it provided
  • Amazon Q Developer came awfully close to giving my the correct implementation for setting up cognito, but it wasn't a 100% accurate. This meant I had to go through the experience manually using AWS Console and debug what was missing.
  • It also suggested code that had been deprecated (or didnt exist) in the amplify library that AWS provides for react

AWS Account Challenges

  • I know this is a much wider issue that a lot of others are facing, but it was frustrating to suddenly discover that my account's on demand invoke quota for all the models had been set to 0. It required reaching out to customer support and waiting 24 hours before the limits were increased and I was given the ability to enable additional models

Accomplishments that I'm proud of

As a new dad of twins I have very little spare time anymore. I'm extremely proud of the fact that I could come up with an idea, execute using completely new tech and deploy it for my friends and family to use, all of it for FREE (sure Claude Haiku cost me a whooping $0.08, but I'm rounding down) AND with barely a few hours here and there thrown towards this!! Thats pretty AMAZING for me!!!

What I learned

Quite a few things -

  • how to use aws cdk to deploy infrastructure
  • how to build a multiplayer game with websockets
  • how to setup authentication with aws cognito
  • and finally how to get from ideation to a production ready application using Amazon Q Developer

What's next for Trivia Snake

Depending on feedback from friends and family I might iterate on the gameplay and improve the animation. I'd love to optimize this for touch so that it can be played on tablets and ensure WCAG compliance so that it can be truly accessible to anyone.

Built With

Share this project:

Updates