<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jason Guo</title>
    <description>The latest articles on DEV Community by Jason Guo (@jasonguo).</description>
    <link>https://dev.to/jasonguo</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3428797%2Fd645b7cf-ad0f-4d03-9fe1-ef243ee8d217.png</url>
      <title>DEV Community: Jason Guo</title>
      <link>https://dev.to/jasonguo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jasonguo"/>
    <language>en</language>
    <item>
      <title>I Built a WWII-Inspired Tower Defense Game in HTML5. The Hard Part Wasn't the Towers</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Mon, 04 May 2026 15:37:16 +0000</pubDate>
      <link>https://dev.to/jasonguo/i-built-a-wwii-inspired-tower-defense-game-in-html5-the-hard-part-wasnt-the-towers-49pa</link>
      <guid>https://dev.to/jasonguo/i-built-a-wwii-inspired-tower-defense-game-in-html5-the-hard-part-wasnt-the-towers-49pa</guid>
      <description>&lt;p&gt;I recently shipped the beta version of Allied Frontline Defense, a WWII-inspired tower defense game built for the browser.&lt;/p&gt;

&lt;p&gt;You can play it here:&lt;/p&gt;

&lt;p&gt;👉 Play the beta: &lt;br&gt;
&lt;a href="https://instantgames.top/games/allied-frontline-defense/" rel="noopener noreferrer"&gt;https://instantgames.top/games/allied-frontline-defense/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And I wrote a full dev-log series here:&lt;/p&gt;

&lt;p&gt;👉 Read the full development story: &lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/building-allied-frontline-defense-wwii-tower-defense-html5.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/building-allied-frontline-defense-wwii-tower-defense-html5.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This post is the short version: what looked like a simple tower defense project turned into a surprisingly useful lesson in game readability, map truth, AI-assisted art, and browser-game polish.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7tnmmjjfs6an2i58fxoz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7tnmmjjfs6an2i58fxoz.png" alt=" " width="800" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Allied Frontline Defense beta gameplay&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The pitch was simple&lt;/strong&gt;&lt;br&gt;
The original idea was direct: build a WWII-style tower defense game and add it to the site.&lt;/p&gt;

&lt;p&gt;The first version had the expected pieces:&lt;/p&gt;

&lt;p&gt;a battlefield map&lt;br&gt;
dirt roads&lt;br&gt;
infantry, trucks, tanks, and aircraft&lt;br&gt;
machine gun nests&lt;br&gt;
anti-tank guns&lt;br&gt;
artillery&lt;br&gt;
anti-air defenses&lt;br&gt;
waves, upgrades, selling, and victory/loss states&lt;br&gt;
On paper, that sounds like the game.&lt;/p&gt;

&lt;p&gt;In practice, it was only the beginning.&lt;/p&gt;

&lt;p&gt;A tower defense game is not judged only by whether enemies move and towers deal damage. The player has to believe the battlefield. They need to know where enemies enter, where they travel, where towers can be built, why a tower fires, why a plane is dangerous, and why a wave was lost.&lt;/p&gt;

&lt;p&gt;That meant the real work was not just "add more content."&lt;/p&gt;

&lt;p&gt;The real work was making the screen honest.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem 1: the road must tell the truth&lt;/strong&gt;&lt;br&gt;
The biggest early issue was enemy path alignment.&lt;/p&gt;

&lt;p&gt;The map had a visible dirt road. The enemies had an actual movement path. Those two things were close, but not identical.&lt;/p&gt;

&lt;p&gt;That small difference was enough to make the whole game feel wrong.&lt;/p&gt;

&lt;p&gt;Sometimes vehicles looked like they were cutting across grass. Sometimes the entrance did not match the bunker doorway. Sometimes tanks crossed near the bridge, but not quite on the bridge deck.&lt;/p&gt;

&lt;p&gt;In a tower defense game, the road is not decoration. It is a promise.&lt;/p&gt;

&lt;p&gt;If the road says "enemies will travel here," then enemies need to travel there.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9gsdifn4tm70o4dspjht.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9gsdifn4tm70o4dspjht.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I wrote a deeper article about this specific problem here:&lt;/p&gt;

&lt;p&gt;👉 Fixing Tower Defense Road Alignment in an HTML5 Canvas Game&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/tower-defense-road-alignment-html5-canvas.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/tower-defense-road-alignment-html5-canvas.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tanks crossing the aligned bridge route&lt;/p&gt;

&lt;p&gt;The eventual lesson was simple: the route should be a source of truth, not a guess layered over a finished background image.&lt;/p&gt;

&lt;p&gt;For newer maps, I moved toward drawing the road from the same route data that enemies follow. That way, the visible road and actual enemy movement cannot drift apart.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem 2: towers need to aim visibly&lt;/strong&gt;&lt;br&gt;
The next issue was weapon direction.&lt;/p&gt;

&lt;p&gt;The MG Nest and other towers could technically attack enemies, but early visuals made the barrel look like it was not following the target.&lt;/p&gt;

&lt;p&gt;That immediately breaks player trust.&lt;/p&gt;

&lt;p&gt;In tower defense, a tower is a tiny machine for communicating intent:&lt;/p&gt;

&lt;p&gt;the turret turns&lt;br&gt;
the muzzle flashes&lt;br&gt;
the projectile leaves from the barrel&lt;br&gt;
the enemy reacts&lt;br&gt;
If those signals disagree, the player notices.&lt;/p&gt;

&lt;p&gt;So the towers had to be redesigned. The battlefield versions became lower-profile, more grounded, and more directional. The weapon barrel, projectile origin, and muzzle flash all needed to point at the same target.&lt;/p&gt;

&lt;p&gt;I also had to separate "art that looks good as an icon" from "art that works in live combat." Some AI-generated tower images looked fine in a square panel but felt too upright or too side-on when placed on the map.&lt;/p&gt;

