A modern infinite runner game built with React, Redux, and Vite
Jungle Infinite Runner is a modern browser-based infinite runner game developed as part of the Digital Innovation One Bootcamp - Impulso React Web Developer, under the guidance of Celso Henrique.
This project evolved from a Chrome's dinosaur game recreation (original project) into a fully-featured game with modern React architecture, state management, and responsive design.
The main goal was to migrate from vanilla JavaScript to a comprehensive React application using Vite, Redux, and styled-components, demonstrating advanced concepts such as hooks, global state management, conditional rendering, and game loop implementation.
- ⚡ Modern Build Tool: Built with Vite for fast development and optimized production builds
- 🎯 State Management: Redux-powered centralized state management
- 🎨 Styled Components: Dynamic styling with styled-components
- 📱 Responsive Design: Fully responsive with support for desktop and mobile devices
- 🎮 Multiple Input Methods: Keyboard (spacebar) and touchscreen support
- 🎵 Sound System: Background music and sound effects with toggle controls
- 💾 Persistent High Scores: LocalStorage integration for record tracking
- 🌍 Parallax Background: Multi-layer parallax effect for immersive experience
- 👾 Multiple Enemy Types: Three different enemy types (Goblin, Mushroom, Skeleton)
- ❤️ Life System: Health point management with visual feedback
- 📊 Score System: Real-time score tracking with high score records
- 🔄 Dynamic Difficulty: Adaptive difficulty based on enemy count
- React (v19.2.4) - UI library
- Redux - State management
- Vite (v5.4.6) - Build tool and development server
- styled-components - CSS-in-JS styling
- react-player - Audio player component
- react-device-detect - Device detection
- Google Fonts - Typography
- Font Awesome - Icons
- ICONS8 - Additional icons
- Graphics: Jungle Pack and Monsters Creatures Fantasy from itch.io
- Sound Effects: Audio assets from freesound.org
src/
├── components/ # Reusable UI components
│ ├── GlobalStyles/ # Global styling
│ ├── Modal/ # Modal component
│ └── Notice/ # Notice component
├── containers/ # Container components
│ ├── App/ # Root application container
│ ├── Game/ # Game container and logic
│ ├── Hud/ # Heads-Up Display
│ └── Scenario/ # Game scenario and background
├── hooks/ # Custom React hooks
│ ├── useGameLogic.jsx
│ └── useGameLoop.jsx
└── store/ # Redux store
├── actions/ # Action creators
└── reducers/ # State reducers
- GlobalStyles: Global CSS styles using styled-components
- Modal: Reusable modal component for Info and Game Over screens
- Notice: Information notices for game controls
- Character: Player character with jump mechanics
- Controls: Display available game commands
- Enemies: Enemy management with three enemy types
- Header: Game header display
- Info: Modal panel for game information and Game Over state
- Life: Health point display and management
- Record: High score display
- Score: Current score tracking and display
- BackgroundParalax: 4-layer parallax background effect
- Ground: Ground layer for the game scenario
Redux store with the following reducers:
- characterReducer: Character state and jump mechanics
- enemyReducer: Enemy spawning and movement
- gameReducer: Overall game state (running, paused, game over)
- lifeReducer: Player health management
- scoreReducer: Score tracking and high score management
- soundsReducer: Audio settings and controls
- Event Handlers:
keyupandtouchendevents for cross-device compatibility - Conditional Rendering: Dynamic component rendering based on game state
- Dynamic Rendering:
.map()method for multiple simultaneous enemy rendering - Responsive Design: Viewport-based units (
vh,vw,em) and media queries - LocalStorage: Persistent high score storage
- Reset Actions: Game state reset functionality for replay capability
- Node.js 14.18.1 LTS or higher
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/didifive/jungle-game-react.git cd jungle-game-react -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
Navigate to
http://localhost:3000(or the port shown in your terminal)
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
Josué, a humble fisherman, was peacefully fishing when the calmness lulled him to sleep. Suddenly, he awakens to find himself alone in the middle of a dense jungle. As a wolf howls and an owl hoots in the distance, fear grips him. Unarmed and alone, he begins to run without knowing which direction to take or what dangers lie ahead...
Will you help Josué survive the jungle?
This project was developed with:
- IDE: Visual Studio Code 1.61.2
- Node.js: 14.18.1 LTS
- Build Tool: Vite 5.4.6
This project was successfully migrated from Create React App (deprecated) to Vite, resulting in:
- Faster development server startup
- Near-instant hot module replacement (HMR)
- Optimized production builds
- Better developer experience
Based on dio-dino-game by Celso Henrique
Developed as part of the Impulso React Web Developer Bootcamp by Digital Innovation One
- Jungle Pack by Jesse M. (itch.io)
- Monsters Creatures Fantasy by Luiz Melo (itch.io)
All sound effects from freesound.org:
- Jump/Hop Sound by felixyadomi
- Forest Jungle Dark Atmosphere by felixyadomi
- Robotic Voice 'Now You Are Dead' by MuzoTV
- Damage Hit Voice by dersuperanton
- Favicon.io - Favicon generation
- GIFMaker - GIF creation
- Shields.io - Badge generation
- Netlify - Hosting and deployment
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Luis Carlos Zancanela
