{"id":1126,"date":"2026-10-26T17:39:18","date_gmt":"2026-10-26T21:39:18","guid":{"rendered":"https:\/\/harmonicdesign.ca\/?p=1126"},"modified":"2026-10-26T17:42:37","modified_gmt":"2026-10-26T21:42:37","slug":"the-haystack-browser-tower-defence-game-with-a-horror-twist","status":"publish","type":"post","link":"https:\/\/harmonicdesign.ca\/product\/the-haystack-browser-tower-defence-game-with-a-horror-twist\/","title":{"rendered":"The Haystack: Browser Tower Defence Game with a Horror Twist"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* The Haystack article\n-- Scoped to .hay_article, so it inherits the blog's own type and colours.\n------------------------------------------------------- *\/\n\n.hay_article {\n\t--hay_ink: #1b1028;\n\t--hay_dusk: #2a1b34;\n\t--hay_straw: #f0a24a;\n\t--hay_cyan: #6fe3d6;\n\t--hay_blood: #c4263c;\n}\n\n\/* Media\n-- Screenshots are pixel art, so keep scaled pixels crisp.\n------------------------------------------------------- *\/\n\n.hay_article img,\n.hay_article video {\n\tdisplay: block;\n\twidth: 100%;\n\theight: auto;\n\timage-rendering: pixelated;\n\tbackground: var(--hay_ink);\n}\n\n.hay_article .hay_figure {\n\tmargin: 2rem 0;\n}\n\n.hay_article .hay_figure img,\n.hay_article .hay_figure video {\n\tborder-radius: 6px;\n\tbox-shadow: 0 10px 30px -12px rgba(27, 16, 40, 0.55);\n}\n\n.hay_article figcaption {\n\tmargin-top: 0.6rem;\n\tfont-size: 0.9em;\n\topacity: 0.75;\n\ttext-align: center;\n}\n\n\/* Let the widest shots spill past the text column on large screens *\/\n@media (min-width: 1500px) {\n\t.hay_article .hay_wide {\n\t\tmargin-left: -6rem;\n\t\tmargin-right: -6rem;\n\t}\n}\n\n\/* The title screen sits beside the text about modes *\/\n@media (min-width: 800px) {\n\t.hay_article .hay_right {\n\t\tfloat: right;\n\t\twidth: 46%;\n\t\tmargin: 0.4rem 0 1rem 1.5rem;\n\t}\n\t.hay_article h2 {\n\t\tclear: both;\n\t}\n}\n\n\/* Play buttons\n------------------------------------------------------- *\/\n\n.hay_article .hay_play {\n\tmargin: 2rem 0;\n\ttext-align: center;\n}\n\n.hay_article .hay_button {\n\tdisplay: inline-block;\n\tpadding: 0.9rem 1.8rem;\n\tborder: 3px solid var(--hay_ink);\n\tborder-radius: 4px;\n\tbackground: var(--hay_straw);\n\tbox-shadow: 4px 4px 0 var(--hay_ink);\n\tcolor: var(--hay_ink);\n\tfont-weight: 700;\n\tletter-spacing: 0.12em;\n\ttext-decoration: none;\n\ttext-transform: uppercase;\n\ttransition: transform 0.1s ease, box-shadow 0.1s ease;\n}\n\n.hay_article .hay_button:hover,\n.hay_article .hay_button:focus-visible {\n\ttransform: translate(2px, 2px);\n\tbox-shadow: 2px 2px 0 var(--hay_ink);\n}\n\n\/* Towers\n------------------------------------------------------- *\/\n\n.hay_article .hay_towers {\n\tpadding-left: 0;\n\tlist-style: none;\n}\n\n.hay_article .hay_towers li {\n\tmargin: 0 0 0.6rem;\n\tpadding: 0.6rem 0.9rem;\n\tborder-left: 4px solid var(--hay_straw);\n\tbackground: rgba(240, 162, 74, 0.08);\n}\n\n\/* The corruption slider\n-- Without the script, the five stages show as a simple stack of figures.\n------------------------------------------------------- *\/\n\n.hay_article .hay_corruption {\n\tmargin: 2rem 0;\n}\n\n.hay_article .hay_corruption .hay_stage {\n\tmargin: 0 0 1rem;\n}\n\n.hay_article .hay_corruption.is_slider .hay_frames {\n\tposition: relative;\n\taspect-ratio: 1280 \/ 800;\n\toverflow: hidden;\n\tborder-radius: 6px;\n\tbackground: var(--hay_ink);\n\tbox-shadow: 0 10px 30px -12px rgba(27, 16, 40, 0.55);\n}\n\n.hay_article .hay_corruption.is_slider .hay_stage {\n\tposition: absolute;\n\tinset: 0;\n\tmargin: 0;\n\topacity: 0;\n}\n\n.hay_article .hay_corruption.is_slider .hay_stage figcaption {\n\tdisplay: none;\n}\n\n.hay_article .hay_corruption.is_slider .hay_stage img {\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.hay_article .hay_controls {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tmargin-top: 0.8rem;\n}\n\n.hay_article .hay_controls input[type=\"range\"] {\n\tflex: 1;\n\taccent-color: var(--hay_straw);\n\tcursor: ew-resize;\n}\n\n.hay_article .hay_readout {\n\tmin-width: 9.5em;\n\tfont-variant-numeric: tabular-nums;\n\tfont-weight: 700;\n\ttext-align: right;\n\twhite-space: nowrap;\n}\n\n@media (min-width: 1100px) {\n\t.hay_article .hay_corruption.is_slider {\n\t\tmargin-left: -6rem;\n\t\tmargin-right: -6rem;\n\t}\n}\n\n.hay_article h2 {\nmargin: 2rem 0\n}\n\n.hay_article h3 {\nmargin: 1rem 0\n}\n\n.hay_article p {\nmargin-bottom: 1em}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/* The Haystack article\n-- Plays each clip only while it's on screen, and turns the corruption stages into a slider.\n------------------------------------------------------- *\/\n\n(function () {\n\t'use strict';\n\n\tvar still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n\t\/* Clips\n\t-- They ship with controls and preload=\"none\", so they work without this script and cost\n\t-- nothing until seen. Here they lose the controls and play themselves while in view.\n\t-- Readers who prefer reduced motion keep the controls and press play themselves.\n\t------------------------------------------------------- *\/\n\n\t\/**\n\t * @param {HTMLVideoElement} video\n\t * @returns {void}\n\t *\/\n\tfunction play_quietly(video) {\n\t\tvar p = video.play();\n\t\tif (p && p.catch) p.catch(function () { video.controls = true; });\n\t}\n\n\t\/**\n\t * @returns {void}\n\t *\/\n\tfunction set_up_clips() {\n\t\tvar clips = document.querySelectorAll('.hay_article .hay_video');\n\t\tif (still || !('IntersectionObserver' in window)) return;\n\t\tvar watch = new IntersectionObserver(function (entries) {\n\t\t\tentries.forEach(function (entry) {\n\t\t\t\tvar video = entry.target;\n\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\tif (video.preload === 'none') video.preload = 'auto';\n\t\t\t\t\tplay_quietly(video);\n\t\t\t\t} else {\n\t\t\t\t\tvideo.pause();\n\t\t\t\t}\n\t\t\t});\n\t\t}, { rootMargin: '200px 0px', threshold: 0.25 });\n\t\tArray.prototype.forEach.call(clips, function (video) {\n\t\t\tvideo.muted = true;\n\t\t\tvideo.controls = false;\n\t\t\twatch.observe(video);\n\t\t});\n\t}\n\n\t\/* Corruption slider\n\t------------------------------------------------------- *\/\n\n\t\/**\n\t * @param {HTMLElement} box\n\t * @returns {void}\n\t *\/\n\tfunction set_up_slider(box) {\n\t\tvar stages = Array.prototype.slice.call(box.querySelectorAll('.hay_stage'));\n\t\tif (stages.length < 2) return;\n\t\tvar labels = stages.map(function (s) {\n\t\t\tvar c = s.querySelector('figcaption');\n\t\t\treturn c ? c.textContent : '';\n\t\t});\n\n\t\tvar frames = document.createElement('div');\n\t\tframes.className = 'hay_frames';\n\t\tstages.forEach(function (s) { frames.appendChild(s); });\n\n\t\tvar controls = document.createElement('div');\n\t\tcontrols.className = 'hay_controls';\n\t\tvar range = document.createElement('input');\n\t\trange.type = 'range';\n\t\trange.min = '0';\n\t\trange.max = String((stages.length - 1) * 100);\n\t\trange.step = '1';\n\t\trange.value = '0';\n\t\trange.setAttribute('aria-label', 'Hay fed');\n\t\tvar readout = document.createElement('output');\n\t\treadout.className = 'hay_readout';\n\t\treadout.setAttribute('aria-live', 'polite');\n\t\tcontrols.appendChild(range);\n\t\tcontrols.appendChild(readout);\n\n\t\tbox.appendChild(frames);\n\t\tbox.appendChild(controls);\n\t\tbox.classList.add('is_slider');\n\n\t\t\/\/ the slider needs every stage, so don't leave them to lazy loading\n\t\tstages.forEach(function (s) {\n\t\t\tvar img = s.querySelector('img');\n\t\t\tif (img) img.loading = 'eager';\n\t\t});\n\n\t\t\/**\n\t\t * Crossfade between the two stages either side of the slider.\n\t\t * @returns {void}\n\t\t *\/\n\t\tfunction show() {\n\t\t\tvar v = Number(range.value) \/ 100;\n\t\t\tvar i = Math.floor(v);\n\t\t\tvar f = v - i;\n\t\t\tstages.forEach(function (s, k) {\n\t\t\t\tvar o = k === i ? 1 : (k === i + 1 ? f : 0);\n\t\t\t\ts.style.opacity = String(o);\n\t\t\t\ts.setAttribute('aria-hidden', o > 0.5 ? 'false' : 'true');\n\t\t\t});\n\t\t\treadout.textContent = labels[Math.round(v)];\n\t\t}\n\n\t\trange.addEventListener('input', show);\n\t\tshow();\n\t}\n\n\t\/**\n\t * @returns {void}\n\t *\/\n\tfunction start() {\n\t\tset_up_clips();\n\t\tArray.prototype.forEach.call(document.querySelectorAll('[data-hay-corruption]'), set_up_slider);\n\t}\n\n\tif (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);\n\telse start();\n})();\n<\/script>\n\n<div class=\"hay_article\">\n\n<p>Out past the barn there&#8217;s a field. In the field there&#8217;s a haystack of fifteen million hay, and next to it, a hole.<\/p>\n\n<p>Your job is to feed twelve million of that hay to the hole. Nobody tells you why.<\/p>\n\n<p>That&#8217;s <strong>The Haystack<\/strong>, a pixel-art factory and tower defence game you can play free in your browser right now. There&#8217;s nothing to download, no account and no ads, and it works on your phone.<\/p>\n\n<p class=\"hay_play\"><a class=\"hay_button\" href=\"https:\/\/harmonicdesign.ca\/hay\">Play The Haystack<\/a><\/p>\n\n<figure class=\"hay_figure hay_wide\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-opening-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-opening.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-opening.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>Every new field opens under the same moon.<\/figcaption>\n<\/figure>\n\n<h2>Why I made it<\/h2>\n\n<p>For years I&#8217;ve been working on a tower defence engine in plain JavaScript. It was one of those projects I&#8217;d start and restart every year, never be satisfied with, throw away, and start again.<\/p>\n\n<p>I grew up on Flash tower defence games. I played a lot of Elemental Tower Defence, but my favourite was <em>Desktop Tower Defence<\/em>, mostly on the Casual Collective site. I loved how pathing worked in that game, where the towers themselves made the maze.<\/p>\n\n<p>I also love games about keeping a system flowing. Cities: Skylines (the traffic management in particular), RollerCoaster Tycoon and Factorio. So I wanted a tower defence game where a factory, with its own traffic problems, is the source of income that pays for the towers.<\/p>\n\n<p>Then there&#8217;s the horror fan in me. I&#8217;ve always loved the Lovecraftian idea of feeding some unknowable <em>thing<\/em>. And a factory plus a defence needs a lot of open ground. Enter the hay and the farmland. Everything else grew from there, including the monsters raiding the haystack directly and the look of the whole game.<\/p>\n\n<h2>The basic loop<\/h2>\n\n<p>You start with your bare hands. Click the haystack to grab one hay, click the hole to feed it, and the hole pays you a dollar. Do that a few dozen times and you can afford a grain shovel.<\/p>\n\n<figure class=\"hay_figure\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-hand-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-hand.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-hand.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>One hay at a time. Everyone starts here.<\/figcaption>\n<\/figure>\n\n<p>From there it snowballs in the way incremental games do:<\/p>\n\n<br>\n\n<ul>\n\t<li><strong>Tools.<\/strong> Bare hands, a grain shovel, a pitchfork, then a hay hook. Each grab costs stamina, so heavier tools move more hay but tire you faster.<\/li>\n\t<li><strong>Robot arms.<\/strong> They grab from the stack by themselves and drop the hay on a port behind them.<\/li>\n\t<li><strong>Belts.<\/strong> They carry that hay to the hole, so you don&#8217;t have to.<\/li>\n\t<li><strong>Generators.<\/strong> Arms and belts run on power, and power comes from burning hay.<\/li>\n<\/ul>\n\n<p>That last point is the core tension. There are fifteen million hay and you need twelve million, so you have three million to spare. Every hay you burn for power is hay that will never reach the hole. Burn too much and the hole will still hunger.<\/p>\n\n<p>The stack also shrinks as you take from it. Arms placed at the old edge slowly lose their reach, so you either upgrade them or follow the stack inward onto the ground it gives up. That ground has strange concentric rings carved into it. I&#8217;ll come back to that.<\/p>\n\n<figure class=\"hay_figure hay_wide\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-factory.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"A pixel-art haystack on the left with five robot arms along its edge, feeding belts that merge and run into a black hole on the right. A gate splits some hay off to two generators.\">\n\t<figcaption>A mid-game factory: five arms, two collector belts, a gate splitting hay to two generators, and the hole.<\/figcaption>\n<\/figure>\n\n<h2>Belts and gates<\/h2>\n\n<p>This is the Factorio and Cities: Skylines part of my brain, and I&#8217;m proud of how it feels.<\/p>\n\n<p>Belts are drawn by dragging. Drag out of an arm&#8217;s port and the belt follows your pointer, turning corners as it goes. Drop it on the hole and hay starts flowing. Drag off the middle of an existing belt and that tile becomes a <strong>gate<\/strong>.<\/p>\n\n<figure class=\"hay_figure\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-belts-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-belts.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-belts.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>Drag a belt from the arm to the hole, then branch off it to feed a generator. The branch point becomes a gate.<\/figcaption>\n<\/figure>\n\n<p>Gates split hay up to three ways, at <strong>exact ratios<\/strong>, allowing you do to things like a 70\/15\/15 split. That matters, because your generators need a steady trickle, not a flood followed by a drought.<\/p>\n\n<figure class=\"hay_figure\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-gate-crop.webp\" width=\"760\" height=\"560\" loading=\"lazy\" alt=\"A gate's menu with a split bar showing 15% up, 70% straight and 15% down, plus options to split evenly, reverse belts and upgrade the belt.\">\n\t<figcaption>Tap a gate to drag its split. This one sends 70% to the hole and 15% to each generator.<\/figcaption>\n<\/figure>\n\n<p>The rest of the traffic toolbox:<\/p>\n\n<ul>\n\t<li><strong>Merges.<\/strong> End a belt on the side of another and they join, up to three into one.<\/li>\n\t<li><strong>Crossings.<\/strong> Drag straight across a belt and yours bridges over it. The two flows never mix.<\/li>\n\t<li><strong>Brownouts.<\/strong> If power runs short, belts slow to a crawl first while the arms keep a small reserve, so the factory can never deadlock. You fix it by sending more hay to the generators.<\/li>\n\t<li><strong>Upgrades.<\/strong> Faster belts and heavier belt grades carry more, but they draw more power per tile, which means burning more hay.<\/li>\n<\/ul>\n\n<h2>Design choices<\/h2>\n\n<h3>Nothing is explained<\/h3>\n\n<p>There&#8217;s no story, no narrator and no tutorial beyond a few short hints. The horror is only ever implied. You&#8217;ll find yourself asking why you&#8217;re feeding the hole.<\/p>\n\n<h3>A ledger instead of a toolbar<\/h3>\n\n<p>The screen stays almost empty: a tally of hay fed, your money, your stamina and your power. Everything else lives in a worn farm ledger. You buy machines from it, read your accounts in it, and sometimes notice notes in the margin in a second handwriting that isn&#8217;t yours.<\/p>\n\n<figure class=\"hay_figure hay_wide\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-ledger-accounts.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"The ledger's accounts page, listing hay in the stack, on belts, fed to the hole, burned, and unaccounted for, with handwritten margin notes reading 'count again' and 'the crows were here before the field'.\">\n\t<figcaption>The accounts page. Note the &#8220;Unaccounted for&#8221; line, and the margin notes.<\/figcaption>\n<\/figure>\n\n<p>There&#8217;s no tool bar either. You hold one tool, and it&#8217;s always the best one you own. On a computer the tool <em>is<\/em> your cursor.<\/p>\n\n<h3>Two game modes<\/h3>\n\n<figure class=\"hay_figure\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-title.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"The title screen: choose how long the game should take (Brief, Standard, Long or Marathon) and whether it should be hunted (Quiet or Hunted).\">\n\t<figcaption>Pick a pace and a mode.<\/figcaption>\n<\/figure>\n\n<p>The default mode, <strong>Hunted<\/strong>, adds monsters that raid the haystack. If they eat too much hay\u2026 the hole gets angry.<\/p>\n\n<p>But you can also play in <strong>Quiet<\/strong> mode if you&#8217;d only like to play the management side of the game. There are no raids, no towers and no monsters. It even works as a passive idle game you leave running on a second screen, especially on a Marathon field.<\/p>\n\n<p>You also choose how long a field should take: <strong>Brief<\/strong> (about an hour), <strong>Standard<\/strong> (about two), <strong>Long<\/strong> (about four) or <strong>Marathon<\/strong> (about eight). Prices and pacing scale to fit, and the game keeps your best time for each.<\/p>\n\n<h2>The slow corruption<\/h2>\n\n<p>This is the part I&#8217;m proudest of, and the game never mentions it.<\/p>\n\n<p>The field starts in a warm, endless dusk. As you feed the hole, it changes. The warmth drains out. The birds stop coming. The grass starts leaning toward the hole. Crows appear on the field and never, ever move. The light turns cold and cyan, and rings surface under the stack. Near the end, the stack loses its shadow and the hole starts casting one.<\/p>\n\n<p>Drag the slider to see the same factory as the hay goes in.<\/p>\n\n<div class=\"hay_corruption\" data-hay-corruption=\"\">\n\t<figure class=\"hay_stage\">\n\t\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-corruption-300000.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"The factory in warm amber dusk light, 300 thousand hay fed.\">\n\t\t<figcaption>300,000 fed<\/figcaption>\n\t<\/figure>\n\t<figure class=\"hay_stage\">\n\t\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-corruption-3000000.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"The same factory at 3 million hay fed, slightly cooler.\">\n\t\t<figcaption>3,000,000 fed<\/figcaption>\n\t<\/figure>\n\t<figure class=\"hay_stage\">\n\t\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-corruption-6000000.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"At 6 million hay fed the colours are washed out and a faint ring circles the hole.\">\n\t\t<figcaption>6,000,000 fed<\/figcaption>\n\t<\/figure>\n\t<figure class=\"hay_stage\">\n\t\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-corruption-9000000.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"At 9 million hay fed the stack has shrunk and turned pale, and the field is cold blue-grey.\">\n\t\t<figcaption>9,000,000 fed<\/figcaption>\n\t<\/figure>\n\t<figure class=\"hay_stage\">\n\t\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-corruption-11600000.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"At 11.6 million hay fed the field is dark, concentric rings are carved around the stack and the hole, and the hole casts a shadow toward the stack.\">\n\t\t<figcaption>11,600,000 fed<\/figcaption>\n\t<\/figure>\n<\/div>\n\n<p>Every so often a line of text appears at the bottom of the screen, too. They&#8217;re not hints, and they get darker the more you feed.<\/p>\n\n<h2>The raids<\/h2>\n\n<p>On a Hunted field, the hole isn&#8217;t the only thing that&#8217;s hungry.<\/p>\n\n<p>Once you&#8217;ve fed your first hundred thousand hay, the raids begin. They come on a clock whether you&#8217;re ready or not, about eighteen of them in a Standard game, and every hay milestone makes them stronger.<\/p>\n\n<h3>The warning<\/h3>\n\n<p>You get about a minute&#8217;s notice, and the game uses all of it. A red line appears (&#8220;something in the far grass&#8221;). An arrow points to where they&#8217;re coming from, and an arc lights up on that side of the stack. A bank of mist rolls in at that edge, the crows burst up from it, the grass ripples, and a chittering sound comes from that side of your speakers.<\/p>\n\n<figure class=\"hay_figure hay_wide\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-raid-early-warning.webp\" width=\"1280\" height=\"800\" loading=\"lazy\" alt=\"A raid warning: a red message reading 'something in the far grass', a red arrow at the bottom of the screen, a red arc on the stack's lower edge and mist along the bottom of the field.\">\n\t<figcaption>A raid on its way from the south: the omen, the arrow, the arc on the stack and the mist.<\/figcaption>\n<\/figure>\n\n<h3>They eat the haystack<\/h3>\n\n<p>The monsters don&#8217;t attack you or your machines. They go straight for the stack and eat until their bellies are full, then walk home. Whatever they eat is gone for good, and killing a monster gives nothing back. The HUD tallies it in red as it happens.<\/p>\n\n<p>Eaten hay comes out of the same three-million spare as burned hay, so every raid that gets through leaves you less room to burn hay for power.<\/p>\n\n<p>Their pathing is where the Desktop Defence love shows up. Monsters take the shortest route to an <em>open<\/em> spot on the stack, and spread around it rather than queueing. Machines and stones block them, but belts don&#8217;t, so your factory shapes the battlefield. If you build something in their way, they find a new route. The one thing you can&#8217;t do is wall the stack off completely.<\/p>\n\n<figure class=\"hay_figure\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-raid-early-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-raid-early.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-raid-early.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>An early raid. A Salt Sprinkler and a Weathervane Rooster thin them out, but a few reach the stack and start eating.<\/figcaption>\n<\/figure>\n\n<h3>They change as you feed the hole<\/h3>\n\n<p>Early monsters are barely there: a dither of shadow and two cyan eyes. As the hole is fed and the field corrupts, they solidify. By the last raids they have flesh, mouths, sickles and far too many eyes. Like everything else, this is never announced.<\/p>\n\n<figure class=\"hay_figure hay_wide\">\n\t<img decoding=\"async\" src=\"\/hdpress\/storage\/2026\/10\/haystack-monsters-compare.webp\" width=\"1208\" height=\"440\" loading=\"lazy\" alt=\"Two close-ups side by side. Left: early monsters as dithered black shadows with cyan eyes, eating at the edge of the stack. Right: late Gleaners with purple flesh, sickles and teeth.\">\n\t<figcaption>Monsters in an early raid (left) and a late one (right).<\/figcaption>\n<\/figure>\n\n<p>There are several kinds. <strong>Chaff<\/strong> are fast swarms with small bellies. <strong>Gleaners<\/strong> are tall and slow with huge bellies, and they&#8217;re the ones you can&#8217;t let through. <strong>Moths<\/strong> fly straight over your walls. <strong>Burrowers<\/strong> come up through the carvings beside the stack. <strong>Leeches<\/strong> ignore the hay and latch onto your generators, drinking their fuel and cutting your power until a tower kills them. And the final raid brings something much bigger.<\/p>\n\n<h3>The towers<\/h3>\n\n<p>Towers are bought from the ledger, and every one has to stand on a rock. There are rocks scattered around the field, and you can buy more. Towers fire on power, so the factory that feeds the hole is also what keeps the defence running.<\/p>\n\n<ul class=\"hay_towers\">\n\t<li><strong>Salt Sprinkler.<\/strong> A brass sprinkler on a drum of salt. It sweeps back and forth, and each pellet hits the first monster in line.<\/li>\n\t<li><strong>Tesla Scarecrow.<\/strong> Lightning that jumps between up to three monsters.<\/li>\n\t<li><strong>Weathervane Rooster.<\/strong> A personal favourite. Its crow is a flash of dawn light that hurts everything around it, and it&#8217;s strongest while the monsters are still made of shadow.<\/li>\n\t<li><strong>Pest Sprayer.<\/strong> A poison cloud that melts the small ones. The big ones barely notice.<\/li>\n\t<li><strong>Pitchfork Ballista.<\/strong> A giant pitchfork fired at the biggest thing in range, pinning it in place.<\/li>\n\t<li><strong>Horseshoe Arch.<\/strong> Doesn&#8217;t attack at all. It makes the towers near it hit harder and faster.<\/li>\n\t<li><strong>Silo Mortar.<\/strong> Long-range shells lobbed into the thickest part of the crowd.<\/li>\n\t<li><strong>Ward Stone.<\/strong> A continuous beam of the hole&#8217;s own cyan light. It costs $4 million, and each one after that costs double.<\/li>\n<\/ul>\n\n<figure class=\"hay_figure\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-raid-late-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-raid-late.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-raid-late.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>A late raid from three sides. Gleaners and Moths come in against a Silo Mortar and a Pest Sprayer&#8217;s clouds.<\/figcaption>\n<\/figure>\n\n<h3>When the field is lost<\/h3>\n\n<p>If the monsters eat enough that twelve million can no longer be reached, the dusk finally ends.<\/p>\n\n<figure class=\"hay_figure\">\n\t<video class=\"hay_video\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" controls=\"\" width=\"1280\" height=\"800\" poster=\"\/hdpress\/storage\/2026\/10\/haystack-night-poster.webp\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-night.webm\" type=\"video\/webm\">\n\t\t<source src=\"\/hdpress\/storage\/2026\/10\/haystack-night.mp4\" type=\"video\/mp4\">\n\t<\/video>\n\t<figcaption>Night falls. The light drains away, and then there are only eyes.<\/figcaption>\n<\/figure>\n\n<p>Winning has its own ending. I won&#8217;t spoil that one (but it&#8217;s especially cool).<\/p>\n\n<h2>How it&#8217;s built<\/h2>\n\n<p>For the curious: The Haystack is plain HTML, CSS and JavaScript, with no framework, no build step and no dependencies.<\/p>\n\n<ul>\n\t<li><strong>No image or audio files.<\/strong> Every sprite is drawn in code from small palettes, which is how the whole field can recolour as it corrupts. Every sound, from the hole&#8217;s drone to the wind and the chittering, is made live with the Web Audio API.<\/li>\n\t<li><strong>Installable.<\/strong> It can be installed like an app, and it plays offline.<\/li>\n<\/ul>\n\n<h2>Try it<\/h2>\n\n<p>The Haystack is free and runs in any modern browser, on a computer or a phone. Your progress saves automatically.<\/p>\n\n<p>If it&#8217;s your first time, start a <strong>Standard<\/strong> field on <strong>Hunted<\/strong>. If you&#8217;d rather just build, pick <strong>Quiet<\/strong> and a long pace, and let it run beside you while you work.<\/p>\n\n<p class=\"hay_play\"><a class=\"hay_button\" href=\"https:\/\/harmonicdesign.ca\/hay\">Feed the hole<\/a><\/p>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A free browser game about feeding fifteen million hay to a hole in a field. Build a factory to pay for the towers, and keep the monsters off the stack.<\/p>\n","protected":false},"author":1,"featured_media":1127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89],"tags":[],"class_list":["post-1126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product"],"_links":{"self":[{"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/posts\/1126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/comments?post=1126"}],"version-history":[{"count":13,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/posts\/1126\/revisions"}],"predecessor-version":[{"id":1140,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/posts\/1126\/revisions\/1140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/media\/1127"}],"wp:attachment":[{"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/media?parent=1126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/categories?post=1126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/harmonicdesign.ca\/hdapi\/wp\/v2\/tags?post=1126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}