A modern, feature-rich Chrome Dino Game (T-Rex Runner) clone built with React Native, Expo, and TypeScript. Experience the classic game with enhanced graphics, persistent scoring, and cross-platform compatibility.
- Smooth Physics Engine: Custom gravity simulation and collision detection
- Responsive Controls: Touch-based jumping with haptic feedback
- Dynamic Obstacles: Randomly spawning cactus obstacles
- Frame-Rate Independent: Consistent 60fps gameplay across all devices
- Game Over & Restart: Seamless game restart functionality
- Top 5 Leaderboard: Persistent score storage with AsyncStorage
- Real-time Score Display: Live score updates during gameplay
- Target Score System: Dynamic motivation with next score to beat
- Score Statistics: Highest, average, and total games played
- Cross-Session Persistence: Scores saved between app sessions
- Animated Home Screen: Smooth fade-in animations and pulse effects
- Professional Design: Modern gradients, shadows, and visual feedback
- Responsive Layout: Optimized for all screen sizes
- Interactive Elements: Back button, score displays, and navigation
- Visual Progress Indicators: Score difference and achievement feedback
- Memory Management: Efficient caching and lazy loading
- Optimized Rendering: useCallback and useMemo for expensive operations
- Storage Optimization: Singleton patterns and efficient serialization
- Cross-Platform: Native performance on iOS, Android, and Web
- React Native 0.79.5: Cross-platform mobile development
- Expo 50.0.0: Development platform and build tools
- TypeScript 5.8.3: Type-safe development
- Expo Router: File-based navigation system
- Custom Game Engine: requestAnimationFrame-based game loop
- Physics Simulation: Custom gravity and collision detection
- Matter.js: Advanced physics for complex interactions
- React Native Game Engine: Alternative game engine implementation
- React Context: Global state management with useReducer
- AsyncStorage: Persistent local data storage
- Repository Pattern: Clean data access layer
- Service Layer: Business logic separation
- Expo Linear Gradient: Beautiful gradient backgrounds
- React Native Animated: Smooth animations and transitions
- Custom Components: Reusable UI components
- Responsive Design: Adaptive layouts for all devices
- ESLint: Code quality and consistency
- TypeScript: Static type checking
- Expo DevTools: Development and debugging
- Performance Monitoring: Built-in metrics tracking
- Node.js 18+
- npm or yarn
- Expo CLI
- iOS Simulator (macOS) or Android Emulator
-
Clone the repository
git clone https://github.com/Buffden/dino-dash.git cd dino-dash -
Install dependencies
npm install # or yarn install -
Start the development server
npx expo start
-
Run on your preferred platform
- iOS: Press
ior scan QR code with Camera app - Android: Press
aor scan QR code with Expo Go - Web: Press
wor visithttp://localhost:8081
- iOS: Press
# Start development server
npx expo start
# Run on specific platforms
npm run ios
npm run android
npm run web
# Build for production
expo build:ios
expo build:android
# Clear cache
expo start --clear- Detailed Design: Multi-component character with body, head, tail, legs, and spikes
- Responsive Physics: Realistic jumping mechanics with gravity
- Collision Optimization: Precise hitbox detection for smooth gameplay
- Visual Polish: Shadows, gradients, and smooth animations
- Dynamic Spawning: Random obstacle generation with configurable parameters
- Progressive Difficulty: Obstacles spawn more frequently over time
- Visual Variety: Different obstacle types and sizes
- Performance Optimized: Efficient rendering and cleanup
- Time-Based Scoring: 10 points per second for consistent progression
- Target System: Shows next score to beat for continuous motivation
- Achievement Feedback: Visual indicators when close to beating scores
- Statistics Tracking: Comprehensive game statistics and analytics
- Intuitive Controls: Simple tap-to-jump mechanics
- Visual Feedback: Score updates, animations, and progress indicators
- Seamless Navigation: Easy access to game, scores, and settings
- Cross-Platform: Consistent experience across all devices
- Repository Pattern: Clean data access and persistence
- Service Layer Pattern: Business logic separation
- Observer Pattern: Real-time state updates across components
- Strategy Pattern: Extensible score calculation methods
- Singleton Pattern: Performance-optimized service instances
// Centralized score state with useReducer
const [state, dispatch] = useReducer(scoreReducer, initialState);
// Actions for state updates
dispatch({ type: 'ADD_SCORE', payload: newScore });
dispatch({ type: 'SET_TOP_SCORES', payload: scores });ScoreProvider (Context)
├── ScoreService (Repository)
│ ├── AsyncStorageService (Persistence)
│ └── Performance Monitoring
├── Game Components
│ ├── SimpleDinoGame (Main Game)
│ ├── ScoreDisplay (UI)
│ └── GameOver (Modal)
└── Navigation Components
├── HomeScreen
├── TopScoresScreen
└── GameScreen
- Memory Management: Efficient caching with 5-minute validity
- Lazy Loading: Components loaded only when needed
- Batch Operations: Parallel data loading for better performance
- Frame Rate Independence: Consistent gameplay across devices
dino-dash/
├── app/ # Expo Router pages
│ ├── index.tsx # Home screen with animations
│ ├── _layout.tsx # Navigation setup with ScoreProvider
│ ├── (game)/
│ │ └── game.tsx # Game route
│ ├── (scores)/
│ │ └── top-scores.tsx # Leaderboard page
│ └── (tabs)/ # Legacy tab structure
├── components/ # Reusable components
│ ├── game/ # Game-specific components
│ │ ├── SimpleDinoGame.tsx # Main game component
│ │ ├── DinoGame.tsx # Matter.js version
│ │ ├── Box.tsx # Entity renderer
│ │ ├── setupWorld.ts # Game world setup
│ │ └── systems.ts # Game systems
│ └── ui/ # UI components
├── services/ # Business logic services
│ ├── ScoreService.ts # Score management (Repository Pattern)
│ ├── AsyncStorageService.ts # Data persistence
│ └── types.ts # Type definitions
├── contexts/ # State management
│ └── ScoreContext.tsx # Score state (Observer Pattern)
├── hooks/ # Custom React hooks
├── types/ # TypeScript definitions
├── constants/ # App constants
└── assets/ # Images, fonts, etc.
- Efficient Caching: 5-minute cache validity for frequently accessed data
- Lazy Loading: Components and data loaded only when needed
- Batch Operations: Parallel data loading for better performance
- Cache Invalidation: Automatic cache refresh on data changes
- Singleton Pattern: Single service instances to reduce memory usage
- Efficient Serialization: Optimized JSON serialization/deserialization
- Storage Size Monitoring: Built-in storage size calculation
- Error Handling: Graceful fallbacks for storage failures
- Frame-Rate Independence: Consistent 60fps gameplay across devices
- Optimized Re-renders: useCallback and useMemo for expensive operations
- Lazy Component Loading: Components loaded only when needed
- Animation Optimization: Native driver for smooth animations
- Core game mechanics with custom physics
- Beautiful home screen with animations
- Cross-platform compatibility (iOS, Android, Web)
- Game over and restart functionality
- Frame-rate independent timing
- Professional UI/UX design
- Score management system implementation
- Top 5 leaderboard functionality
- Persistent score storage with AsyncStorage
- Score motivation features (target scores)
- Performance optimizations
- Design patterns implementation
- Comprehensive documentation
- Sound effects and background music
- Different obstacle types and patterns
- Power-ups and special abilities
- Achievement system with badges
- Social sharing of scores
- Dark mode support
- Multiplayer leaderboards
- Cloud sync for scores
- Customizable dinosaur skins
- Daily challenges and missions
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and test thoroughly
- Commit with descriptive messages:
git commit -m 'feat: add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Create a Pull Request
- Follow TypeScript best practices
- Use meaningful variable and function names
- Add comments for complex logic
- Ensure all tests pass
- Follow the existing code structure
main: Production-ready codedevelop: Integration branch for featuresfeature/*: New features and improvementsbugfix/*: Bug fixes and patcheshotfix/*: Critical production fixes
- iOS: 13.0+ (iPhone, iPad)
- Android: 6.0+ (API level 23+)
- Web: Modern browsers (Chrome, Firefox, Safari, Edge)
- Development: macOS, Windows, Linux
This project is licensed under the MIT License - see the LICENSE file for details.
- Chrome Dino Game: Original inspiration from Google Chrome's offline game
- React Native Community: Amazing ecosystem and tools
- Expo Team: Excellent development platform
- Contributors: Everyone who helps improve this project
- Issues: Report bugs and request features on GitHub Issues
- Discussions: Join the conversation on GitHub Discussions
- Documentation: Check the Wiki for detailed guides
Made with ❤️ by the Dino Dash Team