Cyber Heist: CodeBreaker

• 

  Home Page

• 

  Oops Security Bot caught player

• 

  Player reaches Console (Press E)

• 

  Hack the Console

• 

  Door lock opens as if player hacks the console

• 

  Level complete move to next level with more difficulty

Inspiration

We wanted to create a game that’s more than just fun — something that tests memory, reflexes, and strategic movement. Inspired by stealth-based mechanics in games like Metal Gear Solid and hacking minigames from Watch Dogs, we envisioned Cyber Heist: Codebreaker as a pulse-pounding blend of sneaking past AI, hacking complex systems, and escaping under pressure.

The challenge? Build all this with just frontend tools — no game engine. The result? A fast-paced, stylish stealth-puzzle experience inside a 2D cyberpunk grid.

What it does

Cyber Heist: Codebreaker is a stealth-hacking puzzle game. You play as a cyber operative infiltrating AI-secured zones. Here’s what you do:

• Navigate through a grid-based room using keyboard controls (WASD).
• Avoid detection from patrolling Security Bots with evolving movement patterns.
• Interact with hacking consoles (E key) to complete memory-based sequences.
• Unlock exit doors and escape each level while bots are hot on your trail.
• With each level, the game becomes smarter, faster, and harder — adding more tension and fun.

Game states include: playing, hacking, detected, and complete.

How we built it

We built this game using only frontend tools — no game engine. Here’s the stack and approach:

• React + TypeScript: For managing game state, movement, and logic.
• Tailwind CSS: To style components, animations, visual effects, and overlays.
• Lucide Icons: For adding crisp, lightweight SVG-based visual indicators.
• Custom Game Loop: Built using setInterval, useEffect, and refs to control player/enemy behavior.
• Pattern Engine: Enemy movement patterns (e.g., diagonal, circular, random, speed-blitz) change dynamically with levels.
• Hacking Minigame: A Simon Says-style memory sequence that grows in difficulty.

The game was built and tested using Bolt.new and deployed via Netlify.

Challenges we ran into

• Designing enemy movement logic that feels challenging but fair at different speeds and directions.
• Balancing the hacking minigame to start easy but scale difficulty without being overwhelming.
• Managing game state transitions (e.g., from hacking to playing, or detected to restart) smoothly without bugs.
• Creating visually distinct difficulty indicators for regular vs. "SPEED MODE" phases.
• Handling user inputs across states (e.g., movement blocked during hacking or sequence playback).

Accomplishments that we're proud of

• Built a feature-rich stealth-puzzle game using only React and frontend libraries — no game engine.
• Developed a flexible AI pattern engine for enemies with circular, random, and speed-enhanced paths.
• Created a visually polished cyberpunk aesthetic using Tailwind animations and overlays.
• Seamlessly handled four separate game states with smooth transitions.
• Added a level system that dynamically increases difficulty, introducing new behavior every few rounds.

What we learned

• How to simulate real-time gameplay and enemy AI using frontend technologies.
• Designing finite-state machines using React’s useState and useEffect.
• Creating engaging visual feedback loops using Tailwind effects and gradients.
• Using useRef, setInterval, and key listeners to implement a smooth and responsive game loop.
• The power of small design details — like detection zone pulses and animated buttons — in making gameplay intuitive.

What's next for Cyber Heist: CodeBreaker

• 🔊 Add immersive sound effects and background music to enhance tension and immersion.
• 🚨 Introduce new enemy types: laser drones, spotlight guards, or pattern-switching bots.
• 🧩 Expand the hacking puzzles to include code-breaking, rotating wheels, or password logic.
• 📱 Make it mobile-friendly with on-screen controls and responsive scaling.
• 🌐 Add multiplayer speedrun mode — race a friend to crack levels first!
• 🧱 Build a community level editor for custom missions and shared challenges.

Built With

• lucideicons
• netlify
• react
• tailwindcss
• typescript
• vite