🎓 Monster Truck Game Academy

A real-world case study: how a non-coder shipped a polished browser game in one chat session with AI — from idea to live HTTPS URL.

📅 Built: May 24, 2026 💰 Total AI spend: ~$0.37 ⏱ Session length: ~3 hours 📦 Final size: 12 MB

👋 Read this first

This page documents a real session where the student (a Polish-Canadian entrepreneur in his 40s with multiple businesses, not a coder) asked Claude to build a browser game for his kid. The exact game is live at:

Every chapter below is structured the same way:

  1. What the student asked (exact paste from chat)
  2. Why it matters (the lesson)
  3. What got built (the code/output)
  4. Cost & time

Who this is for: Anyone — kids, adults, beginners, intermediate coders — who wants to understand the modern way to ship software in 2026. You don't need to know how to code to follow along. You need to know how to describe what you want clearly.

📝 Chapter 1 — The Brief

What the student pasted

"under marcinmigdal.com start a new domain called monstertruckgame.marcinmigdal.com this will be a sub domain for a new game were building here is all the info, tell me if u need anyhting, we will be using the exsitign OPENAI keys to create visual assets as you need to, tell me the approx cost of any api usage before u implement..."

"hi, I want to create a video game for a computer to work inside a browser. I want this to be the side profile and I want to use the keyboard keys. To jump over obstacles. So the car is going to be using the arrows to go forward and backwards and then when I press up I wanted to jump. And then when I hold the arrow, I wanted to jump really high until I let go and then it will land. I want him to go over Bridges and I want him to jump over water..."

"And I want you to use the computer Graphics of the computer to make it as realistic as possible. Maybe turn the wheels as well. If you can grab some sound effects when you're jumping swishing for whatever monster trucks are when they're driving forward..."

"...add some sound effects of engine. And and maybe when you have an extra special button. Like press space bar. You will have nitrous and then you will have that extra boost when you go faster. And that's it. So forward backwards up for jump and then space bar so you can have the nitrous when you press nitrous. You should only have five nitrouses and then after 30 seconds. No, after 15 seconds, the nitrous restarts again..."

"...display all these in the video game style at the very top make the icons very very premium looking like a million dollar video game."

Why this brief worked

The lesson

You don't need correct grammar, typos don't matter, structure doesn't matter. What matters: name the platform, the controls, the goal, and the vibe. The AI fills in the rest. Asking for cost estimates BEFORE work begins is professional behavior — do it every time.

🛠 Chapter 2 — Picking the Tech Stack

What got asked

The student didn't pick a stack — the AI did, based on the requirements. Key trade-offs that came up later:

OptionEffortResultCostWhen to use
HTML5 Canvas (2D)LowSmooth 2D, works on every device$0Default for any 2D game
PixiJS (WebGL 2D)MediumSame look + shaders + 60fps on weak phones$02D games needing post-processing (bloom, blur)
Three.js / Babylon.js (3D)HighTrue 3D worlds$0 engine, $50-200 for 3D models via Meshy.aiTrue 3D games where camera angle matters
Phaser, PlayCanvasMediumGame-framework conveniences$0If you want pre-built scene management, input mapping

What we chose

HTML5 Canvas + vanilla JavaScript + no build tools. Why:

The lesson

Pick the simplest tech that can do the job. "Premium" doesn't mean "complex" — premium means polished within its medium. A clean 2D game looks better than a janky 3D one.

🌐 Chapter 3 — Infrastructure (DNS, HTTPS, deploy)

What the student pasted

"so set it / what are you waiting for its simply a subdomain.marcinmigdal.com"

What this taught us

