🎯 What A Catch

A fun and addictive ball-catching game built with React Native and Expo. Test your reflexes by clicking the moving ball 10 times to win! This cross-platform game demonstrates responsive UI design, state management, and game logic implementation.

📚 Documentation

• Contributing Guide - Learn how to contribute
• Changelog - Version history and release notes

✨ Key Features

• Interactive Gameplay: Click the randomly moving ball to score points
• Score Tracking: Real-time score display showing hits out of total attempts
• Win/Lose Conditions: Achieve 10 successful clicks to win the game
• Responsive Design: Adapts to different screen sizes (mobile, tablet, desktop)
• Cross-Platform: Works seamlessly on iOS, Android, and Web
• Smooth Animations: Ball repositions randomly after each click
• Game Reset: Play again functionality after game completion

📱 Screenshots / Demo

┌────────────────────────────────────┐
│   Click the ball 10 times to win! │
│        Score: 7 / 9                │
├────────────────────────────────────┤
│ ┌────────────────────────────────┐ │
│ │                                │ │
│ │         🔵                     │ │
│ │                                │ │
│ │                                │ │
│ │                  🔵            │ │
│ │                                │ │
│ │                                │ │
│ │    🔵                          │ │
│ │                                │ │
│ └────────────────────────────────┘ │
│        (Yellow game area)          │
└────────────────────────────────────┘

🛠️ Technologies Used

• React Native - v0.81.5 (Cross-platform mobile framework)
• React - v19.1.0 (UI library)
• Expo - v54.0.22 (Development platform)
• Expo Metro Runtime - v6.1.2 (Metro bundler integration)
• Expo Status Bar - v3.0.8 (Status bar component)

📂 Project Structure

whatACatch/
├── App.js                 # Main game component with logic
├── index.js               # App entry point (Expo registration)
├── app.json               # Expo configuration
├── eas.json               # EAS Build configuration
├── package.json           # Dependencies and scripts
├── assets/                # Images, icons, splash screen
├── .expo/                 # Local Expo metadata
└── .gitignore             # Git ignore rules

🚀 Setup & Installation

Before you begin, make sure you have the following installed:

• Node.js >= 16.0
• npm or yarn
• Expo CLI (optional, can use npx expo)

Follow these steps to get your development environment running:

1. Clone the repository:

   git clone https://github.com/mohammadfirmansyah/whatACatch.git
   cd whatACatch

2. Install dependencies:

   npm install
   # or
   yarn install

💻 Usage / How to Run

1. Run the development server:

   npm start
   # or
   npx expo start

2. Run on specific platforms:

   # Android
   npm run android
   # or npx expo start --android
   
   # iOS (macOS only)
   npm run ios
   # or npx expo start --ios
   
   # Web
   npm run web
   # or npx expo start --web

3. Follow the instructions in the terminal to open the app on your simulator or physical device using the Expo Go app.

📝 Important Code Explanations

Core Feature: Ball Movement & Click Detection

The game uses React Native's positioning system to randomly move the ball within the yellow game area:

// Generate random position within game boundaries
const moveBall = () => {
  // Restrict ball to 40% of screen height (yellow box area)
  const top = Math.random() * (height * 0.4);
  
  // 90% width of yellow box minus ball size for proper boundaries
  const left = Math.random() * ((width * 0.9) - 25);
  
  setBallPosition({ top, left });
};

This design ensures the ball always appears within visible boundaries and creates unpredictable movement patterns.

Score Tracking & Game Logic

const handleBallClick = () => {
  setAttempts(attempts + 1);  // Track total attempts
  setScore(score + 1);         // Increment score on successful hit
  
  if(attempts == 9) {
    checkGameStatus();         // Check win/lose after 10 attempts
  } else {
    moveBall();                // Move ball to new position
  }
};

Separating hit and miss handlers allows accurate tracking of player performance.

Platform-Specific Alerts

// Cross-platform alert implementation
if (platform == 'web') {
  window.alert('You Win! You clicked the ball correctly 10 out of 10 times!');
  resetGame();
} else {
  Alert.alert('You Win!', 'You clicked the ball correctly 10 out of 10 times!', [
    { text: 'Play Again', onPress: resetGame },
  ]);
}

Platform detection ensures native alerts on mobile and browser alerts on web for consistent UX.

📖 Learning Outcomes

This project is a great way to learn and practice:

• ✅ State Management: Using useState and useEffect for game state
• ✅ Event Handling: Managing touch/click events with Pressable
• ✅ Responsive Layout: Using Dimensions API for screen adaptation
• ✅ Conditional Rendering: Platform-specific code execution
• ✅ Game Logic: Implementing win/lose conditions and score tracking
• ✅ Random Positioning: Generating random coordinates within boundaries
• ✅ Cross-Platform Development: Writing code that works on iOS, Android, and Web
• ✅ Component Lifecycle: Using React hooks for initialization

🎮 Game Rules

1. Objective: Click the blue ball 10 times
2. Scoring: Each successful click counts as 1 point
3. Attempts: You have exactly 10 attempts total
4. Win Condition: Score 10 points (100% accuracy required)
5. Lose Condition: Miss any ball click (less than 10 points)
6. Reset: Game automatically resets after completion

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for more details on how to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

👨‍💻 Developer

• Mohammad Firman Syah
• Project Link: https://github.com/mohammadfirmansyah/whatACatch

---

Note: For production use, consider adding features like difficulty levels, high score tracking, sound effects, and improved animations.

Built with ❤️ using React Native & Expo