Vice Streets(Begginers)

Inspiration

The Spark 💡The title "Vice Streets" immediately painted a picture in my mind - neon lights reflecting off rain-soaked pavement, danger lurking around every corner, and that gritty 80s action movie aesthetic. I've always been fascinated by how classic games like Hotline Miami, Enter the Gungeon, and retro arcade shooters could create such intense, addictive experiences with relatively simple mechanics. When I saw this hackathon challenge, I knew I wanted to capture that "just one more try" feeling - where you die, but you immediately want to jump back in because you know you can do better. Growing Up With Games 🎮As a kid, I spent countless hours playing flash games and simple browser-based shooters. There was something magical about games that didn't need fancy 3D graphics or complex stories to be fun. Territory War, Stick RPG, and classic arcade cabinets taught me that great gameplay beats flashy graphics every time. I wanted to prove to myself (and others) that you can create something genuinely fun and engaging with just web technologies - no expensive game engines or years of experience required. The "Aha!" Moment ⚡I was watching a game development video about juice and game feel - how small details like screen shake, particle effects, and responsive controls make games satisfying to play. I realised that's what was missing from many beginner projects: they work, but they don't feel good. That's when I decided: Vice Streets wouldn't just be functional, it would feel satisfying. Every bullet fired, every enemy destroyed, every level completed needed to give the player a dopamine hit.

What it does

You control a green character that moves in all directions (WASD keys) Aim with your mouse and shoot by clicking Enemies spawn from all sides of the screen and chase you relentlessly Shoot enemies to score points - every 100 points advances you to the next level Survive contact with enemies - they drain your health when they touch you Reach Level 10 to win the game and escape Vice Streets

Combat System: The game features 3 distinct weapons you can switch between:

Pistol - Unlimited ammo, balanced damage, reliable SMG - Fast fire rate, limited ammo (30 rounds), rapid fire Shotgun - Powerful spread shot, limited ammo (12 rounds), high damage

Progressive Difficulty:

Each level gets harder - enemies spawn faster and have more health Enemy AI uses pathfinding to chase you down intelligently Strategic gameplay - you must choose the right weapon and manage your ammo Health management - avoid getting cornered or swarmed

How we built it

As a student developer, I wanted to create an engaging 2D game for this hackathon that would be both fun to play and technically impressive. Here's my development process: Technology Stack: I chose React for the frontend framework because of its component-based architecture and state management capabilities. For the game rendering, I used HTML5 Canvas API, which provides excellent performance for 2D graphics and animations. Game Architecture: I structured the game using React hooks (useState, useEffect, useRef) to manage game state, player stats, and game loops. The useRef hook was crucial for maintaining game objects, such as enemies, bullets, and particles, without causing unnecessary re-renders. Core Systems I Implemented:

Game Loop: Built a custom requestAnimationFrame loop running at 60 FPS for smooth gameplay Physics & Collision Detection: Implemented distance-based collision detection between player, enemies, and bullets using basic trigonometry Enemy AI: Created a simple chase algorithm where enemies track the player's position using vector mathematics. Weapon System: Designed three weapons with different fire rates, damage values, and bullet patterns (shotgun uses spread mechanics) Level Progression: Implemented a scoring system that dynamically increases difficulty by spawning faster enemies at higher levels

Challenges we ran into

The biggest challenge was optimising performance when many enemies and bullets were on screen simultaneously. I solved this by filtering out off-screen bullets and using efficient array operations.

Accomplishments that we're proud of

1. Built a Complete Game from Scratch I'm really proud that I created a fully playable game with a clear beginning, middle, and end. It's not just a tech demo – it has real gameplay mechanics, progression, and win/lose conditions. Many beginner game projects never reach this "completeness," so finishing it feels amazing!
2. Implemented Real-Time Combat Mechanics Getting the collision detection, bullet physics, and enemy AI to work smoothly together was incredibly satisfying. Watching enemies actually chase the player and bullets connect in real-time made all the debugging worth it.
3. Created a Balanced Weapon System I'm proud of designing three distinct weapons that each feel different to use. The shotgun's spread pattern, the SMG's rapid fire, and the pistol's reliability create meaningful gameplay choices. Balancing damage, fire rate, and ammo took iteration, but it paid off.
4. Achieved Smooth 60 FPS Performance Optimising the game loop to handle dozens of entities (enemies, bullets, particles) without lag was a technical challenge I conquered. Learning to use requestAnimationFrame efficiently and optimise rendering was a significant learning experience.
5. Implemented Progressive Difficulty The game actually gets harder as you progress! Each level spawns tougher, faster enemies, creating a genuine challenge. Tuning this difficulty curve to be challenging but fair was surprisingly complex.

What we learned

This project taught me a lot about game development fundamentals, Canvas API manipulation, and managing complex state in React. I'm proud of creating a complete game loop with win/lose conditions in a short timeframe!

What's next for Vice Streets(Beginners)

1. Power-Ups & Pickups Add collectable items that drop from enemies - health packs, ammo crates, temporary shields, or speed boosts. This would add a risk-reward element where players must venture into danger to grab resources.
2. More Weapons & Upgrades Expand the arsenal with weapons like a sniper rifle, rocket launcher, or laser gun. Implement an upgrade system where players can enhance damage, fire rate, or reload speed between levels.
3. Boss Fights Introduce epic boss battles every 3 levels with unique attack patterns and phases. This would break up the gameplay and provide memorable milestone moments.
4. Sound & Music Add synthwave background music and sound effects for shooting, explosions, and enemy hits. Audio would dramatically increase immersion and make the combat feel more impactful.
5. Different Enemy Types Create variety with ranged enemies that shoot back, tank enemies with high health, or fast "runner" enemies that are hard to hit. This would require different strategies and weapon choices.

Built With

• array.push()
• beginpath()
• es6+html5
• fillrect()
• flex
• getboundingclientrect()
• javascript
• keydown
• lmarena
• math.pi
• maximize
• requestfullscreen()
• rotate()
• useeffect
• usestate