Last 60

🚀 Inspiration

We wanted to capture the frantic adrenaline of classic arcade arena shooters and merge it with a modern, cyberpunk aesthetic and a brutal twist: Time is your health.

Inspired by the sci-fi thriller concept of In Time mixed with the bullet-hell chaos of Geometry Wars, we asked ourselves: What if you only had 60 seconds to live, and the only way to survive was to steal time from other players? That high-stakes pressure became the foundational design pillar for Last60.

🎮 What it does

Last60 is a real-time, multiplayer 2D top-down space shooter set in a collapsing cyberpunk arena.

• The Chrono Matrix: You spawn with exactly 60.0 seconds of life. When the clock hits zero, your ship detonates.
• Time Vampirism: Shooting enemies with your Plasma Blaster or slicing them with your 360° Chrono Blade steals their time and adds it to your own.
• Turbo Nitro System: Collect floating Emerald Orbs inside the shrinking safe zone to charge your engine. Hit [SHIFT] for a massive speed boost to outmaneuver missiles or close the gap on fleeing prey.
• Collapsing Arena: Stray outside the quantum boundary, and your hull takes critical damage (-5s per second), forcing players into intense, close-quarters dogfights.

🛠️ How we built it

We built Last60 from the ground up for the web, focusing on zero-friction multiplayer:

• Game Client (Phaser 3 & TypeScript): We used Phaser 3 for our client-side engine. To make the game feel incredibly premium, we avoided static assets where possible—our starfields, nebulas, particle thruster trails, and shockwave slashes are rendered entirely procedurally.
• Multiplayer Server (Colyseus & Node.js): We used the open-source Colyseus framework for authoritative, real-time state synchronization. It manages the server tick-rate, hit detection, and broadcasts the shared schema state (Pickups, Players, Projectiles) out to all clients at 60Hz.
• Frontend & UI (Vite & HTML/CSS): The outer game UI uses raw DOM elements layered over the WebGL canvas. We built a neon, glassmorphic UI system featuring CSS micro-animations that responds directly to in-game events.
• Audio (Web Audio API): All sound effects (lasers, blade swings, low-health heartbeat, UI clicks) are generated dynamically using oscillator nodes for a pure, synth-wave soundscape.

🚧 Challenges we ran into

Building a fast-paced multiplayer game in the browser is notoriously tricky. Here are some roadblocks we overcame:

1. State Synchronization Race Conditions: When players initially connected, the Colyseus onAdd schema callbacks would sometimes fire before the Phaser scene had finished its handshake, resulting in invisible ships and broken UI timers. We engineered a self-healing client loop in the Phaser update() cycle that guarantees immediate synchronization of all players and pick-ups on any dropped frames.
2. The Phaser 3.60 Particle Emitter Overhaul: During development, we ran into catastrophic crashes (emitter.setSpeed is not a function). Phaser 3.60 completely overhauled how ParticleEmitter objects work. We had to dig deep into the new EmitterOp properties and migrate our dynamic thruster particle logic to direct property assignments (emitter.speed = X; emitter.scale = Y;) to restore the visual effects.
3. Websocket Handshake Failures: We discovered that modern browsers reject direct fetch('ws://...') requests for matchmaking reservations. We had to implement protocol normalization logic that intercepts the environment URL, performs the HTTP matchmaking reservation natively, and allows Colyseus to seamlessly upgrade the socket to ws:// in milliseconds.

🏆 Accomplishments that we're proud of

• Silky Smooth Multiplayer Interpolation: Even with fluctuating latency, player ships interpolate smoothly across the screen using a custom lerp calculation on the client side (Math.exp(-22 * dt)).
• The UI / UX: The interface feels incredibly polished. The screen shakes dynamically when leaving the safe zone, the audio engine modulates based on your health, and the UI provides immediate, tactile feedback for every action.
• Zero-Friction Access: You don't need an account or a download. Type a callsign, hit "ENTER ARENA," and you are instantly in a live match fighting players around the world.

📚 What we learned

• Authoritative Server Architecture: We learned how to properly decouple client-side rendering from server-side logic to prevent cheating (e.g., validating the 360° Chrono Blade radius on the server).
• Advanced Phaser 3 Mechanics: We leveled up our knowledge of Phaser's procedural graphics generation and WebGL pipeline handling.

🚀 What's next for Last60

This is just the beginning for the Chrono Arena. Next steps include:

• Mobile Support: Implementing virtual touch-joysticks so players can fight from their phones.
• New Modes: A 5v5 "Time Heist" mode where teams pool their collected time to power up a mothership.
• Boss Events: AI-controlled dreadnoughts that spawn in the arena and drop massive Time Cores when destroyed.

Built With

• phaser.js