&lt;p&gt;The full tower-design breakdown is here:&lt;/p&gt;

&lt;p&gt;👉 Designing WWII-Inspired Towers for a Browser Tower Defense Game&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/wwii-tower-defense-weapon-design-html5-game.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/wwii-tower-defense-weapon-design-html5-game.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz7w0iyrg0b15pyzx9jr1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz7w0iyrg0b15pyzx9jr1.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem 3: aircraft should not behave like ground enemies&lt;/strong&gt;&lt;br&gt;
Aircraft were another surprisingly tricky part.&lt;/p&gt;

&lt;p&gt;The first air units felt too rigid. They were basically following predictable paths above the battlefield. Later, I made routes freer, but then some planes felt shaky or visually awkward.&lt;/p&gt;

&lt;p&gt;The final direction was a hybrid:&lt;/p&gt;

&lt;p&gt;keep the generated aircraft visual because it looked better&lt;br&gt;
give each aircraft a freer route across the map&lt;br&gt;
smooth the banking motion&lt;br&gt;
separate the plane body from its ground shadow&lt;br&gt;
make sure aircraft do not appear to fly backward or upside down&lt;br&gt;
Aircraft needed their own movement language. They should not feel like tanks with a vertical offset.&lt;/p&gt;

&lt;p&gt;This became part of a larger enemy-design pass. The game grew from simple infantry, trucks, tanks, and planes into a broader roster with scout cars, heavy tanks, bombers, storm infantry, half-tracks, assault guns, and fighter aces.&lt;/p&gt;

&lt;p&gt;Some enemies now also fire back at towers.&lt;/p&gt;

&lt;p&gt;That changed the game a lot. Towers are no longer permanent objects that only attack. They can be damaged, disabled, and repaired.&lt;/p&gt;

&lt;p&gt;The enemy-design article is here:&lt;/p&gt;

&lt;p&gt;👉 Creating Smarter Enemy Waves, Aircraft Routes, and Counter-Fire&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/tower-defense-enemy-design-aircraft-counter-fire.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/tower-defense-enemy-design-aircraft-counter-fire.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmw2h9tedllyja4y07ct5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmw2h9tedllyja4y07ct5.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problem 4: the map needed layers&lt;/strong&gt;&lt;br&gt;
The best long-term map solution was to stop treating the battlefield as one finished picture.&lt;/p&gt;

&lt;p&gt;Instead, I moved toward a layered map model:&lt;/p&gt;

&lt;p&gt;Base art: the terrain, mood, lighting, cliffs, trees, snow, coast, ruins&lt;br&gt;
Road layer: drawn from the actual enemy route&lt;br&gt;
Tower pad layer: buildable positions authored separately from the road&lt;br&gt;
Airspace layer: visual support for freer aircraft movement&lt;br&gt;
Gameplay layer: towers, enemies, projectiles, explosions, smoke, and UI feedback&lt;br&gt;
This made the maps easier to expand and easier to trust.&lt;/p&gt;

&lt;p&gt;It also solved the route mismatch problem in a cleaner way. If the road is drawn from the route, enemies and roads stay synchronized.&lt;/p&gt;

&lt;p&gt;The full map article is here:&lt;/p&gt;

&lt;p&gt;👉 Layered Map Design for a Better HTML5 Tower Defense Game&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/layered-map-design-html5-tower-defense.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/layered-map-design-html5-tower-defense.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi7obtrslmn924rs0gslo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi7obtrslmn924rs0gslo.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What the beta includes now&lt;/strong&gt;&lt;br&gt;
The current beta has:&lt;/p&gt;

&lt;p&gt;four maps&lt;br&gt;
three missions&lt;br&gt;
twelve waves per mission&lt;br&gt;
six buildable tower types&lt;br&gt;
ground and air enemies&lt;br&gt;
enemy counter-fire&lt;br&gt;
tower damage and repair&lt;br&gt;
smoke/fire effects for damaged enemies&lt;br&gt;
improved battlefield audio&lt;br&gt;
route-aligned roads&lt;br&gt;
a compact command panel&lt;br&gt;
dev-log documentation for the full process&lt;br&gt;
It is still a beta, but it now feels like a real game system rather than a prototype sketch.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The biggest lesson&lt;/strong&gt;&lt;br&gt;
The biggest lesson from building this game was not about HTML5 Canvas, AI art, or tower defense formulas.&lt;/p&gt;

&lt;p&gt;It was about readability.&lt;/p&gt;

&lt;p&gt;Players can forgive a beta if it is honest.&lt;/p&gt;

&lt;p&gt;They are much less forgiving when:&lt;/p&gt;

&lt;p&gt;the road lies&lt;br&gt;
a tower fires in the wrong direction&lt;br&gt;
a plane looks like it is glued to the ground&lt;br&gt;
a build pad appears on the enemy path&lt;br&gt;
an explosion shows a square image boundary&lt;br&gt;
the control panel hides the button they need&lt;br&gt;
Those problems are not just bugs. They are broken communication between the game and the player.&lt;/p&gt;

&lt;p&gt;Once I started treating every screenshot as design evidence, the game improved much faster.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Read the full dev-log series&lt;/strong&gt;&lt;br&gt;
I published the longer development write-up on the InstantGames dev-log:&lt;/p&gt;

&lt;p&gt;👉 Start with the main article:&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/building-allied-frontline-defense-wwii-tower-defense-html5.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/building-allied-frontline-defense-wwii-tower-defense-html5.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then continue with the focused case studies:&lt;/p&gt;

