Case Study · Game Development

NEON SURGE — Twin-Stick Arena Shooter

Client: Ghostern · Industry: Game Development · Focus: Fast-Paced Action, 3D Visuals & Surge Mechanics

2

Week Build

100%

Custom Code

6

Twist Mechanics

3D

Immersive Visuals

SB

Sharjeel Bin Amir Founder · Software Engineer · Game Developer Read my full story →

|

⭐ 5.0 Rating 🎓 Game Dev 📍 US-Based

Project Overview

A Fast-Paced, Browser-Based Twin-Stick Arena Shooter

NEON SURGE is a fast, brutal, single-player twin-stick arena shooter built entirely in HTML5, CSS3, and JavaScript. The game puts players in control of a neon vessel fighting endless waves of geometric enemies — triangles, squares, hexagons, and circles — each with unique behaviors and health pools.

Built in just 2 weeks, NEON SURGE features an auto-firing weapon system, dash mechanics with invincibility frames, a tiered Surge ultimate ability, dynamic twist mechanics, and a full boss encounter with phase-based difficulty scaling. The game was designed to be fully playable on both desktop and mobile, with custom virtual controls and touch support.

Project Snapshot

📅 Timeline: 2 weeks
🎯 Genre: Twin-stick arena shooter
⚡ Tech Stack: HTML5, CSS3, JavaScript, Three.js
📱 Platforms: Desktop, Tablet, Mobile
⭐ Key Feature: Surge ultimate ability with 5 tiers
🔗 Live Demo: Play NEON SURGE →

Live Preview

NEON SURGE in Action

Desktop and mobile views of the fast-paced twin-stick arena shooter.

NEON SURGE twin-stick shooter desktop view — neon-themed game starting screen with the title and play button

💻 Desktop View — Full immersive experience

📱 Mobile View — Fully responsive on all devices

Gameplay

A Brutal, Easy-to-Pick-Up Arena Shooter

You aim — your ship fires on its own. It’s all about movement, timing, and building your surge meter.

Auto-Fire & Aim

Your ship fires automatically. You focus on movement and aim direction — making the game accessible yet deep. On mobile, auto-fire activates when using the joystick.

Dash with i-Frames

Press Space (or tap the Dash button on mobile) to dash through bullets with brief invincibility frames. A 1.2-second cooldown keeps it balanced.

Surge Ultimate Ability

Build your Surge meter by defeating enemies. Activate Surge (Q / right-click / Surge button) to unleash an electric storm that damages everything in a radius — up to 5 tiers of power.

Dynamic Twist Mechanics

Every 16-20 seconds, a random twist activates — INVERSION (WASD reversed), TIME WARP (enemies slowed), SWARM (3x spawn rate), CHAOS (erratic movement), BLACKOUT (vision reduced), or RECOIL (shots push you back).

4 Enemy Types & Boss

Defeat triangles, squares, hexagons, and circles — each with different health, speed, and point values. Survive until 5000 points to face THE CONDUCTOR, a 3-phase boss.

Mobile-First Design

Custom virtual joystick, dash button, and surge button make the game fully playable on phones. Touch aim on the left side, move with the right-side joystick — designed for thumb-friendly gaming.

The Challenge

Building a Browser-Based Shooter That Feels Like a Console Game

The goal was to build a browser-based twin-stick shooter that would feel as responsive and polished as a console game — with no downloads, no installations, and full mobile support. The challenge was to create:

◆ Lag-Free Performance: Smooth 60fps gameplay in a browser environment — even on mobile devices.
◆ Twin-Stick Controls: Intuitive mouse/keyboard controls on desktop and touch-friendly joystick controls on mobile.
◆ Dynamic Difficulty: Enemy waves that scale with time, a combo system that rewards skilled play, and a boss encounter that tests everything players have learned.
◆ Visual Polish: Neon aesthetics, particle effects, lightning strikes, and screen shake that make the game feel alive and responsive.
◆ Replayability: Random twist mechanics, power-ups, and a high-score system that keeps players coming back for more.

The Solution

A Fully Custom, 100% Code Game Engine Built in 2 Weeks

Custom Game Engine

Every system — player movement, enemy AI, collision detection, particle effects, and lighting — was coded from scratch in vanilla JavaScript. No game engines, no frameworks, no shortcuts.

Twin-Stick Controls

Desktop players use WASD to move and the mouse to aim. Mobile players use a custom virtual joystick for movement and tap the left side of the screen to aim. Both feel intuitive and responsive.

Surge Tier System

The Surge ultimate ability builds over time and scales up to 5 tiers — each tier increasing the radius and damage of the electric storm. This gives players a powerful “panic button” and a reward for skilled play.

Dynamic Twist System

Every 16-20 seconds, a random game-changing twist activates — keeping players on their toes and ensuring no two runs feel the same. Each twist has a unique visual and audio cue.

3D Visual Effects

Built with Three.js for immersive 3D background scenes, particle systems for explosions and trails, and dynamic lightning strikes that add visual intensity to every encounter.

Procedural Audio System

A custom Web Audio API sound engine generates all game audio procedurally — no audio files needed. Every action — shooting, dashing, surging, twisting, and boss warnings — has a unique synthesized sound.

Twist Mechanics

6 Game-Changing Twists That Keep You on Your Toes

Every run is different. Here’s what can happen when the twist activates.

INVERSION

WASD controls reversed

TIME WARP

Enemies slowed by 60%

SWARM

3x enemy spawn rate

CHAOS

Enemies move erratically

BLACKOUT

Vision radius reduced

RECOIL

Shots push you back

Results

A Fully Functional, Polished Game Built in Just 2 Weeks

Complete Game Loop

From the menu screen to the game-over stats, every part of the player journey is polished and complete. The game feels like a finished product, not a prototype.

High Replayability

Random twists, tiered surge mechanics, and a persistent high-score system keep players coming back. Each run feels unique and challenging.

Cross-Platform Excellence

The game runs smoothly on desktop, tablet, and mobile — with custom controls for each platform. No compromises, no “mobile mode” cop-outs.

Technology

Built With Modern Web Technologies

100% custom code — no game engines, no frameworks, no shortcuts.

HTML5

Canvas & structure

CSS3

Neon UI & styling

JavaScript

Game engine & logic

Three.js

3D background & visuals

Lessons Learned

What We Learned Building a Browser-Based Game in 2 Weeks

Key insights from building a polished twin-stick shooter from scratch.

1. Vanilla JavaScript Is Powerful Enough for Complex Games

NEON SURGE proves that you don’t need Unity, Unreal, or even Phaser to build a polished game. With clean architecture, requestAnimationFrame, and the Canvas API, you can build responsive, performant games that run anywhere.

2. Mobile Support Must Be Built In — Not Bolted On

The custom virtual joystick, dash button, and surge button were designed from day one — not added as an afterthought. This resulted in a mobile experience that feels natural and responsive, not clunky or compromised.

3. Procedural Audio Adds Immersion Without Bloat

Using the Web Audio API to generate sound procedurally meant zero audio files, zero loading times, and a fully immersive experience. Every action has a unique, context-appropriate sound that makes the game feel alive.

Explore More

See More Projects

How we help businesses build their digital presence.

Ready to Build a High-Performance Game or Web App?

Whether you need a browser-based game, a custom web application, or a full platform — we’re here to help. Get a free, no-obligation quote today.

Get Free Quote → Calculate Your Cost

📧 Email directly: hello@devgurux.com