Arcade widget
Raiders all the way from Earth orbit to Neptune, and a liner full of tourists behind you. One JavaScript file, no dependencies, drops onto any page in one line.
← → move Space fire P pause M sound On a phone: drag to steer, hold to fire.
Copy the file next to your HTML, then add the container and the script. It mounts itself.
<div data-space-tours-game></div>
<script src="space-tours-defense.js"></script>The widget fills the width of its container and takes a 4:3 box by default. Give the container a height of your own and it uses that instead.
Set them as data attributes on the container, or pass an object to
SpaceToursDefense.mount(el, options).
| Attribute | Default | What it does |
|---|---|---|
data-attract | true |
Plays itself, arcade cabinet style, until someone takes the controls. Set to
false for a still title screen. |
data-sound | false |
Sound is off until the player asks for it. The demo run is always silent. |
data-lives | 3 | Escort ships you start with. |
data-aspect | 4 / 3 |
Box shape, used only when the container has no height of its own. |
data-title | Space Tours Defense | Heading on the title screen. |
data-credit-labeldata-credit-href | none | Optional credit line under the start button. |
The game runs inside a shadow root, so nothing leaks either way: the host page cannot
restyle it by accident and its own CSS cannot touch the page. What it does read are the
custom properties --bg, --line, --text,
--gold, --ember, --pulse, --pulse-dim,
--danger and --ok, if the page defines them. Otherwise it falls
back to the palette you see here.
It pauses when it scrolls out of view and when the tab loses focus, so a widget sitting
halfway down a page is not quietly burning a laptop battery. It honours
prefers-reduced-motion. Keyboard input is only captured while the widget has
focus, so arrow keys still scroll the page everywhere else. The high score is kept in
localStorage on the visitor's own machine and goes nowhere near a server.