What is a game brief?

A game brief is a short written document that defines what you want built. It is the first artifact of any software project. With AI-assisted development, the quality of your brief directly determines the quality of your first working prototype.

The four essential elements

Every effective game brief specifies four things:

1. Platform — where the game runs (browser, mobile app, desktop, console)
2. Controls — how the player interacts (keyboard, touch, gamepad, mouse)
3. Mechanics — what the player can do and what challenges them (jump, shoot, dodge, collect)
4. Style / Vibe — the look and feel you want (cartoony, realistic, pixel art, premium 3D)

This brief specifies all four elements without ambiguity. An AI assistant can begin work immediately and the result will closely match the writer's intent.

Common briefing mistakes

Cost considerations to include

Strong briefs also include a budget instruction. If your project will use paid APIs (image generation, 3D models, music), ask the AI to confirm cost estimates before spending. A simple line like "tell me the approx cost of any API usage before implementing" prevents surprises.

The first decision: 2D or 3D?

If your game can work as a side-view, top-down, or fixed-angle 2D presentation, choose 2D. 2D games are faster to build, run on weaker devices, look great with the right art, and cost far less to produce.

Only choose 3D if the gameplay requires three-dimensional movement that cannot be faked in 2D. Examples: first-person shooters, free-roaming explorers, racing simulators with corner-turning camera angles.

Comparing browser game frameworks

The case for Canvas + Vanilla JS

For your first project, choose HTML5 Canvas with vanilla JavaScript. Here's why:

• Zero installation. No npm, no webpack, no build configuration. Open an HTML file in any browser and it runs.
• Universal compatibility. Works on every device with a browser, including old phones and tablets.
• Instant feedback loop. Edit a file, refresh the browser, see the change. No compile step means faster iteration.
• Deployment is just file copying. Upload your folder to any web server.

When to graduate to a framework

You'll know it's time when:

• Your game has 20+ entities and managing them is becoming chaotic
• You need physics that would take hours to write yourself (use Matter.js)
• You need WebGL effects like bloom, blur, or particle systems at scale (use PixiJS)
• You're certain about the project's scope and stakes (use Phaser for serious 2D, Three.js for 3D)

The four-step web delivery chain

When someone visits yourgame.example.com, four systems hand off:

1. Registrar (where you bought the domain) tells the world which nameserver controls it
2. Nameserver (DNS provider) holds the records that say "this name → this IP address"
3. Web server (running on a virtual machine at that IP) listens for HTTP requests
4. Web server config matches the requested hostname to a folder of files

Many beginners confuse steps 2 and 3 — DNS is not on your web server. DNS lives at your registrar or DNS provider. You configure it through their control panel or API.

Adding a DNS record

To make yourgame.example.com point to a server with IP 138.197.145.209, add an A record:

Type:     A
Name:     yourgame
Value:    138.197.145.209
TTL:      3600 (1 hour)

DNS changes can take 5 minutes to an hour to propagate worldwide. Use a tool like dnschecker.org to monitor.

Configuring your web server

If you're using Apache, create a virtual host file telling Apache where to serve files from:

<VirtualHost *:80>
    ServerName yourgame.example.com
    DocumentRoot /var/www/yourgame/public

    <Directory /var/www/yourgame/public>
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Then enable the site and reload Apache:

a2ensite yourgame.example.com.conf
systemctl reload apache2

Adding free HTTPS with Let's Encrypt

HTTPS is required for any modern web app. Let's Encrypt provides free certificates that auto-renew. After DNS propagates, run:

certbot --apache -d yourgame.example.com \
  --non-interactive --agree-tos -m your@email.com \
  --redirect

Certbot does three things: requests a certificate from Let's Encrypt, installs it in your web server config, and sets up automatic renewal. The certificate is valid for 90 days and renews itself.

Cost summary

Why AI image generation for games

Hiring a professional illustrator costs $50–$200 per image with a multi-day turnaround. AI image generation costs $0.05–$0.30 per image and takes 20–60 seconds. For prototypes, indie projects, and learning, AI is the obvious choice.

OpenAI image model pricing (2026)

For game backgrounds, the bolded option (gpt-image-1 medium wide) is the sweet spot — good enough quality for parallax backdrops at low cost.

Anatomy of a strong image prompt

A reliable prompt has six elements:

