AWS Logo
Menu

The Memory Arcana

How i created a Tarot themed memory matching game with the help of Amazon Q for Amazon Game Builder Challenge.

Published Jan 12, 2025

Description

The Memory Arcana is a 3D memory card-matching game inspired by the aesthetics of tarot cards. Players embark on a mystical journey to test their memory and strategy by matching pairs of cards across progressively challenging levels. With its immersive visuals, captivating sound effects, and dynamic gameplay, the game offers an engaging experience for players of all ages.

How Amazon Q Helped Build Memory Arcana

As someone new to Three.js and AWS, building The Memory Arcana was an ambitious project. I had a strong desire to create a visually immersive 3D game, but my lack of experience with Three.js for rendering 3D graphics and AWS for deployment presented significant challenges. This is where Amazon Q, an advanced AI tool, became instrumental in turning my vision into reality.

1. Overcoming Inexperience with Three.js

Three.js is a powerful library for rendering 3D graphics, but as a beginner, I found it overwhelming to navigate its complexities. Amazon Q provided step-by-step guidance on:
  • Scene Setup: Helped configure the scene, camera, and renderer for optimal performance.
  • Card Creation: Guided me through creating 3D card meshes with textures for both the front and back faces.
  • Animations: Suggested using GSAP to implement smooth card-flipping animations and tilt effects for a more realistic appearance.
  • Grid Layouts: Designed efficient algorithms to dynamically calculate grid layouts based on the number of cards in each level.
Without Amazon Q's assistance, implementing these features would have required extensive trial and error. The tool simplified complex concepts, enabling me to focus on creativity rather than technical hurdles.

2. Designing Game Mechanics

As a novice game developer, I struggled to design engaging mechanics that balanced challenge and fun. Amazon Q helped refine the gameplay by:
  • Suggesting dynamic level progression where the number of card pairs increases with each level.
  • Proposing a scoring system that rewards both speed (remaining time) and skill (levels completed).
  • Recommending sound effects for key events (e.g., card flips, matches) to enhance player immersion.
These suggestions elevated the gameplay experience, making it intuitive yet rewarding for players.

3. Enhancing User Experience

Creating an engaging user experience was critical to the success of the game. Amazon Q provided insights into:
  • Visual Effects: Recommended adding subtle tilts to cards and glowing animations for matched pairs.
  • Sound Effects: Guided the integration of audio cues for flips, matches, level completions, and game completions.
  • Responsive Design: Ensured the game worked seamlessly across different screen sizes by dynamically adjusting camera positions and grid layouts.
These enhancements made the game visually appealing and immersive while maintaining smooth performance.

4. Deploying with AWS Amplify

Deploying the game was another significant challenge due to my limited experience with AWS services. Amazon Q simplified this process by:
  • Recommending AWS Amplify as a scalable hosting solution.
  • Guiding me through setting up CI/CD pipelines to automate deployments from my GitHub repository.
  • Ensuring that static assets like textures and sound effects were correctly handled using Amplify's hosting service.
  • Providing insights into future integrations, such as using AWS Cognito for authentication and AppSync/DynamoDB for storing leaderboard data.
With Amazon Q's help, I successfully deployed the game on AWS Amplify, ensuring global accessibility and scalability.

5. Bridging Knowledge Gaps

Throughout the development process, Amazon Q acted as a mentor by:
  • Explaining complex concepts in simple terms.
  • Providing code snippets and debugging tips tailored to my specific challenges.
  • Offering best practices for structuring Three.js projects and managing assets effectively.
Despite my initial inexperience, Amazon Q empowered me to build a fully functional 3D game that exceeded my expectations.

Game Mechanics

  1. Objective: Match all pairs of cards in each level before the timer runs out.
  2. Levels:
    • The game starts with 2 pairs of cards in a 2x2 grid.
    • Each level adds more pairs, increasing difficulty up to 21 pairs.
  3. Timer:
    • Players have a total of 10 minutes (600 seconds) to complete as many levels as possible.
    • When time runs out, the game ends, and the final score is displayed.
  4. Scoring:
    • Players earn points based on levels completed and remaining time: Final Score=(Levels Completed×1000)+(Remaining Time×10)Final Score=(Levels Completed×1000)+(Remaining Time×10)
  5. Sound Effects:
    • Flip Sound: Plays when a card is flipped.
    • Match Sound: Plays when two cards match.
    • Level Complete Sound: Plays upon completing a level.
    • Game Complete Sound: Plays when all levels are completed.
  6. Visual Effects:
    • Cards tilt slightly forward for a table-like appearance.
    • Subtle animations enhance the mystical ambiance.
In Game Screenshot

Technologies Used

  1. Frontend:
    • Three.js: For rendering 3D scenes, creating card meshes, and managing animations.
    • GSAP: For smooth animations like card flipping and transitions.
    • HTML/CSS/JavaScript: For UI elements like menus, overlays, and event handling.
  2. Audio Integration:
    • Custom sound effects (flipcard.mp3, match.wav, level-complete.wav, game-complete.mp3) enhance immersion.
  3. Build Tool:
    • Vite: Used for fast development and optimized production builds.
  4. Deployment:
    • Deployed using AWS Amplify for quick and seamless deployment.

AWS Services Used

  1. AWS Amplify Hosting:
    • Which simplified deployment by automatically setting up CI/CD pipelines connected to the project's GitHub Repo.
  2. Amazon S3:
    • For storing static assets which include card sprites and in game sound effects.
  3. Amazon S3:
    • For continuous guidance that was instrumental to the development of this game.

Future Enhancements

Authentication & Leaderboard

  • Use Amazon Cognito for user authentication (login/signup).
  • Integrate a leaderboard using AWS AppSync and DynamoDB to store high scores globally.

Multiplayer Mode

  • Implement real-time multiplayer using AWS AppSync to allow players to compete against each other.

My Experience Working Amazon Q

Amazon Q transformed what seemed like an overwhelming task into an achievable project. Its guidance allowed me to focus on creativity while overcoming technical challenges in both Three.js development and AWS deployment. The result is The Memory Arcana, a visually stunning and engaging memory game that showcases the power of learning through collaboration with AI tools like Amazon Q. This expanded section highlights your journey from inexperience to building a polished application with Amazon Q's guidance while showcasing your desire to learn and grow as a developer. Let me know if you'd like further refinements!
 

Comments