Search for "fun things to automate on a Mac" and you get lists of productivity tips. Rename files, sort a folder, post to Slack. All useful, all work. This post is about the other kind. Over the last few months we built four games in Watchflows, the Mac automation app we make, and put them in Community Flows next to the serious ones. Each is a flow you run. Each game is one node.
They started as a test. An HTML View node shows a web page in a window and waits for the page to answer. Forms and dashboards were the obvious use. A game was the hard case: a window that has to own the keyboard, draw sixty times a second, and close itself cleanly. If the canvas could hold that, it could hold anything a person wanted to put on screen. It could, and the games stayed.
What the flow does
Every one of the four is the same shape. An Input trigger named Launch Game starts the flow when you press Run. It feeds one HTML View that holds the whole game, page, styles and script in a single field. The node opens the page, full screen, and the flow waits there until you press Escape (or, for Neon Crawl, close its window). Rush Hour Hopper adds one more node: a Notification that thanks you for playing once the window has gone.
Nothing leaves your Mac. None of the pages fetch anything, and none of them need a provider, a key or an account. Add one from Community Flows, press Run, play.
Rush Hour Hopper
Get one small frog across the road and the river. Dodge the traffic, ride the logs, and fill all five home pads to reach the next level, which is a little faster. Arrow keys or WASD move, P pauses, Escape exits. Traffic and water both cost a life.
The whole game is one HTML field of about 15 KB. Open the node's workbench and it is readable: a canvas, a list of lanes with their speeds, a tick that moves everything, a render that draws it, and a frame loop that calls both.
The Workbench is where you would change it. The preview on the right runs the page as you type, so a faster truck or a sixth home pad shows up without running the flow.
Tread Lightly
A mine-clearing puzzle in three board sizes, 9 by 9, 16 by 16 and 30 by 16. Click to reveal a square, right-click or press F to flag one, Escape to exit. Your first click is always safe. This one has no canvas at all. The board is a grid of buttons and the whole page is under 9 KB, which makes it the easiest of the four to read and the best one to copy if you want to make something of your own.
Starfighter Arcade
A space shooter. Arrow keys move, hold Space to fire, R restarts, Escape exits. Waves of monsters come down for points and you have three shields. A dozen named functions, about 9 KB, and a good example of how little a playable game needs: an update that moves things, a draw that paints them, and a frame that calls one and then the other, sixty times a second.
Neon Crawl
A turn-based artillery duel across a neon skyline. Set your angle and power, allow for the wind, and knock your rival off the rooftops while the buildings break apart where shots land. Play the computer, or choose Two Players and take turns on one Mac. It is the biggest of the four at 25 KB, because the skyline is drawn in 3D with WebGL, and the only one that opens in an ordinary window rather than full screen.
How it behaves
- The run waits on the game. Execution History shows the flow running for as long as the window is open, and Completed the moment you press Escape. The HTML View's Closing the window counts as Dismissed setting is what makes Escape and the close button end it.
- Browser storage dies with the window. The Hopper keeps your best score while it is open and starts from zero next time. To keep a score, the page would
watchflows.emit()it and a Database node after the HTML View would save it. That is a ten-minute change and a good first project. - Full screen takes the whole display, the one with the pointer. A game that opens on the wrong display is moved by closing it, putting the pointer on the other display, and running again.
- Keys go to the page, not to Watchflows. Arrow keys go to the game, not to the canvas behind it, and Escape closes the game, not the flow editor.
Make one for your kids
This is where the games stopped being a test. A game that is one text field is a game a child can change. Open the workbench, find the line that says how fast the trucks go, make it slower, press Run. Find the frog's colour. Add a sixth lane. The preview shows every change before the flow runs, and nothing can break the Mac, because the page cannot reach anything outside its window.
For a new game, describe it to the Flow Builder and let it write the page. Keep the first one small: one screen, one thing to do, one key to do it with. Then hand over the workbench.
Build a flow with an Input trigger named Launch Game connected to one HTML View with Window set to Full-screen takeover. The HTML View's page is a complete Snake game in a single HTML file: a canvas, arrow keys to steer, the snake grows when it eats, the game ends when it hits a wall or itself, and R restarts. Show the score in the top left. Pressing Escape calls watchflows.dismiss(). Use a dark background and bright colours.
Variations
- Put a Pick from List in front of the HTML View, with the four games as rows, and the chooser becomes a game menu on a keyboard shortcut.
- Swap the Input trigger for a Schedule and a game of Tread Lightly opens at 12:30, as a lunch break you cannot forget.
- Emit the score from the page and write it to a database, then show the top ten on the next run.
- Build the game in a floating card instead of full screen, sized small, and keep it in the corner while you work.
The four flows are here to download: Rush Hour Hopper, Tread Lightly, Starfighter Arcade and Neon Crawl. Or add them from Community Flows inside the app.