1. Style anchor — reference a known visual style ("Sonic Superstars Hill Top Zone", "Studio Ghibli")
2. Subject — what's in the image
3. Composition — "wide landscape", "side view", "top 60% blank"
4. Color palette — "vibrant saturated", "muted earth tones"
5. Exclusions — "no characters, no vehicles, no text"
6. Quality words — "premium", "illustrative", "cinematic"

Handling the transparency problem

AI image models don't reliably produce transparent backgrounds even when asked. Two workarounds:

1. Solid chroma-key background. Ask for "solid magenta background" and remove the magenta in code at load time.
2. Composition instruction. Ask for "the top 60% should be blank/transparent" and accept the result.

Budgeting art for a small game

The principle: one file, one responsibility

Each file in your project should do one thing well. When responsibilities are mixed across files, changes ripple unpredictably and bugs hide in unexpected places.

Recommended file structure for a 2D game

your-game/
├── index.html                  Page structure, HUD, modals, canvas element
├── style.css                   Visual styles for the HUD and overlays
├── assets/
│   ├── bg-layer1.png           Background art
│   ├── bg-layer2.png
│   └── music.mp3
└── src/
    ├── audio.js                Sound effects and music
    ├── input.js                Keyboard and touch event handlers
    ├── parallax.js             Background scrolling
    ├── terrain.js              Ground/level data
    ├── particles.js            Visual effects
    ├── obstacles.js            Hazards and collectibles
    ├── player.js               Player entity
    ├── enemy.js                Enemy entities (often extends player)
    └── game.js                 Main loop, state management

How the modules communicate

Each module exposes its functionality on the global window object as a class or namespace:

// In truck.js:
(function() {
  class Truck { /* ... */ }
  window.Truck = Truck;
})();

// In game.js:
const player = new window.Truck({ x: 100, y: 200 });

The main game.js file orchestrates everything: it instantiates entities, runs the game loop, dispatches events. Individual modules don't reach across to each other directly.

Why no build tools?

Build tools (webpack, Vite, npm, TypeScript compilation) add power but multiply complexity. For most browser games, the trade is not worth it. Plain <script> tags in your HTML are sufficient:

<script src="src/audio.js"></script>
<script src="src/input.js"></script>
<script src="src/player.js"></script>
<script src="src/game.js"></script>

Order matters: load dependencies before the files that use them.

Naming conventions

• Files: lowercase with hyphens or single-word (audio.js, player-controller.js)
• Classes: PascalCase (Truck, ParticleSystem)
• Functions: camelCase (updateScore, checkCollisions)
• Constants: UPPER_SNAKE_CASE (MAX_SPEED, GROUND_Y)

The basic physics loop

Every frame, three things happen for each moving entity:

1. Apply forces (gravity, jump impulses, player input)
2. Update velocity from forces
3. Update position from velocity

function update(dt) {
  // 1. Forces
  player.vy += GRAVITY;
  if (jumpPressed && player.onGround) {
    player.vy = -JUMP_IMPULSE;
  }

  // 2. Velocity already updated above
  // 3. Position
  player.y += player.vy;
  player.x += player.vx;

  // 4. Resolve collisions
  if (player.y >= groundY) {
    player.y = groundY;
    player.vy = 0;
    player.onGround = true;
  }
}

Variable jump height (a platformer classic)

To make tap = short jump and hold = high jump, apply a continuous upward force while the key is held — up to a maximum duration:

// When jump first pressed:
player.vy = -INITIAL_IMPULSE   // -14
player.jumpHoldTime = 0
player.isJumping = true

// Each frame while key held AND jumpHoldTime < MAX:
if (player.isJumping && jumpHeld && player.jumpHoldTime < 0.45) {
  player.vy -= ADDITIONAL_FORCE   // -0.6 per frame
  player.jumpHoldTime += dt
}

// Always:
player.vy += GRAVITY   // 0.7

The cap (0.45 seconds in this example) prevents the player from holding the button to fly forever. Tune these three values — initial impulse, additional force, max hold — until the jump feels right.

Procedural rolling terrain

Instead of a flat ground line, layer three sine waves to create natural-looking rolling hills:

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

The three layers have different frequencies and offset phases. The result is hills that don't repeat predictably — they feel natural.

Following the terrain

When the player is grounded, their Y position should match the terrain at their X:

const groundHere = groundY(player.x);
if (player.y >= groundHere) {
  player.y = groundHere;
  player.vy = 0;
  player.onGround = true;
}

