Map Game

Pixel strategy prototype — explore a procedural map, harvest resources, build bases, train workers, and tunnel through mountains.

Play online: https://mikecarlo.github.io/Map-Game/

Or open index.html after cloning, or run a local server.

Starting a game

The game opens on a landing screen rather than dropping you straight into a world:

New game — pick a map size and play. Small 64 × 64, Medium 96 × 96, Large 128 × 128. Terrain density scales with the size, so a small map is a compact version of the same world, not a cramped one.
Learn to play — six short guided levels, one mechanic at a time.

Tap Menu in the bottom bar at any point to come back here.

Tutorial levels

#	Level	What it teaches
1	Getting around	Selecting a unit, Move, and why Move stays on
2	Cutting wood	Cut, the carry-one-per-trip loop, banking wood
3	Mining Virelium	Finding deposits, Mine, heavier cargo
4	Growing your base	Training a worker, building an armory
5	Soldiers and defence	Training a soldier, setting a Defend post
6	Enemies and huts	Box-select, Attack, clearing a hut

Each level generates a world suited to it. No enemy hut exists until level 6 — nothing spawns attackers while you are learning to harvest. Level 1 is open country with nothing to cut or mine, level 2 has wood but no Virelium, level 4 clears flat ground for your armory, and only the last level puts a hut on the map.

Levels check your real game state — there is no scripted path, you actually do the thing. They also seed whatever they need (level 5 hands you an armory), so you can jump straight to the one you want. Skip step moves past anything you are stuck on, and finished levels get a green tick on the menu.

How to run

# Option A — open the file
open index.html          # macOS
# or double-click index.html

# Option B — local server (recommended)
npx serve .

Mobile-friendly: full-screen canvas, bottom action bar, pinch-to-zoom and drag-to-pan.

Goal (prototype)

There is no win condition yet. Experiment with:

Cutting forests for wood
Mining Virelium deposits
Building L-shaped purple bases
Training more workers at bases
Tunneling through mountain ranges so workers can cross the map

Resources must be carried back to a base one unit at a time. Workers move slower when carrying cargo (wood weight 1, Virelium weight 3).

Map features

Terrain	Color	Notes
Dirt	Brown	Walkable
Forest	Green (shades)	Harvestable; lighter = lower density (1–5)
Stumps	Dark brown	Tree fully harvested
Mountains	Grey (shaded peaks)	Impassable until tunneled
Tunnels	Dark brown path	Walkable after digging
Ocean / rivers	Blue	Impassable
Virelium jet	Dark hole + cyan rim	Spawns mineral deposits nearby
Virelium deposit	Cyan / teal	Density 1–10; one harvest per density
Base	Purple L shape	Deposit point; train workers

Map size: 128 × 128 tiles (each tile is 8 px).

Fog of war

You start seeing only the ground around your base. The rest of the world is black until someone walks into it.

Every tile is in one of three states:

State	Looks like	You see
Never seen	Solid black	Nothing at all — terrain, resources and huts are all hidden
Seen before, out of sight	Terrain, shaded dark	The land as you remember it — but no enemies, no live activity
In sight now	Full colour	Everything, including enemy units and what they are doing

Sight radius, in tiles:

Source	Radius
Worker	7
Soldier	9
Base segment	11
Armory	9

Enemies and their huts give you no vision — only your own units and buildings do. Scouting is the way to find the enemy hut.

Consequences worth knowing:

Enemies standing in the dark are not drawn, cannot be tapped, and are not counted in the info bar
You cannot order an attack on a hut or enemy you have never seen
Workers only auto-target trees and Virelium on ground you have explored, so a brand-new map may need a scouting trip before there is much to harvest
New Map wipes everything you had explored

Pathfinding still routes around terrain you have not discovered yet — units know the shape of the map even where you don't. Set FOG_ENABLED = false in js/config.js to reveal the whole map.

Minimap

The panel under the PAN badge is a live overview of everything you have explored — one pixel per tile, in the same three fog states as the main view.

