Skip to content

Arcade › Space Map

Space Map

  • 3d
  • space
  • map
  • exploration
  • route-planning
  • procedural
0
Remix it Discord

9 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. timothy.harr built it with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about Space Map yet. Play it, then tell timothy.harr what you would add next.

Make your own game

Space Map was built by timothy.harr with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix Space Map opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for Space Map

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a browser-based interactive 3D star-chart game titled “SPACE MAP.” Render a full-screen Three.js scene on a black/deep navy radial-gradient space background with subtle exponential fog and about 2,400 tiny white-blue stars distributed in a large surrounding volume; let the starfield gently rotate over time. The camera is a perspective orbit camera initially above and in front of the map, looking toward the center. Support mouse/touch drag to orbit with damping, mouse wheel to zoom, with a minimum and maximum zoom distance and a constrained polar angle so the view remains a slightly top-down space-map view.

Procedurally generate a new map at startup and whenever the player presses R. Create exactly about 20 planets, distributed mostly across a broad, flat square area (roughly ±220 in X/Z and only slight Y variation), while attempting to keep planets at least 26 units apart. Give each a randomized radius around 4.5–10.5 units and varied saturated pastel colors across the hue spectrum. Each planet should be a detailed lit sphere using procedurally generated canvas textures: use noise-based continents/rocky variation, subtle craters and bump detail, roughness variation, polar ice on some worlds, banding and storms on Gas Giants, darker/lighter ocean regions on Ocean worlds, and occasional bright lava veins on Volcanic worlds. Use these classes: Terrestrial, Ice, Desert, Ocean, Gas Giant, Volcanic, Jungle, and Barren. Add a faint additive atmosphere shell around every planet; add a semi-transparent moving cloud shell to Ocean, Terrestrial, Jungle, and Ice worlds (but not Gas Giants). Planets should slowly rotate and bob subtly, cloud layers should rotate somewhat faster, and atmosphere opacity should shimmer gently.

Build an undirected weighted navigation graph by connecting every planet to its three nearest neighbors, using 3D distance as edge weight and rendering each unique graph edge as a very faint thin white line. The map is for inspecting planets and planning a route: clicking a planet selects it as the origin; clicking a different planet selects it as the destination and immediately runs Dijkstra’s shortest-path algorithm over the nearest-neighbor graph. Draw the resulting path as a clearly highlighted cyan line through the selected planets, with small cyan sphere markers at intermediate hops. The route distance is the sum of path edge distances multiplied by 0.08 and displayed in AU to one decimal place. If a third planet is clicked after both selections, start a new route with that planet as the new origin and clear the destination/path. Clicking the already-selected origin as the second click should not create a destination. Esc clears origin, destination, route, and selected planet information. R clears all selections and regenerates the planets, graph, and background map.

Use subtle sci-fi lighting: cool ambient light, a pale directional key light, and a cyan-blue rim light. Selected planets enlarge to 1.28 scale and show a thin rotating selection ring lying roughly horizontally beneath/around them. The origin ring and emissive highlight are neon green (#36ffb6); the destination ring and highlight are blue (#3fb8ff); unselected planets retain their individual colored glow. Use antialiased rendering and preserve the atmospheric, softly glowing appearance.

Overlay a fixed, non-interactive HUD in the upper-left with a bold, widely letter-spaced “SPACE MAP” title. Under it show the instruction text: “Click a planet for origin, click another for destination. Esc clears • R regenerates,” with origin and destination emphasized in bold and the keyboard hint dimmed. Below, show a translucent dark glass panel with a subtle blue-gray border, blur, rounded corners, and shadow. It contains rows labeled Origin, Destination, Route, and Distance, initially showing em dashes. Once selected, show generated planet names in the style of names such as Astra-I, Vega-II, Nova Prime, etc.; show the route as names joined by “ → ”, ellipsized if too long; and show the computed distance in AU. Beneath a divider, display details for the most recently selected planet: its generated name and a short tagline, then “Class,” randomized temperature in °C, and one randomized export. Use taglines such as “quiet orbital lanes,” “unmapped ruins,” “pirate radio chatter,” “crystalline rings,” “storm-lit nights,” “ancient relays,” “bright auroras,” and “strange gravity shear,” and exports such as Helium-3, Water Ice, Rare Metals, Organics, Fuel, Silicates, Data Caches, and Artifacts.

Add simple interaction feedback with Tone.js: initialize audio on the first click or key press, then play a brief soft triangle-wave synth beep on planet selection (different pitches for origin, destination, and restarting a route), and a lower beep when regenerating or attempting the duplicate-origin selection. Keep the experience as a calm exploratory star map with no enemies, combat, timer, score, lives, or other game systems.

More free browser games

Browse the whole Arcade →