Body tilt with slope

To make the player visually lean forward going downhill and back going uphill, compute the slope (rise over run) and convert to a rotation angle:

const dx = 5;
const slope = (groundY(player.x + dx) - groundY(player.x - dx)) / (2 * dx);
player.bodyTilt = Math.atan(slope);

When you draw the player, rotate the canvas context by player.bodyTilt before drawing.

Game AI is rules, not intelligence

When someone says "the game has good AI," they usually mean the rules produce behavior that feels intelligent. Almost no commercial game uses machine learning for opponents. Game AI is finite state machines, decision trees, and tuned numerical rules.

The rubber-banding pattern

In racing games, you want opponents to stay close to the player — exciting races require the outcome to feel uncertain. The technique is called rubber-banding: invisible elastic that pulls opponents toward the player.

function rivalAI(rival, player, idealOffset) {
  // Where we want the rival to be (relative to player)
  const desiredX = player.x - idealOffset;

  // How fast should we move to get there?
  const xDelta = desiredX - rival.x;
  rival.targetVx = player.vx + xDelta * 0.04;

  // Smooth velocity approach (no instant teleport)
  rival.vx += (rival.targetVx - rival.vx) * 0.07;
}

Adaptive difficulty

The interesting part: adjust the rival's behavior based on how well the player is doing.

// Sample player's recent average speed
const recentAvgVx = average(playerSpeedSamplesLast60Frames);

if (recentAvgVx > expectedSpeed * 0.95) {
  // Player is doing well — rival keeps up but stays behind
  rival.targetVx = player.vx * 0.95;
} else if (recentAvgVx < expectedSpeed * 0.5) {
  // Player is struggling — rival slows down to let them catch up (kid mode)
  // OR pulls ahead and threatens to win (adult mode)
  rival.targetVx = mode === 'kid' ? recentAvgVx * 0.8 : expectedSpeed;
}

Multiple rivals — enforce minimum spacing

If you have several AI opponents, they'll naturally cluster at the same target position. Push them apart:

for (const other of allRivals) {
  if (other === this) continue;
  const gap = this.x - other.x;
  if (Math.abs(gap) < MIN_GAP) {
    const push = (MIN_GAP - Math.abs(gap)) * 0.5;
    desiredX += (gap > 0 ? 1 : -1) * push;
  }
}

"Never lose" mode for young players

For games aimed at very young players, you might want to guarantee the player can win. Hard rules near the finish line:

const inFinalStretch = (timeLimit - gameTime) < 5; // last 5 seconds
if (inFinalStretch && mode === 'kid') {
  // Hard cap: rival cannot exceed player's X position
  if (rival.x > player.x - 40) {
    rival.x = player.x - 40;
    rival.vx = Math.min(rival.vx, player.vx * 0.9);
  }
}

Predictive behaviors

AI opponents should react to upcoming obstacles. For a jumping AI:

for (const obstacle of obstacles) {
  if (!obstacle.requiresJump) continue;
  const distance = obstacle.x - rival.x;
  if (distance > 50 && distance < 200 && rival.onGround) {
    rival.jump();
    break;
  }
}

Two routes for game audio

A common hybrid: synthesize SFX (jump, hit, coin), use MP3 for music.

Synthesizing a jump sound

const ctx = new AudioContext();