&lt;p&gt;Road alignment: &lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/tower-defense-road-alignment-html5-canvas.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/tower-defense-road-alignment-html5-canvas.html&lt;/a&gt;&lt;br&gt;
Weapon design: &lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/wwii-tower-defense-weapon-design-html5-game.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/wwii-tower-defense-weapon-design-html5-game.html&lt;/a&gt;&lt;br&gt;
Enemy waves and aircraft: &lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/tower-defense-enemy-design-aircraft-counter-fire.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/tower-defense-enemy-design-aircraft-counter-fire.html&lt;/a&gt;&lt;br&gt;
Layered maps: &lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/layered-map-design-html5-tower-defense.html" rel="noopener noreferrer"&gt;https://instantgames.top/blog/posts/layered-map-design-html5-tower-defense.html&lt;/a&gt;&lt;br&gt;
And if you want to try the beta:&lt;/p&gt;

&lt;p&gt;🎮 Play Allied Frontline Defense:&lt;br&gt;
&lt;a href="https://instantgames.top/games/allied-frontline-defense/" rel="noopener noreferrer"&gt;https://instantgames.top/games/allied-frontline-defense/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>indiegame</category>
    </item>
    <item>
      <title>Building a Cinematic 3D F-16 Takeoff Simulation Entirely in the Browser
When we think of 3D flight simulations, we usually picture heavy game engines like Unreal or Unity. 
https://best-games.io/blog/building-a-cinematic-3d-f-16-takeoff-simulation-entirely</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Sat, 04 Apr 2026 08:57:44 +0000</pubDate>
      <link>https://dev.to/jasonguo/building-a-cinematic-3d-f-16-takeoff-simulation-entirely-in-the-browser-when-we-think-of-3d-flight-2oll</link>
      <guid>https://dev.to/jasonguo/building-a-cinematic-3d-f-16-takeoff-simulation-entirely-in-the-browser-when-we-think-of-3d-flight-2oll</guid>
      <description>&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://best-games.io/blog/building-a-cinematic-3d-f-16-takeoff-simulation-entirely" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Fbestgames-og.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://best-games.io/blog/building-a-cinematic-3d-f-16-takeoff-simulation-entirely" rel="noopener noreferrer" class="c-link"&gt;
            Best-Games.io - Play 200+ Free Online Games Instantly | No Download
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Play 200+ free online games instantly! Snake, Mahjong, 8 Ball Pool, racing, puzzle &amp;amp; action games. No download - play in browser.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Ficons%2Ficon.svg" width="512" height="512"&gt;
          best-games.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>I Built a Game Site with an iframe — Someone Hit a 210-Second World Record on It</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Tue, 31 Mar 2026 16:25:40 +0000</pubDate>
      <link>https://dev.to/jasonguo/i-built-a-game-site-with-an-iframe-someone-hit-a-210-second-world-record-on-it-4mjl</link>
      <guid>https://dev.to/jasonguo/i-built-a-game-site-with-an-iframe-someone-hit-a-210-second-world-record-on-it-4mjl</guid>
      <description>&lt;p&gt;I'm not a game developer. I'm a Web developer addicted to side projects, and one afternoon I had a thought: instead of spending months building a game from scratch, what if I did something faster to validate the idea first — &lt;strong&gt;curate great games and build a genuinely useful game portal around them?​&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's how &lt;a href="https://taproad-game.com" rel="noopener noreferrer"&gt;taproad-game.com&lt;/a&gt; was born. The technical core is an iframe, but there's a lot built around it. This post is about the rabbit holes I fell into, the lessons I picked up, and why an "iframe site" can actually retain real users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Tap Road?​&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before deciding which game to build around, I did a round of keyword research. Tap Road is an HTML5 endless runner developed by AzGames.io — a glowing ball rolls down a neon-lit highway, and players tap or click to switch lanes, dodge obstacles, and collect gems.&lt;/p&gt;

&lt;p&gt;The numbers caught my eye immediately: &lt;strong&gt;7 million+ plays, a 4.2/5 rating, and nearly 11,000 reviews.&lt;/strong&gt;​ This wasn't some obscure indie experiment — it was a market-validated product with a real player base.&lt;/p&gt;

&lt;p&gt;More importantly, the gameplay is dead simple — &lt;strong&gt;one tap, zero learning curve.&lt;/strong&gt;​ That means anyone who lands on the site can pick it up within 5 seconds, with no onboarding copy needed from me. For a traffic-funnel game site, that's the ideal anchor game.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why the Game Actually Retains Players&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before building the site, I spent a serious amount of time studying what makes Tap Road work, because I needed to genuinely understand why it's fun before I could write content that would keep visitors around.&lt;/p&gt;

&lt;p&gt;The answer lies in its &lt;strong&gt;gem economy&lt;/strong&gt;.​ There are three gem tiers: common blue gems, purple gems worth 3x, and golden gems worth 10x. The golden gems are always placed in the most dangerous spots — you can go for them, but you'll probably die trying. This design turns every run into a series of micro-decisions: take the risk or play it safe? That tension creates the "just one more game" compulsion, rather than a pure reflex challenge.&lt;/p&gt;

&lt;p&gt;Gems are spent in the shop on 30+ ball skins, trail effects, and track themes. The game also has a hidden skin system — the &lt;strong&gt;Ghost Ball&lt;/strong&gt; requires dying 100 times total, the &lt;strong&gt;Rainbow Ball&lt;/strong&gt; requires playing 50 games in a single day, and the &lt;strong&gt;Supernova Ball&lt;/strong&gt; requires collecting 10,000 lifetime gems. These mechanics convert short-term "one more run" impulses into long-term return visit motivation.&lt;/p&gt;

&lt;p&gt;The speed system is worth noting too. The game ramps up at three thresholds: 30 seconds, 60 seconds, and 90 seconds. The 10-second window after each speed bump is the most dangerous — top players' strategy is to completely stop chasing gems during that window, focus purely on survival, and only reintroduce gem collection once their hands and eyes have adjusted to the new tempo.&lt;/p&gt;

