{"id":19653208,"url":"https://github.com/didifive/jungle-game-react","last_synced_at":"2026-02-14T06:03:44.824Z","repository":{"id":153798468,"uuid":"416957974","full_name":"didifive/jungle-game-react","owner":"didifive","description":"Jungle Game Infinite Runner in ReactJS with Redux and Responsive Layout","archived":false,"fork":false,"pushed_at":"2021-11-24T17:04:44.000Z","size":4956,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-03T02:34:47.349Z","etag":null,"topics":["game","localstorage","react","react-hooks","react-redux","reactjs","redux","responsive","responsive-design","responsive-layout","styled-components","visual-studio-code"],"latest_commit_sha":null,"homepage":"https://jungle-infinite-runner.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/didifive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-14T02:04:29.000Z","updated_at":"2023-12-18T20:00:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"5809aa5c-1781-49d4-8d5e-cd8ce8b93ab1","html_url":"https://github.com/didifive/jungle-game-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/didifive/jungle-game-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didifive%2Fjungle-game-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didifive%2Fjungle-game-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didifive%2Fjungle-game-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didifive%2Fjungle-game-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/didifive","download_url":"https://codeload.github.com/didifive/jungle-game-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/didifive%2Fjungle-game-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29438641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T05:24:35.651Z","status":"ssl_error","status_checked_at":"2026-02-14T05:24:34.830Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game","localstorage","react","react-hooks","react-redux","reactjs","redux","responsive","responsive-design","responsive-layout","styled-components","visual-studio-code"],"created_at":"2024-11-11T15:13:33.636Z","updated_at":"2026-02-14T06:03:44.811Z","avatar_url":"https://github.com/didifive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Jungle Infinite Runner\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![React](https://img.shields.io/badge/React-19.2.4-61DAFB?logo=react)](https://reactjs.org/)\n[![Redux](https://img.shields.io/badge/Redux-State%20Management-764ABC?logo=redux)](https://redux.js.org/)\n[![Vite](https://img.shields.io/badge/Vite-5.4.6-646CFF?logo=vite)](https://vitejs.dev/)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/9b3537f4-890c-41ab-9c91-44ae3e1ff0d1/deploy-status)](https://app.netlify.com/projects/jungle-infinite-runner/deploys)\n\n**A modern infinite runner game built with React, Redux, and Vite**\n\n[Live Demo](https://jungle-ir.zancanela.dev.br) · [Report Bug](https://github.com/didifive/jungle-game-react/issues) · [Request Feature](https://github.com/didifive/jungle-game-react/issues)\n\n\u003c/div\u003e\n\n---\n\n## 📋 Table of Contents\n\n- [About](#-about)\n- [Features](#-features)\n- [Technologies](#-technologies)\n- [Architecture](#-architecture)\n- [Getting Started](#-getting-started)\n- [Game Story](#-game-story)\n- [Development](#-development)\n- [Credits](#-credits)\n- [License](#-license)\n\n---\n\n## 🎮 About\n\nJungle 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](https://www.linkedin.com/in/devfrontend/). \n\nThis project evolved from a Chrome's dinosaur game recreation ([original project](https://github.com/celso-henrique/dio-dino-game)) into a fully-featured game with modern React architecture, state management, and responsive design.\n\nThe 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.\n\n---\n\n## ✨ Features\n\n- ⚡ **Modern Build Tool**: Built with Vite for fast development and optimized production builds\n- 🎯 **State Management**: Redux-powered centralized state management\n- 🎨 **Styled Components**: Dynamic styling with styled-components\n- 📱 **Responsive Design**: Fully responsive with support for desktop and mobile devices\n- 🎮 **Multiple Input Methods**: Keyboard (spacebar) and touchscreen support\n- 🎵 **Sound System**: Background music and sound effects with toggle controls\n- 💾 **Persistent High Scores**: LocalStorage integration for record tracking\n- 🌍 **Parallax Background**: Multi-layer parallax effect for immersive experience\n- 👾 **Multiple Enemy Types**: Three different enemy types (Goblin, Mushroom, Skeleton)\n- ❤️ **Life System**: Health point management with visual feedback\n- 📊 **Score System**: Real-time score tracking with high score records\n- 🔄 **Dynamic Difficulty**: Adaptive difficulty based on enemy count\n\n---\n\n## 🛠 Technologies\n\n### Core Technologies\n- **[React](https://reactjs.org/)** (v19.2.4) - UI library\n- **[Redux](https://redux.js.org/)** - State management\n- **[Vite](https://vitejs.dev/)** (v5.4.6) - Build tool and development server\n- **[styled-components](https://styled-components.com/)** - CSS-in-JS styling\n\n### Additional Libraries\n- **[react-player](https://www.npmjs.com/package/react-player)** - Audio player component\n- **[react-device-detect](https://www.npmjs.com/package/react-device-detect)** - Device detection\n\n### Design Resources\n- **[Google Fonts](https://fonts.google.com/)** - Typography\n- **[Font Awesome](https://fontawesome.com/)** - Icons\n- **[ICONS8](https://icons8.com/)** - Additional icons\n\n### Assets\n- **Graphics**: [Jungle Pack](https://jesse-m.itch.io/jungle-pack) and [Monsters Creatures Fantasy](https://luizmelo.itch.io/monsters-creatures-fantasy) from itch.io\n- **Sound Effects**: Audio assets from [freesound.org](https://freesound.org/)\n\n---\n\n## 🏗 Architecture\n\n### Project Structure\n\n```\nsrc/\n├── components/          # Reusable UI components\n│   ├── GlobalStyles/   # Global styling\n│   ├── Modal/          # Modal component\n│   └── Notice/         # Notice component\n├── containers/         # Container components\n│   ├── App/           # Root application container\n│   ├── Game/          # Game container and logic\n│   ├── Hud/           # Heads-Up Display\n│   └── Scenario/      # Game scenario and background\n├── hooks/             # Custom React hooks\n│   ├── useGameLogic.jsx\n│   └── useGameLoop.jsx\n└── store/             # Redux store\n    ├── actions/       # Action creators\n    └── reducers/      # State reducers\n```\n\n### Component Breakdown\n\n#### Root Components\n- **GlobalStyles**: Global CSS styles using styled-components\n- **Modal**: Reusable modal component for Info and Game Over screens\n- **Notice**: Information notices for game controls\n\n#### Game Container\n- **Character**: Player character with jump mechanics\n- **Controls**: Display available game commands\n- **Enemies**: Enemy management with three enemy types\n- **Header**: Game header display\n- **Info**: Modal panel for game information and Game Over state\n\n#### HUD (Heads-Up Display)\n- **Life**: Health point display and management\n- **Record**: High score display\n- **Score**: Current score tracking and display\n\n#### Scenario\n- **BackgroundParalax**: 4-layer parallax background effect\n- **Ground**: Ground layer for the game scenario\n\n### State Management\n\nRedux store with the following reducers:\n\n- **characterReducer**: Character state and jump mechanics\n- **enemyReducer**: Enemy spawning and movement\n- **gameReducer**: Overall game state (running, paused, game over)\n- **lifeReducer**: Player health management\n- **scoreReducer**: Score tracking and high score management\n- **soundsReducer**: Audio settings and controls\n\n### Key Features Implementation\n\n- **Event Handlers**: `keyup` and `touchend` events for cross-device compatibility\n- **Conditional Rendering**: Dynamic component rendering based on game state\n- **Dynamic Rendering**: `.map()` method for multiple simultaneous enemy rendering\n- **Responsive Design**: Viewport-based units (`vh`, `vw`, `em`) and media queries\n- **LocalStorage**: Persistent high score storage\n- **Reset Actions**: Game state reset functionality for replay capability\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- **Node.js** 14.18.1 LTS or higher\n- **npm** or **yarn** package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/didifive/jungle-game-react.git\n   cd jungle-game-react\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open your browser**\n   \n   Navigate to `http://localhost:3000` (or the port shown in your terminal)\n\n### Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n\n---\n\n## 📖 Game Story\n\n\u003e *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...*\n\nWill you help Josué survive the jungle?\n\n---\n\n## 💻 Development\n\n### Development Setup\n\nThis project was developed with:\n- **IDE**: Visual Studio Code 1.61.2\n- **Node.js**: 14.18.1 LTS\n- **Build Tool**: Vite 5.4.6\n\n### Migration from Create React App\n\nThis project was successfully migrated from Create React App (deprecated) to Vite, resulting in:\n- Faster development server startup\n- Near-instant hot module replacement (HMR)\n- Optimized production builds\n- Better developer experience\n\n---\n\n## 🙏 Credits\n\n### Original Project\nBased on [dio-dino-game](https://github.com/celso-henrique/dio-dino-game) by [Celso Henrique](https://www.linkedin.com/in/devfrontend/)\n\n### Bootcamp\nDeveloped as part of the **Impulso React Web Developer Bootcamp** by [Digital Innovation One](https://digitalinnovation.one/)\n\n### Graphics \u0026 Assets\n- [Jungle Pack](https://jesse-m.itch.io/jungle-pack) by Jesse M. (itch.io)\n- [Monsters Creatures Fantasy](https://luizmelo.itch.io/monsters-creatures-fantasy) by Luiz Melo (itch.io)\n\n### Sound Effects\nAll sound effects from [freesound.org](https://freesound.org/):\n- [Jump/Hop Sound](https://freesound.org/people/felixyadomi/sounds/456373/) by felixyadomi\n- [Forest Jungle Dark Atmosphere](https://freesound.org/people/felixyadomi/sounds/456371/) by felixyadomi\n- [Robotic Voice 'Now You Are Dead'](https://freesound.org/people/MuzoTV/sounds/384903/) by MuzoTV\n- [Damage Hit Voice](https://freesound.org/people/dersuperanton/sounds/437651/) by dersuperanton\n\n### Tools \u0026 Services\n- [Favicon.io](https://favicon.io/) - Favicon generation\n- [GIFMaker](https://www.gifmaker.me/) - GIF creation\n- [Shields.io](https://shields.io/) - Badge generation\n- [Netlify](https://www.netlify.com/) - Hosting and deployment\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by [Luis Carlos Zancanela](https://www.linkedin.com/in/luis-carlos-zancanela/)**\n\n[![GitHub](https://img.shields.io/badge/GitHub-didifive-181717?logo=github)](https://github.com/didifive)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0A66C2?logo=linkedin)](https://www.linkedin.com/in/luis-carlos-zancanela/)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidifive%2Fjungle-game-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdidifive%2Fjungle-game-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdidifive%2Fjungle-game-react/lists"}