The Memory Arcana

In Game Screenshot of Memory Arcana.
Level Completion Window
Number of Sets Increases as the Player Completes Levels
Game Over once the Timer Runs Out

Inspiration

The Memory Arcana draws inspiration from the mystical world of tarot cards. The idea was to create a visually captivating and mentally stimulating game that challenges players’ memory and strategy while immersing them in an enchanting 3D environment. The tarot-inspired design and gameplay mechanics aim to evoke a sense of mystery, discovery, and accomplishment. As a beginner in both Three.js and AWS, this project was also an opportunity to learn and experiment with new technologies.

What it does

The Memory Arcana is a 3D card-matching game where players flip cards to find pairs. The game starts with a simple 2x2 grid and progressively increases in difficulty, adding more pairs and larger grids as levels are completed. Players have a total of 10 minutes to complete as many levels as possible, earning points based on their speed and skill. Immersive visuals, sound effects, and dynamic animations enhance the experience, making it engaging for players of all ages.

How I built it

Frontend Development:
Built using Three.js for rendering 3D scenes and creating card meshes.
Integrated GSAP for smooth animations like card flipping and tilting.
Designed a responsive UI using HTML/CSS for menus, overlays, and score displays.
Game Logic:
Implemented dynamic level progression with increasing grid sizes.
Used algorithms for shuffling cards and checking matches.
Added scoring logic based on levels completed and remaining time.
Audio Integration:
Added sound effects for key events (e.g., flips, matches, level completions).
Hosting:
Deployed using AWS Amplify, which provided scalable hosting with CI/CD pipelines.
Learning Support:
Leveraged Amazon Q, an AI tool, to guide the development process by providing solutions for Three.js challenges, debugging assistance, and deployment strategies.

Challenges I ran into

Learning Curve:
As a beginner in Three.js, understanding its concepts (e.g., scene setup, camera positioning, mesh creation) was challenging.
AWS Amplify's hosting workflow was unfamiliar at first.
Dynamic Grid Layouts:
Calculating optimal grid layouts for varying numbers of cards required trial and error to ensure consistent card sizes across levels.
Browser Autoplay Restrictions:
Implementing sound effects required handling browser restrictions on audio playback.
Asset Management:
Ensuring all textures and sounds were correctly loaded during development and deployment was tricky.

Accomplishments that I proud of

Successfully built a fully functional 3D memory game despite limited experience with Three.js and AWS.
Created visually appealing card designs inspired by tarot aesthetics.
Implemented smooth animations and immersive sound effects that enhanced gameplay.
Deployed the game on AWS Amplify, ensuring scalability and accessibility.
Learned to use Amazon Q effectively to overcome technical challenges.

What I learned

Gained hands-on experience with:
Three.js for 3D rendering.
GSAP for animations.
AWS Amplify for hosting static websites.
Improved problem-solving skills by debugging complex issues with Amazon Q's guidance.
Learned how to manage assets efficiently in Vite-based projects.
Understood the importance of user experience through sound effects, responsive design, and visual feedback.