&lt;p&gt;The community-verified world record currently stands at &lt;strong&gt;210 seconds&lt;/strong&gt;, held by a player known as "NeonRunner" with a full gameplay recording as proof. That number sounds modest until you experience the blistering speed the game reaches past 90 seconds — every tap has to be frame-perfect.&lt;/p&gt;

&lt;p&gt;You can try it yourself at &lt;a href="https://taproad-game.com" rel="noopener noreferrer"&gt;taproad-game.com&lt;/a&gt; — no download, no signup, runs instantly in any browser.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Real Challenge of an iframe Site Isn't Technical&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Embedding the game took me under an hour. What actually took time was &lt;strong&gt;building a valuable content layer around the iframe&lt;/strong&gt;.​&lt;/p&gt;

&lt;p&gt;A page that's just an iframe offers no additional value to users and is essentially invisible to search engines. The core question I needed to answer was: why would a player come to my site instead of going directly to the original?&lt;/p&gt;

&lt;p&gt;My answer was: &lt;strong&gt;become the best information hub for the game&lt;/strong&gt;.​&lt;/p&gt;

&lt;p&gt;That meant genuinely researching the game and writing substantive guides — not "click to switch lanes" filler, but verified tips like "stop chasing gems for the first 10 seconds after the 90-second speed increase." It meant cataloguing the hidden skin unlock conditions, gathering world record discussions from the community, and explaining the underlying logic of the gem economy.&lt;/p&gt;

&lt;p&gt;Once the content was in place, the site's bounce rate dropped noticeably. Users were spending more time on the page because they were reading guides and checking unlock conditions before and after playing — the content and the game were feeding each other.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The "Unblocked" Audience: An Underrated Niche&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The most surprising traffic source after launch was users searching ​&lt;strong&gt;"tap road unblocked."​&lt;/strong&gt; School and workplace networks block a huge number of gaming sites, and students and office workers are exactly the core demographic for quick browser games during downtime.&lt;/p&gt;

&lt;p&gt;I specifically optimized the site's technical setup for this — clean HTTPS, a domain with no history of being flagged by content filters — and wrote a dedicated &lt;a href="https://taproad-game.com/tap-road-unblocked" rel="noopener noreferrer"&gt;access guide page&lt;/a&gt;. This segment now accounts for a meaningful share of traffic, and the user quality is high because they arrive with clear intent.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I Actually Learned&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Going in, I assumed an iframe site was a "low-effort" project I could set up and walk away from. The reality is that a low technical barrier means the competitive moat is entirely in content and execution.​ Anyone can replicate my technical setup in an hour. Nobody can replicate the guide content and community data I've compiled in an hour.&lt;/p&gt;

&lt;p&gt;The other lesson was about product selection logic. Building a site around a game with 7 million verified plays is a fundamentally different risk profile than building around a game that just launched. The former is distribution on top of validated demand. The latter is a bet that demand exists at all. For an indie developer, the former has a dramatically higher success rate.&lt;/p&gt;

&lt;p&gt;Finally, the &lt;strong&gt;"zero friction" nature of browser games is a real distribution advantage&lt;/strong&gt;.​ Under 2 seconds from link-click to gameplay — no platform that requires a download or account creation can match that. If you're considering any game-adjacent project, HTML5 browser games are a seriously underrated space.&lt;/p&gt;

&lt;p&gt;If you have thoughts on SEO strategy, content architecture, or monetization for game aggregator sites, I'd love to hear them in the comments. I'm also curious: &lt;strong&gt;what's the most "technically simple but operationally complex" side project you've ever shipped?​&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>gamedev</category>
      <category>java</category>
      <category>sideprojects</category>
    </item>
    <item>
      <title>Shipping a game in 2026? Easier than ever.
Getting noticed? Brutally hard.
The teams breaking through don't just build better — they think like publishers.
Full breakdown 
https://best-games.io/articles/2026-03-30-indie-game-development-brief-march-2026</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Mon, 30 Mar 2026 07:44:16 +0000</pubDate>
      <link>https://dev.to/jasonguo/shipping-a-game-in-2026-easier-than-ever-getting-noticed-brutally-hard-the-teams-breaking-5dm</link>
      <guid>https://dev.to/jasonguo/shipping-a-game-in-2026-easier-than-ever-getting-noticed-brutally-hard-the-teams-breaking-5dm</guid>
      <description>&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://best-games.io/articles/2026-03-30-indie-game-development-brief-march-2026" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Fbestgames-og.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://best-games.io/articles/2026-03-30-indie-game-development-brief-march-2026" rel="noopener noreferrer" class="c-link"&gt;
            Best-Games.io - Play 200+ Free Online Games Instantly | No Download
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Play 200+ free online games instantly! Snake, Mahjong, 8 Ball Pool, racing, puzzle &amp;amp; action games. No download - play in browser.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Ficons%2Ficon.svg" width="512" height="512"&gt;
          best-games.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>The game industry in March 2026: record Quest usage, Xbox showcases, 3M Crimson Desert sales — and mass layoffs. Demand didn't disappear. It just stopped protecting jobs.
New piece on why player spending and employment stability have officially decoupled.</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Fri, 27 Mar 2026 10:13:22 +0000</pubDate>
      <link>https://dev.to/jasonguo/the-game-industry-in-march-2026-record-quest-usage-xbox-showcases-3m-crimson-desert-sales-and-2kpd</link>
      <guid>https://dev.to/jasonguo/the-game-industry-in-march-2026-record-quest-usage-xbox-showcases-3m-crimson-desert-sales-and-2kpd</guid>
      <description></description>
    </item>
    <item>
      <title>I Built a Pixel Art Roguelite in Vanilla JS — Here Are 6 Things That Broke (And What I Learned)</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Mon, 23 Mar 2026 15:00:39 +0000</pubDate>
      <link>https://dev.to/jasonguo/i-built-a-pixel-art-roguelite-in-vanilla-js-here-are-6-things-that-broke-and-what-i-learned-3gb0</link>
      <guid>https://dev.to/jasonguo/i-built-a-pixel-art-roguelite-in-vanilla-js-here-are-6-things-that-broke-and-what-i-learned-3gb0</guid>
      <description>&lt;p&gt;Full article:&lt;br&gt;