Red dots — workers · white dots — soldiers · green dots — enemies you can currently see
Yellow box — units you have selected
White rectangle — the part of the world on screen right now
Cyan patches are Virelium you have found

Tap or drag on the minimap to jump the camera there — handy once the map is zoomed in far enough that the whole world no longer fits on screen.

Controls

Camera

Drag to pan the map
Pinch (touch) or mouse wheel to zoom
New Map — generate a fresh procedural world (resets everything)
Reset View — fit the entire map on screen

Selecting units & bases

Tap a red dot (worker) to select it → yellow selection ring appears
Tap any purple base tile to select the base
Tap empty space or use Cancel to deselect

The bottom action bar changes based on what is selected.

Worker actions (red dots)

Select a worker, then choose an action from the bottom bar. While targeting, the active button shows ✕ and turns red — tap it again to cancel targeting.

Move

Tap Move
Tap any walkable destination
Worker pathfinds around obstacles (A*) and walks there

Move stays on. Unlike every other action, it does not switch itself off after one destination — keep tapping and the unit keeps re-routing, which is usually what you want when steering someone across the map. It ends when you tap ✕ Move or tap a different unit (which selects that unit instead).

Cut (wood)

Tap Cut
Tap a green forest tile (or near one — it will snap to the nearest available tree)
Worker walks to the tree, harvests for ~0.7 s, then automatically carries the wood back to the nearest base
After depositing, it continues cutting the same tree (if density remains) or finds the next nearest tree

Each tree has density 1–5
One cut removes 1 density
At density 0 the tile becomes a stump
Multiple workers cannot claim the same tree at the same time

Mine (Virelium)

Tap Mine
Tap a cyan/teal Virelium deposit (or near one)
Worker walks to the deposit, mines for ~0.7 s, then carries the Virelium back to the nearest base
After depositing, it continues mining the nearest available deposit

Each deposit has density 1–10
One mine removes 1 density
Deposits cannot be claimed by multiple workers simultaneously
You cannot start mining while already carrying wood or Virelium

Tunnel

Tap Tunnel
Tap a start point (on or next to a mountain) — orange marker appears
Tap an end point
Worker walks to the start, then digs tile-by-tile through the rock (~1.2 s per rock tile)
Finished tunnels stay on the map permanently and are used by pathfinding

Tunnels let workers cross mountain ranges that would otherwise block them.

Build

Tap Build, then Base or Armory
Tap a clear dirt (or stump) area
Worker walks to the spot, then works on site while it goes up — armory 6 s, base expansion 9 s

The site is marked with a dashed outline and an amber dial that fills as the work goes on; the info bar reads e.g. “Building armory… 44%”. Give the worker another order and the site is abandoned — nothing is placed. Ground already being built on cannot be claimed by a second build.

Base footprint: 7×3 horizontal leg + 3×7 vertical leg (3 tiles thick).
The placement area must be entirely clear dirt/stumps — no trees, rock, water, or existing base tiles.

Cancel

Clears the worker’s current orders and deselects it.

Getting attacked

Workers have 8 HP and can be killed. Their dot empties like a pie chart as they lose health, the same as soldiers.

Enemies hunt workers as readily as soldiers — an unguarded worker dies in about 4 seconds
A struck worker swings back at whatever is hitting it: 1 damage every 1.5 s (a soldier does 4 every 0.85 s), so it loses almost every fight it starts and is really just buying time
It fights back where it stands — a worker never chases and stops once the attacker leaves or is dead
A retaliating worker gets an orange ring and the info bar reads “Worker under attack — fighting back”

A laden worker puts its load down to fight. Wood or Virelium it was hauling drops on the tile where it was jumped and stays there:

The pile shows as a pale crate (wood) or cyan bead (Virelium), and is drawn over units so the worker standing on it never hides it
It will not grab the load back mid-fight — it fights first, collects after
Once the fight ends it picks the load up and carries on to a base, resuming whatever it was cutting or mining
If the worker dies, the load stays on the ground; any empty-handed worker that walks over a pile picks it up and hauls it home, so nothing is ever destroyed by an ambush — it just has to be fetched
The info bar counts what is lying around: “2 dropped on the ground”

