Spielwerk is German for the clockwork in a music box: many small gears that make music together. In this series every gear is a small game. They are all built from the same template as elements of this site, run right in the browser, and each one teaches my game library ts-game-toolbox one new module. The order follows my project ideas: randomness first, then input, then games, tools, and finally strategy.
Every page is a short coding tutorial: what the game is, how to embed it, and in depth how the new toolbox module works.
The steps
- Spielwerk 00: The workbench: the template, the logo intro with sound, fitting any window
- Spielwerk 01: Zahlen raten: a seeded random generator
- Spielwerk 02: Galgenraten: keyboard state per frame
- Spielwerk 03: Tic-Tac-Toe: a generic grid
- Spielwerk 04: Mastermind: a state machine
- Spielwerk 05: Lock Picker: timers and cooldowns
- Spielwerk 06: Olympische Sprünge: motion under gravity
- Spielwerk 07: Dance Combo Trickster: recognizing input sequences
- Spielwerk 08: 2D-Koordinaten-Picker: mouse, touch and pen in one
- Spielwerk 09: Farb-Picker: HSV and RGB
- Spielwerk 10: Hau den Maulwurf: spawning on a schedule
- Spielwerk 11: Flappy Bird: collision of axis-aligned boxes
- Spielwerk 12: Side-Scroller: a 2D camera
- Spielwerk 13: 2D-Puzzle mit Schaltern: tile maps
- Spielwerk 14: Pixel Paint: a pixel buffer
- Spielwerk 15: Memory: tweens and easing
- Spielwerk 16: Flummis: bouncing off walls and each other
- Spielwerk 17: Bricks: sound effects and music
- Spielwerk 18: Rundenkampf: a menu as a tree and a cursor
- Spielwerk 19: Schleim-Abwehr: walking somewhere and stopping
- Spielwerk 20: Stellwerk: the UI page every game already has
- Spielwerk 21: Amtsschimmel: a menu with input of its own, a buffer, and a view in any style
- Spielwerk 22: Leuchtfeuer: a beam made of rays, shadows, and a tree that says which boats to ask
- Spielwerk 23: Diaabend: pictures on the UI page, and a slide that comes into focus
- Spielwerk 24: Stellschrauben: a map that keeps up with the sliders, and a throttle you can turn off
- Spielwerk 25: Wochenmarkt: values that tell who watches them, and one socket for everything that happens
The games keep their German names and on-screen text. Every page has a "Play it" link at the top.
Where it's heading
Spielwerk ∞: Civilization isn't a step yet. It's a game that already exists, and the page shows how much of what the steps build goes into a game like it.
Source
All steps live in my project folder under collection-spielwerk, the toolbox on npm and at github.com/tobidot/ts-game-toolbox. The element spec is in the documentation.
Comments