&lt;a href="https://instantgames.top/blog/posts/pixel-dungeon-dev-log-building-roguelite-crawler-with-ai.html" rel="noopener noreferrer"&gt;Pixel dungeon dev log&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I spent the last few weeks building a roguelite dungeon crawler using nothing but vanilla JavaScript and HTML5 Canvas. No React. No Phaser. No build tools. Just 6 JS files, a 16×16 pixel art tileset, and a growing list of bugs I didn't see coming.&lt;/p&gt;

&lt;p&gt;The game has procedural dungeon generation, 5+ enemy types with AI state machines, a full camp system with crafting stations, procedural Web Audio music, and an equipment/inventory system. It runs from a single HTML file.&lt;/p&gt;

&lt;p&gt;Here's what actually went wrong — and the fixes that made the biggest difference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. The Enemy That Disappeared When You Got Close&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The most absurd bug I encountered: enemies became invisible when the player walked toward them.&lt;/p&gt;

&lt;p&gt;The cause? State transitions. When an enemy switches from patrol to chase (triggered by proximity), there's a window of 2-3 frames where the state variable updates but the sprite reference hasn't resolved yet. Canvas drawImage() with an undefined source doesn't throw an error — it just silently draws nothing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftjcfdc2jpign6khktnsn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftjcfdc2jpign6khktnsn.png" alt=" " width="800" height="133"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Takeaway: Canvas fails silently. Unlike DOM rendering, you get zero feedback when drawImage receives bad input. Defensive fallback chains are mandatory.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Players Couldn't Figure Out the Camp&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;After clearing floor 1, players enter a camp with 9 interactive stations — bonfire, workbench, anvil, furnace, alchemy table, etc. I thought it was self-explanatory.&lt;/p&gt;

&lt;p&gt;The first person who played it immediately asked: "What is this? What am I supposed to do?"&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F29nt36be937ri4hhxrkh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F29nt36be937ri4hhxrkh.png" alt=" " width="642" height="642"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The problem: in 16×16 pixel art, a bonfire is ~12 pixels of flickering orange. An anvil is a gray blob next to a different gray blob. Without explicit labels, it's all noise.&lt;/p&gt;

&lt;p&gt;The fix was information layering at three distances:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Screen-level: Welcome banner with instructions&lt;/li&gt;
&lt;li&gt;Room-level: Persistent icon + name labels on every station&lt;/li&gt;
&lt;li&gt;Close-up: Pulsing highlight + "[E] to interact" + description&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Takeaway: If you built it, you already know what everything does. That knowledge makes you blind to your own UX problems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. The Canvas Resolution Trap&lt;/strong&gt;&lt;br&gt;
Every Canvas tutorial starts with:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feopg1oz3tv3f01g6wi3r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feopg1oz3tv3f01g6wi3r.png" alt=" " width="800" height="95"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For pixel art, this is a disaster.&lt;/p&gt;

&lt;p&gt;Pixel art requires integer scaling. A 16×16 tile at 1753px window width creates fractional pixel offsets. Sprites shimmer. Grid lines misalign. The whole thing looks "off" in a way players feel but can't articulate.&lt;/p&gt;

&lt;p&gt;The fix is separating internal resolution from display size:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq299fssslso345oihtbo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq299fssslso345oihtbo.png" alt=" " width="800" height="195"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But then there's a follow-up trap: mouse coordinates break. event.offsetX maps to CSS display size, not internal canvas size. Every click-based UI element silently stops working.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F77xfswzs3l9a2auxdwzw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F77xfswzs3l9a2auxdwzw.png" alt=" " width="800" height="186"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And another follow-up: HUD elements using position: fixed anchor to the browser window, not the game canvas. When the canvas is centered with dark borders, the HUD floats off into the corner.&lt;/p&gt;

&lt;p&gt;Solution: wrap everything in a position: relative container, use position: absolute for overlays.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fldvvv2qw91f9ex4kyyuq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fldvvv2qw91f9ex4kyyuq.png" alt=" " width="640" height="641"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Tile Caching is Non-Negotiable&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Early builds re-drew every tile every frame. On a 40×40 map: 1,600 fillRect calls per frame, plus decorations like torches, cracks, and wall details.&lt;/p&gt;

&lt;p&gt;Switching to an off-screen canvas tile cache — render the map once, blit it as a single drawImage — dropped draw calls from 2,000+ to under 200. On mobile, this was the difference between 60fps and slideshow.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Atmosphere is Just Math&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The difference between "atmospheric dungeon" and "I can't see anything" is one float:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp3cokuwyr5bkhd80eil.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp3cokuwyr5bkhd80eil.png" alt=" " width="800" height="149"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Same engine. Same radial gradient. Different emotional experience.&lt;/p&gt;

&lt;p&gt;I also bumped the camp floor tile colors from rgb(68+v) to rgb(95+v) — a +27 shift. The camp instantly felt warmer, cozier, more safe. Atmosphere isn't a vague artistic quality. It's concrete numbers in your rendering pipeline.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Procedural Audio is Underrated&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Zero audio files in the entire project. Every sound — sword slashes, footsteps, healing chimes, background music — is synthesized using the Web Audio API.&lt;/p&gt;

