Making Webmaster

I wanted to bring some nostalgia to my website and give people a fun way to explore my core pages and services. Webmaster is a small platform game on the homepage: walk through the scene, jump beneath a service block and follow it through to the relevant page.

I designed the character and game assets in Affinity Designer, then brought them into the website as SVG artwork. That included the walking poses, blocks and green tunnel. The project grew from a visual idea into a working part of the site, with keyboard controls, touch controls and a world that can grow as the services change.

It also helped establish the wider visual identity. The character, pixel icons, colours and stepped edges connect the game to the rest of the website, giving it a personality that carries through the navigation and page layouts.

A familiar feeling, with a character of my own.

I took inspiration from early console games, especially the SNES-era feel of Mario: clear silhouettes, simple shapes and a small character with plenty of personality. I drew Webmaster in Affinity Designer and used a demo of Mario walking as a reference for how the arms and legs move through a walk cycle.

Getting the walk to feel right.

The first job was to make the poses work together. I adjusted the frames so the head stayed in the same place, aligned the character to a consistent ground line and refined the timing to make the movement feel more fluid. The game plays the three walking poses forwards and back through the middle pose, creating a continuous cycle.

The movement code matters just as much as the artwork. I refined the jump and landing behaviour so Webmaster can land on surfaces and hit the underside of a block reliably. The camera follows the character smoothly, and positions are rounded to whole pixels to keep the artwork sharp.

Built with the web’s own tools.

The game uses HTML for its structure, CSS for the scene and presentation, and vanilla JavaScript for movement, input, collision detection and animation. The artwork is SVG, so the original vector shapes stay crisp. PHP connects it to WordPress through a reusable shortcode and supplies the page links.

Keeping those parts separate makes it easier to refine the artwork or adjust how the game behaves. The ordinary page links remain available, even without JavaScript, and reduced-motion settings remove the decorative bump and smooth camera movement.

A recognisable Southsea backdrop.

The background is deliberately recognisable as Southsea and the Portsmouth waterfront. I wanted people from here to spot that connection straight away and feel that I’m local. The familiar skyline gives the game a sense of place, while the scenery and water move more slowly than the foreground to add depth.

A tunnel you can actually stand on.

I adjusted the tunnel and its collision area so it works as a solid platform. Webmaster can jump onto the top, settle there and enter from above. It is a small detail, but it makes the object behave the way the familiar game design suggests it should.

The tunnel leads to this making-of page, connecting the playable result back to the work behind it.

Making it work under your thumbs.

On a phone, the controls needed to make sense without a keyboard. Left and right buttons handle movement, with a separate action button for jumping. You can hold a direction and jump at the same time.

Once Webmaster is standing over the tunnel opening, that same Jump button becomes Down. The available action changes with the situation, keeping the mobile controls simple. The scene adapts to the screen width, while the camera lets you explore the wider world.

Room for the world to grow.

The service blocks come from a shared list of labels, icons and page links. The game calculates its world width and tunnel position from that list, so another service can be added without manually rebuilding the whole scene. That already accommodates seven services and Contact.

The game is reusable within WordPress, and its movement, artwork and styling are kept in separate files. That gives me room to develop more interactions and refine the experience over time.

Carry the pixels through the brand.

I used the same pixel-based design language across the website: the service icons, navigation controls, image edges and grid. The service symbols in the game match their counterparts elsewhere on the site. Webmaster also appears in other small interactions, helping the whole website feel like one connected identity.