function playJump() {
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.type = 'sine';
  osc.frequency.setValueAtTime(220, ctx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(680, ctx.currentTime + 0.18);

  gain.gain.setValueAtTime(0.25, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.22);

  osc.connect(gain).connect(ctx.destination);
  osc.start();
  osc.stop(ctx.currentTime + 0.25);
}

The pattern: create an oscillator (the tone) and a gain node (the volume envelope), connect them, then start and stop the oscillator. Sweep the frequency for "boing" effects; sweep volume down for natural decay.

Standard game sound recipes

Legal music sources

For background music, never use copyrighted commercial songs. Use one of these instead:

• freepd.com — CC0, no attribution required
• incompetech.com — Kevin MacLeod, CC-BY (attribution required)
• pixabay.com/music — large library, free with credit
• Original compositions you commission from a musician on Fiverr (~$50-200)

Playing music with fade in/out

const music = document.createElement('audio');
music.src = 'assets/music.mp3';
music.loop = true;
music.volume = 0;
music.play();

// Fade in over ~2 seconds
let v = 0;
const fadeIn = setInterval(() => {
  v = Math.min(v + 0.02, 0.4);
  music.volume = v;
  if (v >= 0.4) clearInterval(fadeIn);
}, 50);

The feedback formula

A good feedback message contains three things:

1. The observation — what you see now
2. The intent — what should happen instead
3. Optional: a reference — screenshot, example URL, or sketch

This message names the bug, describes the trigger, and specifies the fix. It can be acted on immediately without follow-up questions.

What makes weak feedback

Using reference images

One good reference image is worth a thousand words of description. If you can find an existing game or app that has the look you want, paste a screenshot with the instruction "make it more like this." The AI will absorb visual style faster than you can describe it.

Iteration vs scope additions

Two different requests to keep separate:

• Iteration — refining something that already exists ("the coin is too small")
• Scope addition — asking for something new ("add 3 more trucks")

Bundle iteration into one message; introduce scope additions one at a time. This keeps the AI's attention focused.

One-time vs recurring costs

Project-type cost estimates

Strategies to stay under budget

• Use medium quality, not HD. For prototype art, gpt-image-1 medium is 4x cheaper than high and looks great.
• Use procedural art where possible. Anything geometric (UI icons, simple sprites) can be drawn in code at $0.
• Cache and reuse images. Pull one strong asset, use it across multiple game elements.
• Start with free tools. Mixamo for 3D character animations, freepd.com for music, Web Audio for SFX.
• Set a hard ceiling. Tell the AI "spend no more than $0.50 on this." Limits force creative reuse.

Three deployment options

Deploying to your own server

If you already have a server set up from Lesson 3, deployment is just copying files:

# From your local machine:
scp -r ./my-game/* user@your-server-ip:/var/www/my-game/public/

# Set proper permissions on the server:
ssh user@your-server-ip
chown -R www-data:www-data /var/www/my-game/
chmod -R 755 /var/www/my-game/public/

Deploying to GitHub Pages (free)

1. Create a new GitHub repository
2. Upload your game folder contents
3. Go to Settings → Pages → enable Pages from the main branch
4. Your game is live at https://username.github.io/repo-name/

Pre-launch checklist

• ✅ Test in Chrome, Firefox, and Safari
• ✅ Test on a phone (or use Chrome DevTools mobile emulator)
• ✅ Verify all asset URLs work (no file:// or local paths)
• ✅ Verify the HTTPS certificate is valid (no browser warnings)
• ✅ Hard-refresh the deployed version (Ctrl+Shift+R) — your browser may have cached the old version

Sharing your game

Once live, share the URL. Real feedback from real users is the only reliable way to know if your game is good. Watch someone play it without explaining anything — their confusion shows you what to improve next.

Why mobile matters

Over half of casual game players are on phones. If your game requires a keyboard, you exclude that audience entirely. Adding touch support takes about an hour and unlocks 5× the potential players.

Two layers of touch support

1. Tap anywhere on canvas = jump (simplest, works without UI changes)
2. Dedicated on-screen buttons (better UX, supports continuous actions like "hold to accelerate")

Implement both. The on-canvas tap is a safety net; the dedicated buttons are the primary interface.

Canvas tap handler

const canvas = document.getElementById('gameCanvas');

const tapHandler = (e) => {
  // Don't fire if the touch landed on a UI button
  if (e.target && e.target.tagName === 'BUTTON') return;
  e.preventDefault();
  Input.jumpQueued = true;
};

canvas.addEventListener('touchstart', tapHandler, { passive: false });
canvas.addEventListener('mousedown', tapHandler);  // works for desktop too

The { passive: false } option lets us call preventDefault(), which stops the browser from also scrolling or zooming on the tap.

On-screen buttons (HTML)

<div id="touch-controls">
  <button id="btn-gas">
    <span class="touch-icon">⚡</span>
    <span class="touch-label">GAS</span>
  </button>
  <button id="btn-jump">
    <span class="touch-icon">⬆</span>
    <span class="touch-label">JUMP</span>
  </button>
</div>

Held-button pattern (for "hold to accelerate")

const gasBtn = document.getElementById('btn-gas');

gasBtn.addEventListener('touchstart', (e) => {
  e.preventDefault();
  Input.touchGasHeld = true;
});

gasBtn.addEventListener('touchend', (e) => {
  e.preventDefault();
  Input.touchGasHeld = false;
});

// Also handle touchcancel — fires when the OS interrupts (incoming call, etc.)
gasBtn.addEventListener('touchcancel', () => {
  Input.touchGasHeld = false;
});

// Then in your game logic:
isAccelerating() {
  return this.keys['ArrowRight'] || this.touchGasHeld;
}

CSS: only show buttons on touch devices

/* Hide by default (desktop) */
#touch-controls { display: none; }

/* Show on touch-only devices */
@media (hover: none) and (pointer: coarse) {
  #touch-controls { display: flex; }
}

The (hover: none) and (pointer: coarse) queries together reliably detect touch-primary devices without false positives on hybrid laptops.

Button styling for thumbs

• Minimum 80×80px tap target (60×60 is acceptable, smaller is hostile)
• Position in bottom corners — natural thumb reach when holding a phone
• Semi-transparent backgrounds so they don't block the game view
• Use :active CSS state to give immediate visual feedback on tap
• Set touch-action: manipulation to disable double-tap-to-zoom on the buttons

Responsive layout

Make your canvas scale to fill the screen while maintaining aspect ratio:

#game-container {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
}

