collect -pacman

A fast-paced challenge! Grab green balls, escape red blocks, and survive. Miss 3 chances and the game slips away

Comment

DODGE & COLLECT - Retro Arcade Web Game Project Description DODGE & COLLECT is a modern web-based retro arcade game built with cutting-edge technologies. It's a classic-style space shooter where players navigate through obstacles while collecting power-ups to achieve high scores. The game combines nostalgic arcade gameplay with modern web development practices. Game Features:- Player Control: Smooth character movement using WASD keys or arrow keys Mobile Support: Touch-based virtual D-pad controls for mobile devices Collision System: Real-time collision detection between player, obstacles, and collectibles Scoring System: Progressive scoring with combo multipliers Lives System: 3-life system with heart-based UI indicators Level Progression: Dynamic difficulty scaling based on player performance Local Storage: Persistent high score saving across sessions Visual & Audio Design:- Retro Aesthetic: Pixel-perfect retro styling with neon color schemes Particle Effects: Dynamic particle systems for explosions and collections Smooth Animations: 60fps gameplay with optimized rendering Responsive Design: Adaptive layout for desktop, tablet, and mobile Starfield Background: Animated parallax scrolling star field Gradient UI: Modern glass-morphism UI elements Technical Stack:- Frontend Technologies:- React 18 with TypeScript for component architecture Vite 7.1.4 as build tool and development server p5.js for game engine and graphics rendering Tailwind CSS for responsive styling Radix UI for accessible component library Framer Motion for smooth animations React Router DOM for navigation Backend Infrastructure:- Node.js 20.x runtime environment Express 5.1.0 web server framework TypeScript for type-safe server development CORS enabled for cross-origin requests Development & Build Tools SWC for fast TypeScript compilation Vitest for unit testing ESLint & Prettier for code quality PostCSS & Autoprefixer for CSS processing Challenges Faced & Solutions

  1. Node.js Version Compatibility Issue Problem: Netlify deployment failed due to invalid Node.js version specification (v22.19.0) Solution: Added proper Node.js version constraints in package.json with "engines": {"node": "20.x"} and created .nvmrc file
  2. Express Route Conflicts Problem: Catch-all route * caused path-to-regexp errors Solution: Implemented regex-based routing /^(?!\/api).*$/ to exclude API routes from SPA fallback
  3. TypeScript ES Module Configuration Problem: __dirname not available in ES modules causing build failures Solution: Used import.meta.url with fileURLToPath for proper path resolution
  4. Mobile Touch Controls Problem: Poor mobile gaming experience with virtual controls Solution: Implemented optimized touch handlers with proper event prevention and visual feedback
  5. Performance Optimization Problem: Large bundle sizes affecting load times Solution: Implemented object pooling, frame-based timers, and optimized rendering loops
  6. Cross-Platform Deployment Problem: Different hosting platforms requiring different configurations Solution: Created multiple config files (netlify.toml, vercel.json) for seamless deployment Development Process Setup Challenges Missing Server Files: Created Express server structure from scratch Dependency Installation: Resolved package manager conflicts between npm/pnpm Vite Configuration: Configured proper host settings (0.0.0.0:5000) TypeScript Configuration: Fixed module resolution and path aliases Game Development:- Physics Engine: Implemented custom collision detection using p5.js State Management: Built React-based game state system Input Handling: Created unified input system for keyboard and touch Performance: Optimized rendering with object pooling and efficient loops Inspiration & Concept The game draws inspiration from classic arcade games like:

Asteroids - Space-themed obstacle navigation Pac-Man - Collection-based scoring system Space Invaders - Retro pixel art aesthetic Modern Endless Runners - Progressive difficulty and combo systems The project showcases modern web technologies while delivering a nostalgic gaming experience that appeals to both retro gaming enthusiasts and modern players.

Built With

Share this project:

Updates