Guard your harvesters with soldiers on Defend, or expect to keep retraining.

Soldier actions (dark dots with a ring)

Soldiers are trained at an armory. Select one — or several, via double-tap or a long-press box select — and the bar offers Move / Attack / Defend / Cancel.

Attack

Tap Attack
Tap an enemy (green) or an enemy hut

Soldiers walk into range and hit the target until it dies. Huts are chewed through one tile at a time and darken as they take damage.

Defend

Tap Defend
Tap the spot on the map you want held

Each selected soldier takes a post at that spot (a group spreads over the tiles around it, one post each) and stands guard:

Any enemy that comes within 7 tiles of the post is engaged automatically
A target that runs beyond 9 tiles is let go rather than chased across the map
After the fight, the soldier walks back to its post and keeps watching
The post is marked with a blue diamond; selecting the soldier shows its guard radius as a dashed ring, and a dotted tether while it is away from the post

Defend sticks until you give the soldier another order — Attack, Move or Cancel all release the post.

Base actions (purple)

Tap any tile of a base to select it
Train — queues a worker (takes 5 s)
✕ Queue (n) — cancels the last worker you queued
Upgrade — starts a new 3×3 wing (+3 worker cap). It takes 12 s: the site is outlined next to the base with a dial, and the button turns into ✕ Upgrading n% — tap it again to call the expansion off
Cancel — deselects the base

New workers appear adjacent to the base if space is available. No worker is needed for an upgrade, but the base can only raise one wing at a time.

Training queue

Training takes time and is queued, so a barracks-style rhythm works:

The building stays selected after you tap Train — tap it again to queue another. The trainee is never auto-selected, so your selection is never stolen.
A circular progress dial fills in the middle of the building, with a +n count in its centre when more are queued
Worker 5 s, soldier 8 s; up to 5 in a queue per building
Each building trains one at a time; several armories train in parallel
Queued units count toward the cap, so you cannot over-order
✕ Queue (n) removes the most recently queued unit
If there is no free tile when a unit finishes, it waits ("waiting for space") until one opens up
Destroy a building and its queue is discarded

Resource rules

A worker can hold only one resource at a time (wood or Virelium)
After cutting or mining, the worker automatically returns to the nearest base, deposits, then resumes the same task
Carrying slows movement:
- Empty speed ≈ 5.5
- Carrying wood (weight 1) → roughly half speed
- Carrying Virelium (weight 3) → roughly quarter speed
Wood and Virelium totals are shown in the info bar when present
There is currently no cost to train workers or build bases (prototype)

Status messages (info bar)

The top info bar always shows context:

Nothing selected → “Tap a red dot or purple base to select”
Worker selected → “Character selected — choose an action”
Targeting mode → specific instructions (e.g. “Tap a tree to start cutting”)
Busy states → “Harvesting trees…”, “Carrying wood → returning to base…”, “Tunneling through the mountain…”, etc.
Resource totals appear when you have wood or Virelium in a base or being carried

Project layout

index.html          # shell + UI markup
css/style.css       # full-screen mobile UI
js/config.js        # tiles, colors, speeds, footprint, weights
js/state.js         # units, selection, claims, resources
js/map.js           # generation + walkability + elevation
js/fog.js           # fog of war: explored / visible tile layers
js/pathfinding.js   # A* pathfinding
js/actions.js       # move / cut / mine / build / tunnel / train
js/training.js      # queued, timed unit training at base / armory
js/construction.js  # build times for armory / base expansion + upgrades
js/ui.js            # bottom bar labels & info text
js/render.js        # canvas draw
js/minimap.js       # explored-area overview + tap to jump
js/input.js         # pan, zoom, tap
js/main.js          # game loop, buttons, boot

Scripts load in order (no bundler). Edit any module and refresh the browser.

Roadmap ideas

Tree regrowth over time
Resource costs to train / build
Patrol routes between two posts
Multiple player bases / factions
Save / load map state
Worker idle behavior improvements