The student didn't know DNS lives at the registrar/DO, not on the web server. Many non-technical founders share this gap. Here's the truth, in 4 lines:

  1. You own a domain (marcinmigdal.com) at a registrar (GoDaddy, Namecheap, etc.)
  2. The registrar points your domain to a nameserver (DigitalOcean's in our case)
  3. At the nameserver you add DNS records — an "A record" says "this name → this IP address"
  4. The web server (Apache on the DigitalOcean droplet) just answers HTTP requests after DNS routes a browser to its IP

The 3-step deploy pattern

  1. DNS: Add A record monstertruckgame.marcinmigdal.com → 138.197.145.209 (via DO panel or API token + 30 second curl)
  2. Apache vhost: Create a config file telling Apache "when someone asks for this hostname, serve files from /var/www/monstertruckgame.marcinmigdal.com/public/"
  3. HTTPS: Run certbot --apache -d monstertruckgame.marcinmigdal.com — Let's Encrypt auto-installs a free cert valid 90 days, auto-renews

Cost

🎨 Chapter 4 — Generating AI Assets

Why we used AI image generation

Hiring an illustrator for a desert background: $50-200 per image, 2-day turnaround. Generating with OpenAI: $0.06, 30 seconds. For prototypes and small games, AI is the unambiguous winner.

The exact prompts that worked

Sky layer (v3): "Lush vibrant tropical sky like Sonic Superstars Hill Top Zone — bright saturated blue sky with fluffy white cumulus clouds, distant turquoise ocean horizon with small floating tropical islands and stone bridge ruins in the distant haze with depth-of-field blur. Cinematic illustration style, vibrant saturated colors..."

Anatomy of a good AI image prompt

  1. Style anchor — "like Sonic Superstars Hill Top Zone" (reference a known visual style)
  2. Subject — what's in the image
  3. Composition — "wide landscape", "side view", "top 60% blank"
  4. Color palette — "vibrant saturated", "warm peach to baby blue"
  5. What NOT to include — "no characters, no vehicles, no text"
  6. Quality words — "premium", "illustrative", "cinematic"

OpenAI image pricing (2026)

ModelQualitySizePrice/image
gpt-image-1Low1024×1024$0.011
gpt-image-1Medium1024×1024$0.042
gpt-image-1 ⭐Medium1536×1024 (wide)~$0.063
gpt-image-1High1536×1024 (wide)~$0.25
DALL-E 3Standard1024×1024$0.040
DALL-E 3HD1792×1024 (wide)$0.120

What we spent

6 wide images across v1 + v3 at gpt-image-1 medium ≈ $0.37 total. Including retries this might double to ~$0.75 in normal iteration cycles.

🏗 Chapter 5 — Game Architecture

File structure

monstertruckgame3-2d/
├── index.html                  # HUD, modals, canvas element
├── style.css                   # Glassmorphism HUD, responsive layout
├── assets/
│   ├── bg-sky.png              # DALL-E generated
│   ├── bg-midground.png        # DALL-E generated
│   ├── bg-foreground.png       # DALL-E generated
│   └── music-bg.mp3            # Royalty-free (Kevin MacLeod CC-BY)
└── src/
    ├── audio.js                # Web Audio synth + MP3 player
    ├── input.js                # Keyboard + touch event handlers
    ├── parallax.js             # Multi-layer background scrolling
    ├── terrain.js              # Procedural sine-wave hills
    ├── particles.js            # Nitrous, sparkles, grass, water mist
    ├── obstacles.js            # 11 obstacle types, spawning logic
    ├── truck.js                # Player+rival shared truck class
    ├── competitor.js           # AI rival, extends Truck
    └── game.js                 # Main loop, state, camera, leaderboard

The lesson — separation of concerns

Each file does ONE thing well. truck.js doesn't know about obstacles. obstacles.js doesn't know about audio. They communicate through the main game.js which orchestrates everything. This is the same principle as React components or microservices — just at smaller scale.

Why no build tools (npm, webpack)?

Adding npm/webpack to a small game multiplies complexity 10x for a 2x ease-of-development gain. For a single-developer browser game, plain <script> tags work fine and the result deploys to any web server. Premature complexity is the #1 killer of side projects.

🎮 Chapter 6 — Player Physics

What the student asked for

"when I press up I wanted to jump. And then when I hold the arrow, I wanted to jump really high until I let go and then it will land"

The technique: variable jump height

This is a classic platformer pattern. Pseudocode:

// When jump key pressed (initial impulse):
truck.vy = -14   // negative = upward

// Each frame while key held AND under max hold time:
if (jumpHeld && jumpHoldTime < 0.45 seconds) {
  truck.vy -= 0.6   // continued upward force
  jumpHoldTime += dt
}

// Always:
truck.vy += 0.7  // gravity
truck.y += truck.vy

Result: tap = short hop, hold = massive jump. Same as Mario Bros.

Terrain following — the truck rides the hills

Instead of flat ground, we use a sine wave for the ground line:

function groundY(worldX) {
  return baseY - (
    sin(worldX * 0.0035) * 55 +
    sin(worldX * 0.008 + 1.7) * 22 +
    sin(worldX * 0.018 + 3.3) * 8
  )
}

Three stacked sine waves at different frequencies give natural-looking rolling hills. The truck's Y position matches groundY(truck.x) when grounded.

Body tilt with slope

Truck tilts forward when going downhill, back when going uphill, by computing the slope (rise over run) at the truck's X:

const slope = (groundY(x + 5) - groundY(x - 5)) / 10
truck.bodyTilt = atan(slope)

🤖 Chapter 7 — Rival AI

What the student asked for

"add some artificial intelligence, where at lesat they try to let the user win. but if he really is terrible than they will win."

"make the trucks always be far apart, and you no longer have to have them be behind, they can be ahead and at differnet points, not stuck to the user"

The pattern: adaptive rubber-banding

Each rival has an ideal offset from the player (positive = behind, negative = ahead). The AI nudges its speed to maintain that offset, but with adjustments:

The minimum-spacing trick

Without this, rivals stack on top of each other:

for (const other of allRivals) {
  if (other === this) continue
  const gap = this.x - other.x
  if (abs(gap) < 90) {
    // Push apart
    desiredX += (gap > 0 ? 1 : -1) * (90 - abs(gap)) * 0.5
  }
}

The lesson — game AI is just controlled cheating

"Real" AI would learn to drive. Game AI just picks a target X position based on rules and lerps toward it. The illusion of intelligence comes from tuning the rules so the resulting behavior feels right. There's no neural network involved.

🔊 Chapter 8 — Sound Design

Two routes for game audio

  1. Web Audio API synthesis — math-generated tones, free, no file loading, infinite variations
  2. MP3 files — pre-recorded, sounds more "real", needs hosting

We used both

Royalty-free music sources

🔁 Chapter 9 — Iteration & Honest Feedback

Half the value of this session was the student giving fast, specific, honest feedback. Here are exact pastes that drove key iterations:

Feedback that worked well

"BUG. for some reason the speed increases dramatically. make sure there is only one speed. SHIFT should not be nitros. SPACEbar should be jump."

✅ Specific bug, specific reproduction, specific fix requested. Fixed in 5 minutes.

"the trucks are too close together... add some artificial intelligence, where at least they try to let the user win"

✅ Observation + intent. AI rewrote the rival logic.

"the coins do not look like COINS"

✅ One sentence, perfectly clear. Coins got redesigned from Sonic rings to gold discs with $ sign.

"here is an example of how lush i want the environments to be... [image]"

✅ Reference image attached. Triggered the entire v3 visual overhaul.

The lesson — feedback skill is a real skill

💰 Chapter 10 — Full Cost Breakdown

This game, end-to-end

ItemCostNotes
OpenAI image generation (6 images)~$0.37gpt-image-1 medium 1536×1024
Domain (marcinmigdal.com)~$12/yearPre-existing
DigitalOcean droplet~$6/monthPre-existing, hosts 10+ sites
HTTPS certificate (Let's Encrypt)$0Auto-renews every 90 days
Music (Kevin MacLeod CC-BY)$0Attribution required
Claude sessionIncluded in subscriptionTypical Pro = $20/mo
Pure marginal cost for this game~$0.37If you already have a server
If starting from zero (one-time)~$30Domain + 1 month droplet + this game

Scaling estimates for bigger projects

Project typeAI image cost3D model costDev time
Simple side-scroller (like this)$1-5$03-8 hours over 1-3 sessions
Polished mobile match-3 game$5-15$02-3 weeks of sessions
2.5D fighting game (Tekken-style)$10-30$0 (Mixamo) or $50-200 (Meshy custom)3-6 weeks
Full 3D adventure game$10-30$200-10003+ months
AAA-quality 3D gameHire a studio. AI tools aren't there yet for visuals you'd find on PlayStation.

Tools mentioned & their pricing

📋 Appendix — Notable Conversation Excerpts

These are the inflection-point messages from the actual session, preserved in the order they happened. Use them as a reference for the kinds of things you'll say when you build your own project.

🎬 Opening brief

"under marcinmigdal.com start a new domain called monstertruckgame.marcinmigdal.com this will be a sub domain for a new game were building... we will be using the exsitign OPENAI keys to create visual assets as you need to, tell me the approx cost of any api usage before u implement..."

📐 Setting boundaries

"no monstertruckgame.marcinmigdal.com is not linked to dns"

Lesson: catching the AI's wrong assumption early.

⚡ Pushing for speed

"do it / what are you waiting for its simply a subdomain.marcinmigdal.com"

Lesson: when the AI is being too cautious, just tell it to proceed.

🔑 Sharing credentials safely

"dop_v1_..."

Lesson: temporary tokens with short expiration are safe. The student revoked it within minutes. NEVER paste long-lived secrets.

👶 Audience clarification

"ensure that you create obstacles in the game beyond what i sent as screenshots, make this toddler 4 to 6 year old friendly and simple usage"

"make the game for 6 to 7 year olds"

Lesson: audience targeting changes EVERYTHING about a game's tuning.

🎨 Visual references

"here is an example of how lush i want the environments to be, so make the trucks maybe 35% smaller so we can get the feel of a distance... make the hills and mountains should be more illustrative realistic, also with the tips, and waterfalls" + [Sonic Superstars screenshot]

Lesson: one good reference image is worth 1000 words.

🔄 Iteration on visuals

"when the screen zooms out you can see that the other layer comes apart, make sure that nothing breaks, during the zoom in and out... Also the trucks are too close together, and they need to look like the monster trucks. with front hood and a CAB, and dont attach the line between the wheels it looks like a train. make the look like hot wheel monster trucks, without saying hot wheels."

Lesson: very specific visual feedback ("looks like a train", "front hood and CAB") drives precise fixes. The reference "hot wheel" is helpful even though we can't legally copy it — it sets the style direction.

💸 Asking about costs and capabilities

"is there a way we can use the cretive 3d engine or anything like that to make this game better somehow?"

"are there any limitations on what type of games i can build with you claude?"

Lesson: ask the AI about its limits and alternatives before committing to a direction. The cost/benefit answer might steer you somewhere better.

🎯 Setting up version comparison

"can you create all 3 versions under seperate paths so i can compare...on seperate paths, is that possible how large is the game?, when u say $200 of model generation you mean through meshy?"

Lesson: structured comparison is the fastest way to make decisions. Spinning up multiple side-by-side versions costs almost nothing extra and yields the best information.

🚀 What to do next (your homework)

  1. Play the game — both versions linked at the top. Notice what works and what's awkward. This is how you build taste.
  2. Open the source — visit game.js in your browser. Read it. You don't need to understand every line — just see how it's organized.
  3. Try to break it — find a bug. Report it like the student did: "BUG. when X, Y happens. should be Z." This skill is more valuable than coding.
  4. Build your own — pick a tiny idea. A clicker game. A typing test. A music visualizer. Use this game as the template. Spend an evening.
  5. Plan a bigger project — if you finished the small one and want more, ask the AI to plan a 3-week build with you, broken into 6 sessions of 30 min each.