Dev Log: Building the Neon Arcade

The KaeIce Games Arcade has ten free games you can play right in your browser: Daily Word, Block Blast, Neon Merge, Color Sort, Stack Tower, Neon Flap, Neon Snake, Brick Blitz, Void Raiders and Glyph Match. There’s nothing to download, no account to make, and it works on a phone just as well as on a laptop. This post goes behind the scenes on how the site and the arcade were put together, and why they look the way they do.

The goal: fast, bright and friendly on any screen

I had three goals from the start. The site should load quickly, even on a phone with a so-so connection. It should look bold and unmistakably neon. And every game should feel good with thumbs as well as with a keyboard. Almost every technical choice below comes back to one of those three.

The stack: Astro on Netlify

The site is built with Astro 5 and published as plain static pages. When the site is built, Astro turns everything into ready-made HTML, so your browser gets a finished page instead of assembling one with a large JavaScript framework. There are no UI frameworks at all, just HTML, CSS and small amounts of plain JavaScript. The styles are inlined right into each page, which saves an extra round trip before anything appears on screen.

The site is hosted on Netlify. Netlify serves the pages, handles the newsletter and contact forms, and runs the small server function behind the arcade leaderboards (more on that in its own dev log). Caching rules tell browsers to hold on to things that never change, like fonts and bundled assets, for a full year, so return visits are even quicker.

The look: a city at night

The visual style is inspired by neon signs glowing against a dark street. The background is an inky near-black, and three accent colors do most of the work: a hot magenta, an electric cyan and a bright lime. Headlines use Orbitron, a wide, futuristic display font, and body text uses Inter, which stays easy to read at small sizes. Both fonts are hosted on the site itself instead of loaded from a third party, and they’re set to swap in smoothly, so text is readable right away while the fonts load.

The glow isn’t made of images. It comes from layered CSS text and box shadows, so it stays crisp on any screen and costs almost nothing to download. On desktop, the game cards tilt gently in 3D as your mouse moves over them, a soft glare follows the pointer, and a little neon trail follows your cursor. Those extras only switch on for a mouse or trackpad, and they turn off entirely if your device is set to reduce motion.

Reduced motion is respected inside the games too. Every game’s toolbar has a Reduce motion button that starts out matching your device’s setting, and you can switch it on or off yourself. With it on, screen shake, flashes, particle bursts, card and tile flips, pulsing orbs, drifting stars and other decorative animations are toned down or skipped, while the games themselves play exactly the same.

Ten games, loaded only when you press Play

Each game is its own small module that runs on an HTML canvas. None of them load when you open the Arcade page. A game’s code is fetched only when you press its Play button, and the leaderboard code arrives at the same moment. That keeps the Arcade page light no matter how many games I add.

All ten games share one game shell. It draws each game on a 360 by 480 canvas and scales it to fit your screen, with extra sharpness on high-resolution displays. It also handles the things every game needs: the score and best score, pause, restart, full-screen, the sound and motion settings, the game-over screen and the share button.

Sound and game feel

Every game in the Arcade now has sound effects and extra neon effects: sparks, pop-up scores, screen shake on big moments and a celebration when you beat your best mid-run. Each game gets its own touches, like tiles that flip over in Daily Word, cards that flip in Glyph Match, and a paddle that squashes in Brick Blitz. The sounds are generated by the browser as you play, so there are no audio files to download, and nothing makes a sound until you tap or press a key. The effects code is shared by all ten games and only loads when you open one of them.

Sound is easy to switch off. The Mute button in the toolbar mutes the Arcade, and the M key does the same in every game. In Daily Word, where letter keys are for typing, use Shift+M while you play. Your choice is remembered on your device, just like the Reduce motion setting. Sound starts switched on, and each game plays a short chime when it starts so you know audio is working. On an iPhone, the ring/silent switch also silences web games, so the first time you play you’ll see a small reminder to check it.

The game-over screen got a refresh at the same time. Your score and your best now sit side by side, a new best gets a bright highlight, and if your result would make a leaderboard, you’ll see your rank and the name box right away.

Built for thumbs

Mobile play got a lot of attention:

On phones, the game takes over the whole screen while you play, with a compact score bar and toolbar, so the board is as big as it can be without scrolling.
While a run is in progress, the page itself stays put: swipes and drags go to the game, not to scrolling, pull-to-refresh or zooming. Pinch-zoom still works everywhere else on the site.
Games that need direction buttons, like Neon Snake and Neon Merge, show a big on-screen arrow pad on phones. Brick Blitz and Void Raiders get left, action and right buttons instead. Games like Stack Tower and Neon Flap just need a tap.
Buttons are large and easy to hit. Every toolbar button is at least 44 pixels in each direction, the Mute and Reduce motion buttons have short text labels next to their icons on phones and under them on bigger screens (phones have no hover tooltips), and the touch controls are even bigger.
Games pause automatically if you switch apps or tabs, so a notification won’t end your run.
On bigger screens, full-screen mode hides everything but the game. On browsers that don’t support true full-screen, the game fills the window instead.

Small details matter too. Daily Word’s on-screen keys were made bigger so they’re easier to tap, and in Color Sort every orb carries a small symbol, so players who have trouble telling some colors apart can still sort by shape.

Performance

Speed was a goal from the first day, and I check it regularly with Lighthouse. I also run automated browser tests at a phone width and a desktop width, plus iPhone (Safari’s WebKit engine) and Android phone emulation for every game, so layout problems get caught before they go live.

What’s next

The Arcade will keep growing, and so will the rest of KaeIce Games, including my card battler Cryptid Hunt, which is coming soon to Google Play. If you have a favorite game, a bug to report or an idea for a new one, the contact form on the About page is always open. Thanks for playing!