🎯 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:

Clone the repository:

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

Install dependencies:
```
npm install
# or
yarn install
```

💻 Usage / How to Run

Run the development server:
```
npm start
# or
npx expo start
```

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

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

Objective: Click the blue ball 10 times
Scoring: Each successful click counts as 1 point
Attempts: You have exactly 10 attempts total
Win Condition: Score 10 points (100% accuracy required)
Lose Condition: Miss any ball click (less than 10 points)
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.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/AmazingFeature)
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

mohammadfirmansyah/whatACatch