FlipIt - Memory Card Game
FlipIt! is a mobile memory card game designed to challenge and improve memory skills while providing an engaging, themed experience. Players can select between two fun themes — Universe and Mario — and choose from three difficulty levels (easy, medium, hard) to test their memory skills. The application utilizes an appealing and engaging user interface, which makes users come back to it for fun and cognitive practice.
Technologies
- React Native
- Expo
- JavaScript
Purpose
This is an example of a personal project I undertook to show how to create a mobile game interaction using new technologies like Expo and React Native, which I had never worked with before. The project's objective was to understand a new tech stack and attempt to map out a user interface in a mobile environment, manage the game state, and create game components within a mobile environment that could be easily reused.
My Role
I was the sole developer and designer for the project, which meant that I managed all the development phases:
- UI/UX design.
- Frontend and Backend logic.
- Animations, Game logic, and State management.
Special thanks to Carmen Ansio for the card component design used in the Super Mario Bros - Memory Game which is available for free use in Figma.
Technologies Used
- Expo: Chosen or easier development and deployment of the app. Reason to choose Expo because it is a framework and platform built around React Native and it streamlines the development process. It also provides a set of tool and services that simplify tasks such as building, testing, deploying mobile apps.
- JavaScript: Chosen for the core functionality and game logic. A natural choice for writing app's logic, a widely-used versatile language that ensure compatibility across platforms and it also has a large ecosystem of libraries to enhance functionality.
- React Native: Chosen for building the mobile app and creating a native user experience. Easy to create a cross-platform app for both iOs and Android.
Development and Thought Process
The project started with sketches and designing user interfaces in Figma. I made sure to balance playfulness with accessibility, which meant the design would need to accommodate various themes and scale to different devices. I aimed at:
- Reusable Card Component Design: Designing card components that could be used multiple times.
- State Management for Game Progression: Effectively managing state for varying levels of game progression.
- Smooth Animations and Responsive Layouts: Animation and layout responsiveness should be smooth.
My goal was for the app to appear polished despite working around a simple concept. I prioritized satisfying control layouts and touches.
Artboards and Features
Home screen: Users select a theme and level of difficulty before they start a game. Designed to be playful within expectations, featuring large bold icons.
Theme #1 - Universe: This theme features planets, stars and galaxies for card images. The background would be in a toned palette with the moon in the middle.
Theme #2 - Mario: This theme features classic Mario Characters and elements.
Rules Page: This screen shows simple instructions on how to play. Level mechanisms are explained alongside matching rules.
Congratulations Page: This screen displays the game results and allows the player to start a new game.
Challenges
Managing Game State Across Themes and Difficulties: The most complex part was managing the game state across themes and difficulties. I had to ensure that switching themes or restarting games would correctly reset all states without glitches, and I had to manage moves and matched cards between themes and difficulties.
Memory Optimization and Efficient Image Loading: Another challenge was optimizing memory usage. It was crucial to store and load images efficiently to prevent lag on low-end devices. To solve this, I used Async Storage to store image URLs locally and implemented conditional rendering to minimize unnecessary network requests. , ensuring a smooth and accessible experience for all users.
Conclusion and Reflection
This project was a deep dive into mobile development with a new tech stack. I gained confidence in React Native and Expo while learning about mobile performance considerations.
Next Steps
- Custom Image Upload: Add a custom image upload feature so users can personalize their card decks.
- A scoring and timer system Implement a scoring and timer system to track performance and encourage competition.