&lt;p&gt;A sword attack is a filtered noise burst. A healing potion is an ascending C-E-G arpeggio. The dungeon BGM is a looping minor pentatonic pattern in square waves.&lt;/p&gt;

&lt;p&gt;The best part: sounds become tunable. Boss hits play at lower frequency. Critical hits add a pitch sweep. Camp music shifts the filter for warmth. Sound becomes data, not static assets.&lt;/p&gt;

&lt;p&gt;The Full Story&lt;br&gt;
This post covers the highlights, but there's a lot more in the full writeup — the procedural dungeon generation algorithm, floor difficulty scaling, the complete camp station system, and how the entire architecture fits in 6 files with zero dependencies.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://instantgames.top/blog/posts/pixel-dungeon-dev-log-building-roguelite-crawler-with-ai.html" rel="noopener noreferrer"&gt;Read the full dev log on InstantGames&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🎮 &lt;a href="https://instantgames.top/lab/pixel-crawler/" rel="noopener noreferrer"&gt;Play the game (browser, no install)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Built with vanilla JavaScript + HTML5 Canvas. No frameworks. No build tools. The whole game is a single HTML file with 6 JS modules. If you're doing something similar, I'd love to hear about it in the comments.&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>javascript</category>
      <category>pixelart</category>
      <category>beginners</category>
    </item>
    <item>
      <title>A developer built 4 complete 3D games in 7 days.</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Wed, 18 Mar 2026 13:50:47 +0000</pubDate>
      <link>https://dev.to/jasonguo/a-developer-built-4-complete-3d-games-in-7-days-41i6</link>
      <guid>https://dev.to/jasonguo/a-developer-built-4-complete-3d-games-in-7-days-41i6</guid>
      <description>&lt;p&gt;A developer built 4 complete 3D games in 7 days.​&lt;br&gt;
Zero lines of code written by hand.&lt;br&gt;
Total cost: ~$20.&lt;br&gt;
Here's how "Vibe Coding" is about to destroy the barrier to game development:&lt;br&gt;
Instead of learning Unity or Unreal for months, you just... talk.&lt;br&gt;
"Make a 3D arena shooter with weapon pickups and enemy AI."&lt;br&gt;
→ AI writes the code&lt;br&gt;
→ AI generates the assets&lt;br&gt;
→ AI debugs the errors&lt;br&gt;
→ You play and give feedback&lt;br&gt;
→ Repeat until done&lt;br&gt;
The stack he used:&lt;br&gt;
🔧 Claude Code (primary) + Codex CLI&lt;br&gt;
🎮 ThreeJS for 3D rendering&lt;br&gt;
🎨 Meshy for AI-generated 3D models&lt;br&gt;
🧪 Playwright for automated testing&lt;br&gt;
In one week: endless runner, tower defense, Mario Party clone, arena shooter.&lt;br&gt;
15,000+ lines of code. All AI-generated.&lt;br&gt;
The full step-by-step guide is here:&lt;br&gt;
👉 &lt;a href="https://best-games.io/game-daily/2026-03-18" rel="noopener noreferrer"&gt;Game Daily&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gamedev</category>
    </item>
    <item>
      <title>AI Daily Report: Foundation Models · Research (Mar 17, 2026)</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Tue, 17 Mar 2026 14:33:58 +0000</pubDate>
      <link>https://dev.to/jasonguo/ai-daily-report-foundation-models-research-mar-17-2026-4bk8</link>
      <guid>https://dev.to/jasonguo/ai-daily-report-foundation-models-research-mar-17-2026-4bk8</guid>
      <description>&lt;p&gt;OpenAI’s GPT-5.4 isn’t just a bigger model; its 32x efficiency gain for reasoning tasks—dropping a complex ARC-AGI-1 task from $11.64 to a mere $0.37—changes the unit economics of autonomy. &lt;/p&gt;

&lt;p&gt;We have moved from 'is this possible?' to 'how many millions of times per day should we do this?' &lt;/p&gt;

&lt;p&gt;This is why NVIDIA is pivoting GTC 2026 toward the 'Agentic Scaling Law.' The bottleneck is no longer raw tokens-per-second; it’s the infrastructure required to manage sub-agent spawning, memory movement, and long-context tool calling. &lt;/p&gt;

&lt;p&gt;If you are building for the chat interface, you are building for 2024. If you are building for the 'NemoClaw' and 'GPU+LPU' supercomputers, you are building for the agentic era.&lt;/p&gt;

&lt;p&gt;Read full article:&lt;br&gt;
&lt;a href="https://windflash.us/daily-report/en/2026-03-17" rel="noopener noreferrer"&gt;https://windflash.us/daily-report/en/2026-03-17&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>I Built a Tower Defense Game With Zero Dependencies — AI Art, Procedural Audio, and ~3,200 Lines of Vanilla JS</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Mon, 16 Mar 2026 12:32:12 +0000</pubDate>
      <link>https://dev.to/jasonguo/i-built-a-tower-defense-game-with-zero-dependencies-ai-art-procedural-audio-and-3200-lines-of-42m1</link>
      <guid>https://dev.to/jasonguo/i-built-a-tower-defense-game-with-zero-dependencies-ai-art-procedural-audio-and-3200-lines-of-42m1</guid>
      <description>&lt;p&gt;No React. No Phaser. No Pixi.js. No npm install. Just &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt;, vanilla JS, and the Web Audio API.&lt;/p&gt;

