Spielwerk ∞: Civilization

The long-term goal of my project ideas was always a Civilization clone. It already exists: tce-civilization is a small turn-based strategy game, built as a TCE element before the Spielwerk series began. This page has no step number because the series hasn't got there yet, and it builds nothing new. It shows where the gears so far are heading, and how much of them a game like this contains.

Play it · Source: civilization-project/civilization__tce · Element version 0.1.1

The game

A seeded world of grass, forest, hills, mountains and sea. Settlers found cities, cities grow and build units and buildings, research unlocks technologies, and two or three computer civilizations are always at war with you. You win by destroying every rival, researching the Scientific Revolution, or having the highest score in turn 250. The running game is saved between visits.

• Mouse/touch: select, move, drag and zoom the map.
• Keyboard: arrow keys scroll the map.

What the series puts into a game like this

The element predates the series and still brings its own helpers. That is the point of this page: line by line, they are modules the steps have added to the toolbox.

• Randomness, step 01: the world is generated from a seed; same seed, same world. game/random.ts is its own small generator today; in the series it would be SeededRandom.
• Grid, step 03, and tile map, step 13: the map is a grid of tiles with neighbors, visibility and pathfinding. Grid2D and TileMap provide exactly these neighbor and world-coordinate queries.
• State machine, step 04: menu, game, research dialog, game over: the element keeps an overlay field with four values today. A StateMachine with enter/exit turns those if-branches into named phases.
• Timers, step 05: the blinking of the selected unit and the sequence of computer moves are questions of time in the frame loop.
• Pointer, step 08, and camera, step 12: click, drag, zoom, scroll with the arrow keys: the element's src/input/camera.ts is a Camera2D with screen_to_world, and the pointer handling in its logic is what PointerInput wraps.
• Boxes, step 11: the hit areas of units, cities and buttons on the map are axis-aligned rectangles.
• Pixels, step 14: the minimap is a pixel buffer: one tile, one pixel.

When the series reaches strategy again, the way is clear: move tce-civilization onto the template, swap its own helpers for the toolbox, and grow the toolbox by what is still missing: pathfinding on a grid, a fog of war and a save format with a schema.

Embed it

<script src="https://www.game-object.de/tce-elements/tobidot/tce-civilization"></script>
<tce-civilization init-rivals="3" init-map-size="medium"></tce-civilization>

Next

All steps · Project ideas