NumberWizard is a simple and engaging React Native application where users can play a number guessing game. The app guides the user through the process of picking a number between 1 and 99 and then tries to guess the number through a series of steps.
The Start Game Screen welcomes users with a magical theme and allows them to begin their journey. Users can input a number between 1 and 99 using a custom-styled input field that limits entries to two digits. The screen offers two themed buttons: "Clear the Mind" to reset the input, and "Begin the Spell" to start the game. The entire UI is designed with a captivating magical and wizardry aesthetic to immerse players in the game's atmosphere.
On the Game Screen, players witness the "Magical Creature" attempting to guess their chosen number. The current guess is prominently displayed in a stylized number container. Users can provide feedback using intuitive "+" and "-" buttons, indicating whether the actual number is higher or lower. The game keeps track of all previous guesses and displays them, adding to the challenge. To maintain fair play, the game incorporates logic to prevent user deception, ensuring an honest and engaging experience.
Current Guess:
Prevent User Deception:
Upon successful completion, players are greeted with a "Spell Complete!" message on the Game Over Screen. This screen provides a summary of the game, revealing the user's chosen number and the number of rounds it took to guess correctly. A thematic success image celebrates the accomplishment, and players can choose to "Cast a New Spell" to start another game, encouraging replayability.
The app features dynamic styling that adapts the UI based on screen size and orientation. It implements different layouts for portrait and landscape modes, ensuring an optimal viewing experience across various devices. Font sizes and spacing are responsive, adjusting to provide the best readability and usability regardless of the screen dimensions.
Landscape Mode:
Number Wizard utilizes several custom components to enhance its unique look and feel. These include a reusable and animated PrimaryButton, a themed Title component with platform-specific styling, a Card component for consistent styling of content containers, custom InstructionText for clear guidance, a styled NumberContainer for number display, and GuessLogItem for presenting each entry in the game log.
The app takes advantage of platform-specific features to provide a native feel on both iOS and Android. It uses the Chalkduster font on iOS and Serif font on Android, along with other platform-specific UI element styling to ensure the game looks and feels appropriate on each operating system.
Platform Specific Font Family:
To enhance accessibility and user experience, the app implements KeyboardAvoidingView for improved keyboard interaction and uses ScrollView to ensure all content is accessible on smaller screens. These features contribute to a smooth and frustration-free gaming experience for all users.
Keyboard Avoiding View:
Robust error handling is implemented throughout the app. It includes input validation with user-friendly error messages and utilizes the Alert component to display clear warnings for invalid inputs, guiding users to correct their actions without disrupting the game flow.
The app leverages React hooks for efficient state management, ensuring smooth transitions and updates throughout the game. For performance optimization, particularly in longer games, it uses FlatList to render the list of guesses, providing a smooth scrolling experience even with an extensive guess history.
To install and run the NumberWizard app on a simulator, follow these steps:
- Download the iOS build file from this link.
- Unzip the file.
- Open Xcode on your Mac.
- Choose your preferred iOS simulator.
- Drag and drop the unzipped file onto the simulator window.
- The app should install and launch automatically.
- Download the Android build file (.apk) from this link.
- Open Android Studio on your computer.
- Start your preferred Android emulator.
- Drag and drop the downloaded .apk file onto the emulator window.
- The app should install and launch automatically.
- Launch the NumberWizard app.
- Think of a number between 1 and 99.
- Enter your chosen number on the start screen.
- The magical creature will try to guess your number.
- Use the "+" and "-" buttons to guide the creature's guesses.
- Continue until the creature guesses your number correctly.
- View your game summary on the game over screen.
- Start a new game to play again!
- React Native
- Expo
- React Hooks (useState, useEffect)
- Custom components
- Responsive design with Dimensions API
- Platform-specific styling
If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.
Enjoy playing NumberWizard!