&lt;p&gt;🎮 &lt;a href="https://instantgames.top/lab/arcane-bastion/" rel="noopener noreferrer"&gt;Play it here&lt;/a&gt; · 📖 &lt;a href="https://instantgames.top/blog/posts/arcane-bastion-dev-log-building-tower-defense-with-ai.html" rel="noopener noreferrer"&gt;Full dev log&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Arcane Bastion is a crystal tower defense game with：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;5 elemental towers（Fire / Ice / Lightning / Vine / Arcane）× 3 upgrade tiers
&lt;/li&gt;
&lt;li&gt;10 enemy types with status effects（freeze, burn, poison）
&lt;/li&gt;
&lt;li&gt;AI‑generated art — every sprite and map background
&lt;/li&gt;
&lt;li&gt;Procedural audio — every sound synthesized from oscillators, zero audio files
&lt;/li&gt;
&lt;li&gt;Dynamic tower rotation — smooth tracking with recoil feedback
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The entire thing is 9 script files loaded via &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags in dependency order. Old school, but it works.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Architecture
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arcane-bastion/
├── js/
│   ├── sprites.js    ← async image loader (18 assets)
│   ├── map.js        ← 20×14 tile grid + AI backgrounds
│   ├── tower.js      ← 5 types, targeting, smooth rotation
│   ├── enemy.js      ← 10 types, waypoint pathfinding
│   ├── projectile.js ← homing missiles, chain lightning
│   ├── audio.js      ← Web Audio synthesis (~400 lines)
│   ├── ui.js         ← HUD, panels, bestiary overlay
│   ├── game.js       ← 60fps loop, wave state machine
│   └── demo-mode.js  ← scripted auto-demo + MediaRecorder
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  The Hardest Bug: Chrome's Autoplay Policy 🔇
&lt;/h2&gt;

&lt;p&gt;This one wasted hours. My audio engine worked perfectly in local testing, but was completely silent on Chrome after deployment.&lt;/p&gt;

&lt;p&gt;Root cause: Creating an &lt;code&gt;AudioContext&lt;/code&gt; before the first user gesture puts it in suspended state — permanently. My &lt;code&gt;Game.init()&lt;/code&gt; was calling &lt;code&gt;AudioEngine.init()&lt;/code&gt; on page load.&lt;/p&gt;

&lt;p&gt;The fix：&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ BAD: Creates AudioContext on page load&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;ctx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;AudioContext&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// suspended forever!&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// ✅ GOOD: Lazy-create on first user interaction&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;init&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;ctx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;AudioContext&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
            &lt;span class="c1"&gt;// now it works because user clicked first&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And crucially — every sound function must call &lt;code&gt;ensureContext()&lt;/code&gt; &lt;strong&gt;before&lt;/strong&gt; the &lt;code&gt;if (!ctx) return&lt;/code&gt; guard, not after. Get the order wrong and the context never gets created.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI Art: Not Plug-and-Play
&lt;/h2&gt;

&lt;p&gt;I generated all 18 visual assets（5 towers, 10 enemies, 3 maps）using AI image generation. Sounds easy, right?&lt;/p&gt;

&lt;p&gt;The reality：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Consistency — Every prompt needed the same style anchor: “dark fantasy, pixel art, top-down, glowing magical effects”
&lt;/li&gt;
&lt;li&gt;Transparency — Early sprites had visible rectangular backgrounds. Each needed manual cleanup
&lt;/li&gt;
&lt;li&gt;Contrast — Sprites that looked great on a white canvas disappeared against dark map backgrounds. Had to add glow auras and brightness boosts
&lt;/li&gt;
&lt;li&gt;Scale — A beautiful 512×512 sprite becomes a blurry 50px blob at game scale
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;AI art saved weeks of illustration work, but the integration “last mile” still required significant manual effort.&lt;/p&gt;

&lt;h2&gt;
  
  
  Procedural Audio: Math → Sound
&lt;/h2&gt;

&lt;p&gt;The most satisfying system to build. Every sound in the game is synthesized from &lt;code&gt;OscillatorNode&lt;/code&gt; waveforms：&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Frost tower attack: crystalline "ping"&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;frostShoot&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;playTone&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.15&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sine&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.12&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;    &lt;span class="c1"&gt;// high shimmer&lt;/span&gt;
    &lt;span class="nf"&gt;playTone&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;800&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;triangle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.08&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;  &lt;span class="c1"&gt;// harmonic&lt;/span&gt;
    &lt;span class="nf"&gt;playNoise&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;0.08&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;                  &lt;span class="c1"&gt;// ice crackle&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Fire, ice, lightning, vine, arcane — each element has a unique audio signature created by combining oscillator types（sine, triangle, sawtooth, square）at different frequencies and durations.&lt;/p&gt;

&lt;p&gt;The background music is a multi‑oscillator ambient drone that evolves over time. The total audio system is ~400 lines — zero bytes of audio assets loaded.&lt;/p&gt;

&lt;h2&gt;
  
  
  Three Changes That Made the Biggest Visual Difference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;AI map backgrounds replacing procedural tiles — went from “programmer art” to “atmospheric”
&lt;/li&gt;
&lt;li&gt;Glow auras on tower sprites（radial gradient circles behind each tower）— instant depth
&lt;/li&gt;
&lt;li&gt;Smooth tower rotation with &lt;code&gt;Math.atan2&lt;/code&gt; + lerp interpolation — made everything feel alive
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;None of these changed gameplay. All of them changed how the game feels.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Stats
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Lines of JS&lt;/td&gt;
&lt;td&gt;~3,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Code modules&lt;/td&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AI-generated assets&lt;/td&gt;
&lt;td&gt;18&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;External dependencies&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Audio files&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Build tools&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;I wrote a much deeper technical breakdown covering grid systems, pathfinding, chain lightning implementation, tower synergies, and how I recorded the demo video with audio using the browser's MediaRecorder API.&lt;/p&gt;

&lt;p&gt;📖 &lt;a href="https://instantgames.top/blog/posts/arcane-bastion-dev-log-building-tower-defense-with-ai.html" rel="noopener noreferrer"&gt;Read the full 3,000+ word dev log&lt;/a&gt; →&lt;/p&gt;

