A Maze in the Corner: Embedding SpelagonECS in Any Website

Notice the little maze down in the lower-right corner of this page? Go ahead — tap or click to steer the character toward the goal. It follows you around the whole site, so you can play a quick round while reading about, well, itself.

It’s a tiny thing with a bigger point: a SpelagonECS game can be dropped into any existing website without touching the site’s code, build, or dependencies.

How it works

Every SpelagonECS game compiles down to a single self-contained chunk of HTML — the JavaScript, the tilesheet, and the sound library are all inlined, with no external requests. The maze widget is about 21 KB. To embed it you drop that chunk into the page and pin a little container to the corner:

1
2
3
4
5
6
7
8
9

<div id="maze-widget">
  <canvas id="gamecanvas" width="256" height="128"></canvas>
  <script>/* ~20 KB of inlined game logic + assets */</script>
</div>
<style>
  #maze-widget { position: fixed; right: 12px; bottom: 12px;
                 width: 256px; height: 128px; z-index: 9000; }
  #maze-widget canvas { width: 100%; height: 100%; image-rendering: pixelated; }
</style>

That’s the whole integration — a fixed <div>, a canvas, and the inlined game. No build step on the host site, nothing to load.

Why not an iframe?

My first instinct was an <iframe>: it sandboxes the game’s code and styles from the host page, which is tidy. It worked everywhere… except iOS Safari has a long-standing quirk — a position: fixed iframe stops receiving touch events once you scroll the page. The maze rendered perfectly but went dead to taps after any scroll, in every orientation, while desktop browsers were fine throughout.

Inlining the canvas straight into the page sidesteps it entirely. A plain fixed <div> — the same thing a sticky header or menu uses — keeps receiving touches no matter where you’ve scrolled. The trade-off is that the game shares the page’s global scope instead of being sandboxed, so its CSS is scoped under #maze-widget to stay out of the host’s way.

Made to overlay

A couple of tweaks turn the normal maze game into a good overlay citizen:

• Transparent background. The canvas is cleared to transparent, so the page shows straight through the empty cells (that’s why the maze’s corners are see-through).
• Half height. It’s a 256×128 letterbox so it tucks into the corner without covering much of the page.
• Responsive. It scales down on phones and up on desktops, and because it’s pixel art it stays crisp at integer scales.

Everything else — movement, the hop animation, wall collisions, the win check, the sounds — is the exact same code the full maze game uses. Only the level data and a couple of display settings differ.

Why this matters

The design goals behind SpelagonECS make this kind of embedding almost free:

1. Single-file output — one self-contained chunk, nothing to host or wire up
2. Zero runtime dependencies — it won’t drag jQuery or anything else into your page
3. Tiny — ~21 KB including art and sound
4. Mobile-first — touch controls work the same in the corner as full-screen

So the maze in the corner isn’t really a game post — it’s a live demo of how little it takes to sprinkle a playable game into a blog, a docs site, a landing page, or anything else. Build a game, get one self-contained snippet, paste it in. Done.

Now go finish that maze.