This sizes the container to the largest 16:9 rectangle that fits in the viewport, regardless of phone or tablet dimensions.

Test the basics

• Tap a button → does the action fire?
• Hold a button → does it stay active?
• Rotate the phone → does the layout still work?
• Open and close on-screen keyboard (focus an input) → does the canvas resize correctly?
• Try in airplane mode (after first load) → service worker should serve from cache

What is a PWA?

A Progressive Web App is a regular website with three additional ingredients:

1. manifest.json — tells the browser the app's name, icon, color, and how to display it
2. service worker — a background script that caches files for offline use
3. HTTPS — required (you already have this from Lesson 3)

With those three pieces, your game becomes installable from any browser. Users tap "Add to Home Screen" and it appears as an app icon — opens fullscreen, no browser chrome, indistinguishable from a native app to the user.

Writing manifest.json

{
  "name": "Monster Truck Hill Top Rally",
  "short_name": "Monster Truck",
  "description": "A premium kid-friendly browser racing game.",
  "start_url": "./",
  "scope": "./",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#0a3d4f",
  "theme_color": "#0a3d4f",
  "categories": ["games", "kids"],
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Save as manifest.json in your public folder. Link it in your HTML:

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0a3d4f">
<link rel="apple-touch-icon" href="icon-192.png">

Required: app icons

You need at least two PNG icons: 192×192 and 512×512. Generate them via AI (one prompt, $0.01 with gpt-image-1 low quality), then resize. The 512px version should be designed to look good both as a square and a circle (for adaptive icons on Android).

Writing the service worker

// sw.js
const CACHE = 'my-game-v1';
const FILES = [
  './',
  'index.html',
  'style.css',
  'src/game.js',
  'assets/bg.png',
  'assets/music.mp3'
];

self.addEventListener('install', (e) => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(FILES)));
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(cached =>
      cached || fetch(e.request)
    )
  );
});

Register the service worker from your HTML:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('sw.js');
  });
}

Testing installation

1. Open the game URL in Chrome on Android (or Safari on iPhone)
2. Chrome shows an "Install app" prompt OR a menu option in ⋮ → "Install app"
3. iOS Safari: tap Share ⬆ → "Add to Home Screen"
4. The app appears on your home screen — launches fullscreen, runs offline after first load

Generating a real .apk file (PWABuilder route)

For Google Play Store submission or sideloading via APK file, use Microsoft's free PWABuilder:

1. Visit pwabuilder.com
2. Paste your PWA URL
3. PWABuilder analyzes your manifest and service worker, scores readiness
4. Click "Package For Stores" → Android
5. Download the .apk file (small — a few MB, contains a WebView wrapper around your URL)
6. Sideload by emailing the APK to yourself and tapping it (enable "Install from Unknown Sources" first), OR submit to Play Store

PWA vs APK — which to choose?

App Store (iOS)

Apple does not allow PWAs to be submitted to the App Store as PWAs. To publish on iOS, you would need to wrap your web app with Capacitor or React Native — significantly more work. For most indie projects, "Add to Home Screen" on iOS is sufficient.

startGame() {
  // ... reset state, etc ...
  this.state = 'playing';
  if (!this._loopRunning) {
    this._loopRunning = true;
    requestAnimationFrame((t) => this.loop(t));
  }
}