&lt;p&gt;🎮 &lt;a href="https://instantgames.top/lab/arcane-bastion/" rel="noopener noreferrer"&gt;Play Arcane Bastion&lt;/a&gt; →&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Claude just launched Code Review for Claude Code, and I think this is a much bigger signal than a normal feature release.

The next bottleneck in AI coding is no longer writing code.
It’s reviewing code.
https://claude.com/blog/code-review</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Tue, 10 Mar 2026 03:59:23 +0000</pubDate>
      <link>https://dev.to/jasonguo/claude-just-launched-code-review-for-claude-code-and-i-think-this-is-a-much-bigger-signal-than-a-2746</link>
      <guid>https://dev.to/jasonguo/claude-just-launched-code-review-for-claude-code-and-i-think-this-is-a-much-bigger-signal-than-a-2746</guid>
      <description>&lt;p&gt;

&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://claude.com/blog/code-review" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;claude.com&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




</description>
      <category>ai</category>
      <category>codequality</category>
      <category>news</category>
      <category>programming</category>
    </item>
    <item>
      <title>I built a passive income gaming site in 7 days using AI — here's the exact workflow</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Fri, 06 Mar 2026 15:05:51 +0000</pubDate>
      <link>https://dev.to/jasonguo/i-built-a-passive-income-gaming-site-in-7-days-using-ai-heres-the-exact-workflow-59de</link>
      <guid>https://dev.to/jasonguo/i-built-a-passive-income-gaming-site-in-7-days-using-ai-heres-the-exact-workflow-59de</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fps5y2hc5bpe1s6lxp5s2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fps5y2hc5bpe1s6lxp5s2.png" alt=" " width="760" height="429"&gt;&lt;/a&gt;&lt;br&gt;
Last week I sat down with Cursor, a domain registrar, and a very specific niche keyword. Seven days later, the site was live, indexed, and earning its first AdSense impressions.&lt;br&gt;
No team. No boilerplate repo I'd spent weeks perfecting. Just a clear prompt, an AI that could actually build what I described, and a keyword gap that nobody had filled yet.&lt;br&gt;
Here's the part that surprised me most: the hardest part wasn't the code.​ Cursor handled the frontend. Claude Code handled the backend logic. GitHub Copilot filled in the gaps inline. The hard part was the judgment call — picking the right game, the right tool type, and the right search query that sits in that sweet spot of high intent and low competition.&lt;br&gt;
The gaming niche looks saturated on the surface. It isn't. IGN and GameSpot own "best games 2026." Nobody owns "nicheRPGniche RPGnicheRPG damage calculator after patch 4.1." That's where a focused tool site walks in and ranks on page one within weeks.&lt;br&gt;
The monetization side is equally concrete. Gaming sites on AdSense typically earn $3–$10 RPM. At 50k monthly pageviews from US/UK traffic, that's $300–$800/month passively. Hit 50k sessions and you can graduate to Mediavine for another 20–70% on top. It's not "get rich quick" math — it's compounding, predictable, and entirely driven by whether you picked the right keyword in week one.&lt;br&gt;
The full guide covers everything I actually did:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    ul { list-style-type: disc; }
    ul ul { list-style-type: circle; }
    ul ul ul { list-style-type: square; }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;How to choose between Cursor, Claude Code, and GitHub Copilot (and why stacking them beats picking one)&lt;br&gt;
The three-layer keyword research method for finding gaps before competitors do&lt;br&gt;
The 7 most profitable gaming tool site types ranked by traffic ceiling and monetization&lt;br&gt;
A day-by-day 7-day build timeline with exact prompts&lt;br&gt;
The AdSense approval checklist that gaming sites specifically need to pass&lt;/p&gt;

&lt;p&gt;If you've been sitting on a side project idea and waiting for the tooling to catch up — it has.&lt;br&gt;
Read the full guide on &lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://best-games.io/articles/2026-03-06-ai-gaming-tool-site-adsense-2026" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Fbestgames-og.jpg" height="420" class="m-0" width="800"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://best-games.io/articles/2026-03-06-ai-gaming-tool-site-adsense-2026" rel="noopener noreferrer" class="c-link"&gt;
            Best-Games.io - Play 200+ Free Online Games Instantly | No Download
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Play 200+ free online games instantly! Snake, Mahjong, 8 Ball Pool, racing, puzzle &amp;amp; action games. No download - play in browser.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Ficons%2Ficon.svg" width="512" height="512"&gt;
          best-games.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>ai</category>
      <category>gamedev</category>
    </item>
    <item>
      <title>Today, a game site I developed passed the Google AdSense review. After being rejected 4 or 5 times previously, this feels like a small step forward.
https://best-games.io</title>
      <dc:creator>Jason Guo</dc:creator>
      <pubDate>Thu, 05 Feb 2026 14:26:26 +0000</pubDate>
      <link>https://dev.to/jasonguo/today-a-game-site-i-developed-passed-the-google-adsense-review-after-being-rejected-4-or-5-times-4dpk</link>
      <guid>https://dev.to/jasonguo/today-a-game-site-i-developed-passed-the-google-adsense-review-after-being-rejected-4-or-5-times-4dpk</guid>
      <description>&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://best-games.io/" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Fbestgames-og.jpg" height="" class="m-0" width=""&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://best-games.io/" rel="noopener noreferrer" class="c-link"&gt;
            Snake, Mahjong, 8 Ball Pool &amp;amp; More - Best Free Online Games | Best-Games.io
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Play 200+ free online games instantly! Snake, Mahjong, 8 Ball Pool, racing, puzzle &amp;amp; action games. No download - play in browser.
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbest-games.io%2Fimages%2Ficons%2Ficon.svg" width="512" height="512"&gt;
          best-games.io
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
  </channel>
</rss>
