-
-
intro
-
End screen
-
Game Play
-
intro2
About the Project
ARC: LastCycle is a fast-paced, high-octane 2D arcade game built from scratch for the MeDo Hackathon. The project fuses the raw, hypnotic energy of 1980s arcade cabinets with modern web technologies, delivering a pure retro-gaming experience directly to the browser.
Inspiration
Our main inspiration stems from the golden era of 1980s arcade classics like Asteroids, Galaga, and Space Invaders, combined with the unmistakable aesthetic of old CRT monitors. We wanted to recreate that exact visual nostalgia—the subtle screen curvature, flickering scanlines, neon chromatic aberration, and phosphorescent glow—and merge it with a relentless, modern gameplay loop.
What it does
To put it simply: ARC: LastCycle brings your dopamine levels to an absolute high! 🚀 The game drops the player into the final remaining defensive cycle (the Last Cycle) where survival depends on destroying waves of retro-futuristic enemies. Every shattered pixel triggers an instant reward through explosive audio-visual feedback, locking the player into that classic "just one more game" loop.
How we built it
The project was engineered from the ground up as a lightweight, ultra-responsive web application using a modern frontend architecture: Vite + React (TypeScript): For lightning-fast builds, strict type safety, and modular component architecture.HTML5 Canvas & Custom Render Loop: Instead of relying on heavy external game engines, the core physics, update cycles, and rendering logic were written entirely in native TypeScript to maintain absolute control over every single frame. Tailwind CSS + PostCSS: Utilized for rapid and clean styling of the UI layout wrapped around the game viewport.CRT Shader Effects: Achieved through a clever mix of CSS filters, animations, and overlay masks to emulate the pulsing, retro scanline feeling. The mathematical logic driving object movement and collision detection utilizes vector physics and trigonometry in a 2D coordinate system. For instance, to calculate precise circle-to-circle collisions between the player, projectiles, and enemies, we implemented the Euclidean distance formula:$$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$If the calculated distance $d$ satisfies the condition:$$d < r_1 + r_2$$(where $r_1$ and $r_2$ represent the radii of the respective entities), a collision is instantly flagged, triggering an immediate explosion and a corresponding spike in dopamine.
Challenges we ran into
Challenges we ran into CRT Performance Optimization: Achieving a convincing CRT overlay (scanlines, flicker, screen warp) using pure CSS and Canvas without dropping below a locked 60 FPS was a major bottleneck. We had to carefully optimize our rendering loop, minimize garbage collection, and prevent memory leaks when managing high volumes of short-lived game particles.
The Hackathon Time Crunch: Balancing the desire to write perfectly clean, scalable architecture with the reality of a tight deadline. We overcame this by ruthlessly prioritizing the core gameplay loop and cutting out non-essential feature creep.
Accomplishments that we're proud of
The Vibe and Atmosphere: We successfully captured the nostalgic feeling of playing on a heavy arcade machine in a dimly lit room. The game's visual rhythm and fluid movement feel exactly as we envisioned.
Pure TypeScript Engine: Building the game's mechanics independently without high-level gaming frameworks (like Phaser) gave us total engineering freedom and a deeper grasp of raw Canvas manipulation.
What we learned
This hackathon solidified our understanding of optimizing HTML5 Canvas within a React component lifecycle and mastering precise animation timing via requestAnimationFrame. It also reinforced an essential game design rule: less is often more. A highly polished core mechanic and a strong, consistent aesthetic vibe are all it takes to make a game incredibly addictive.
What's next for ARC:LastCycle
Global Live Leaderboard: Integrating a backend (or a decentralized ledger system) to allow players to compete for high scores globally in real-time.
Advanced Power-Up Systems: Introducing weapon modifiers, temporary shields, and dynamic speed boosts.
Procedural Audio Synthesis: Implementing an authentic 8-bit/16-bit soundscape generated directly via the Web Audio API to fully match the retro visual style.
Log in or sign up for Devpost to join the conversation.