How to Earn $15,000 from Browser Games: Claude Fable 5 + Claude Code + Poki/CrazyGames

# Game: Star Dodger (working title)
 
## Platform and stack
- Pure HTML5 + CSS + vanilla JavaScript. No frameworks or bundlers.
- Structure: index.html, game.js, (optional) assets in /assets with RELATIVE paths.
- IMPORTANT (Poki requirement): no external requests in production — no Google Fonts,
  no external CDNs (jsDelivr, etc.), no external images/sounds. Everything local.
- IMPORTANT (Poki requirement): works in incognito mode — wrap any access to localStorage
  in try/catch.
- Keep the initial load size small (Poki requires < 8 MB).
- Works offline from a local folder and inside an iframe on the portal.
 
## Genre and mechanics
- Hyper-casual dodging arcade.
- The player controls a circle at the bottom of the screen.
- Objects fall from above: red = death, yellow = +points.
- Goal: survive as long as possible; the score grows over time.
 
## Controls (BOTH are MANDATORY)
- Desktop: arrow keys ← →, A/D, mouse.
- Mobile/tablet: touch (pointer events), the finger drags the player horizontally.
 
## Session economy
- Session length: target 2–5 minutes. Fast restart without reloading the page.
- Progression: rising difficulty (object speed/frequency) based on score.
 
## Ads — via an abstract window.Ads interface (do NOT tie it to a portal!)
Methods:
- Ads.loadingFinished()
- Ads.gameplayStart()   // call on the player's FIRST input, not on load
- Ads.gameplayStop()    // on any pause/death/menu
- Ads.interstitial(): Promise
- Ads.rewarded(): Promise<boolean>  // true if the video was watched to the end
By default Ads is a stub (logs + reward=true). I'll plug in the portal implementations later.
Apply: rewarded() for "continue after death" (once per run) and "double the score";
interstitial() before a new run.
 
## Technical requirements
- Responsive canvas, devicePixelRatio support (cap ×2). Fast first frame.
- Clean, commented code, with explicit spots marked for integration.
 
## Deliverables
- A working game + instructions for running it locally.
- The final build in /dist: index.html at the root, relative paths, no external domains.

# Game: Star Dodger (working title)
 
## Platform and stack
- Pure HTML5 + CSS + vanilla JavaScript. No frameworks or bundlers.
- Structure: index.html, game.js, (optional) assets in /assets with RELATIVE paths.
- IMPORTANT (Poki requirement): no external requests in production — no Google Fonts,
  no external CDNs (jsDelivr, etc.), no external images/sounds. Everything local.
- IMPORTANT (Poki requirement): works in incognito mode — wrap any access to localStorage
  in try/catch.
- Keep the initial load size small (Poki requires < 8 MB).
- Works offline from a local folder and inside an iframe on the portal.
 
## Genre and mechanics
- Hyper-casual dodging arcade.
- The player controls a circle at the bottom of the screen.
- Objects fall from above: red = death, yellow = +points.
- Goal: survive as long as possible; the score grows over time.
 
## Controls (BOTH are MANDATORY)
- Desktop: arrow keys ← →, A/D, mouse.
- Mobile/tablet: touch (pointer events), the finger drags the player horizontally.
 
## Session economy
- Session length: target 2–5 minutes. Fast restart without reloading the page.
- Progression: rising difficulty (object speed/frequency) based on score.
 
## Ads — via an abstract window.Ads interface (do NOT tie it to a portal!)
Methods:
- Ads.loadingFinished()
- Ads.gameplayStart()   // call on the player's FIRST input, not on load
- Ads.gameplayStop()    // on any pause/death/menu
- Ads.interstitial(): Promise
- Ads.rewarded(): Promise<boolean>  // true if the video was watched to the end
By default Ads is a stub (logs + reward=true). I'll plug in the portal implementations later.
Apply: rewarded() for "continue after death" (once per run) and "double the score";
interstitial() before a new run.
 
## Technical requirements
- Responsive canvas, devicePixelRatio support (cap ×2). Fast first frame.
- Clean, commented code, with explicit spots marked for integration.
 
## Deliverables
- A working game + instructions for running it locally.
- The final build in /dist: index.html at the root, relative paths, no external domains.

Read SPEC.md. First, give a short plan: screens, file structure, and a list of
functions with their purposes. Wait until I say "ok." Then implement the whole project
according to the specification, creating the files. At the end, verify the local run and
give the command.

The start feels slow: the first object comes after 0.4s — speed up the difficulty ramp
in the first 15 seconds.

On the phone the finger sometimes loses the circle. Make pointer tracking smooth,
handle pointercancel and the finger leaving the edge.

Add a game-over screen: "Continue (ad)" via Ads.rewarded() once per run,
"Double the score (ad)" and "Restart" via Ads.interstitial().

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex
 
# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash
 
# Homebrew (macOS/Linux)
brew install --cask claude-code

claude --version

npm install -g @anthropic-ai/claude-code

mkdir star-dodger && cd star-dodger
claude

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>Star Dodger</title>
 
  <!-- In the portal version, the SDK <script> (Poki/CrazyGames) is added here BEFORE game.js -->
 
  <style>
    html, body { margin: 0; height: 100%; background: #0b0f1a; overflow: hidden;
      font-family: system-ui, -apple-system, sans-serif; }
    #game { display: block; width: 100vw; height: 100vh; touch-action: none; }
    .overlay { position: fixed; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 14px; text-align: center;
      color: #fff; background: rgba(5,8,16,.72); padding: 20px; }
    .hidden { display: none; }
    .btn { background: #3b82f6; color: #fff; border: 0; border-radius: 12px;
      padding: 14px 22px; font-size: 18px; font-weight: 600; cursor: pointer; min-width: 220px; }
    .btn.alt { background: #f59e0b; }
    h1 { font-size: 32px; margin: 0; }
    p { margin: 0; opacity: .85; line-height: 1.4; }
    .score { font-size: 22px; }
    #hud { position: fixed; top: 10px; left: 0; right: 0; text-align: center;
      color: #fff; font-size: 22px; font-weight: 700; pointer-events: none; text-shadow: 0 1px 4px #000; }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <div id="hud" class="hidden">0</div>
 
  <div id="start" class="overlay">
    <h1>Star Dodger</h1>
    <p>Dodge the red ones, catch the yellow ones.<br>Touch/mouse or arrow keys ← →</p>
    <button class="btn" id="playBtn">Play</button>
  </div>
 
  <div id="over" class="overlay hidden">
    <h1>Game Over</h1>
    <p class="score" id="finalScore">Score: 0</p>
    <button class="btn alt" id="reviveBtn">Continue (ad)</button>
    <button class="btn alt" id="doubleBtn">Double the score (ad)</button>
    <button class="btn" id="againBtn">Restart</button>
  </div>
 
  <!-- Default ad stub. In Part 3 this is replaced by the portal adapter. -->
  <script>
    window.Ads = window.Ads || {
      loadingFinished() { console.log('[ads] loading finished'); },
      gameplayStart()  { console.log('[ads] gameplay start'); },
      gameplayStop()   { console.log('[ads] gameplay stop'); },
      interstitial()   { console.log('[ads] interstitial (stub)'); return Promise.resolve(); },
      rewarded()       { console.log('[ads] rewarded (stub) -> success'); return Promise.resolve(true); },
    };
  </script>
 
  <script src="game.js"></script>
</body>
</html>

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const hud = document.getElementById('hud');
const startScreen = document.getElementById('start');
const overScreen = document.getElementById('over');
const finalScoreEl = document.getElementById('finalScore');
 
let W, H, dpr;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  W = window.innerWidth; H = window.innerHeight;
  canvas.width = W * dpr; canvas.height = H * dpr;
  canvas.style.width = W + 'px'; canvas.style.height = H + 'px';
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener('resize', resize);
resize();
 
const player = { x: W / 2, y: H - 90, r: 22 };
let items = [];                 // { x, y, vy, r, type: 'bad' | 'good' }
let score = 0, best = 0;
let running = false, revivedThisRun = false;
let spawnTimer = 0, lastTime = 0;
 
// ---- Controls: touch/mouse (pointer) + keyboard ----
let targetX = null;
canvas.addEventListener('pointerdown', e => { targetX = e.clientX; });
canvas.addEventListener('pointermove', e => { if (running) targetX = e.clientX; });
canvas.addEventListener('pointercancel', () => { targetX = null; });
 
const keys = {};
window.addEventListener('keydown', e => {
  keys[e.key] = true;
  if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', ' '].includes(e.key)) e.preventDefault();
});
window.addEventListener('keyup', e => { keys[e.key] = false; });
 
function reset() {
  score = 0; items = []; spawnTimer = 0; revivedThisRun = false;
  player.x = W / 2; player.y = H - 90; targetX = null;
}
 
function spawn() {
  const good = Math.random() < 0.28;
  items.push({
    x: 24 + Math.random() * (W - 48),
    y: -30,
    r: good ? 14 : 18 + Math.random() * 10,
    vy: 140 + score * 1.4 + Math.random() * 60,
    type: good ? 'good' : 'bad',
  });
}
 
function update(dt) {
  player.y = H - 90;
  const speed = 520;
  if (keys['ArrowLeft'] || keys['a'] || keys['A']) player.x -= speed * dt;
  if (keys['ArrowRight'] || keys['d'] || keys['D']) player.x += speed * dt;
  if (targetX !== null) player.x += (targetX - player.x) * Math.min(1, dt * 12);
  player.x = Math.max(player.r, Math.min(W - player.r, player.x));
 
  spawnTimer -= dt;
  const interval = Math.max(0.28, 0.7 - score * 0.004);
  if (spawnTimer <= 0) { spawn(); spawnTimer = interval; }
 
  for (let i = items.length - 1; i >= 0; i--) {
    const it = items[i];
    it.y += it.vy * dt;
    if (Math.hypot(it.x - player.x, it.y - player.y) < it.r + player.r) {
      if (it.type === 'good') { score += 5; items.splice(i, 1); continue; }
      gameOver(); return;
    }
    if (it.y - it.r > H) items.splice(i, 1);
  }
  score += dt * 8;                       // points for surviving
  hud.textContent = Math.floor(score);
}
 
function draw() {
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = '#60a5fa';
  ctx.beginPath(); ctx.arc(player.x, player.y, player.r, 0, Math.PI * 2); ctx.fill();
  for (const it of items) {
    ctx.fillStyle = it.type === 'good' ? '#fbbf24' : '#ef4444';
    ctx.beginPath(); ctx.arc(it.x, it.y, it.r, 0, Math.PI * 2); ctx.fill();
  }
}
 
function loop(t) {
  if (!running) return;
  const dt = Math.min(0.05, (t - lastTime) / 1000 || 0);
  lastTime = t;
  update(dt);
  if (running) { draw(); requestAnimationFrame(loop); }
}
 
function startGame() {
  reset();
  startScreen.classList.add('hidden');
  overScreen.classList.add('hidden');
  hud.classList.remove('hidden');
  running = true; lastTime = performance.now();
  Ads.gameplayStart();                   // player's first input (Poki requirement)
  requestAnimationFrame(loop);
}
 
function resume() {
  overScreen.classList.add('hidden');
  hud.classList.remove('hidden');
  running = true; lastTime = performance.now();
  Ads.gameplayStart();
  requestAnimationFrame(loop);
}
 
function gameOver() {
  running = false;
  Ads.gameplayStop();                    // any stop of gameplay
  best = Math.max(best, Math.floor(score));
  finalScoreEl.textContent = `Score: ${Math.floor(score)}  (best ${best})`;
  document.getElementById('reviveBtn').style.display = revivedThisRun ? 'none' : '';
  document.getElementById('doubleBtn').style.display = '';
  hud.classList.add('hidden');
  overScreen.classList.remove('hidden');
}
 
// ---- Buttons + ads ----
document.getElementById('playBtn').onclick = startGame;
 
document.getElementById('againBtn').onclick = async () => {
  await Ads.interstitial();              // interstitial ad before a new run
  startGame();
};
 
document.getElementById('reviveBtn').onclick = async () => {
  const ok = await Ads.rewarded();       // rewarded video
  if (ok) {
    revivedThisRun = true;
    items = items.filter(it => it.type === 'good' || it.y < H * 0.4); // clear nearby threats
    resume();
  }
};
 
document.getElementById('doubleBtn').onclick = async () => {
  const ok = await Ads.rewarded();
  if (ok) {
    score *= 2;
    best = Math.max(best, Math.floor(score));
    finalScoreEl.textContent = `Score: ${Math.floor(score)}  (best ${best})`;
    document.getElementById('doubleBtn').style.display = 'none';
  }
};
 
Ads.loadingFinished();                   // assets here are instant

python3 -m http.server 8000

Assemble a release build into /dist: index.html at the root, game.js next to it, assets in
/dist/assets, all paths relative, no external domains. Remove debug code and logs.
Verify that the initial load size is < 8 MB and that the game runs from /dist.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>Star Dodger</title>
 
  <!-- 1) Poki SDK BEFORE the game code -->
  <script src="https://game-cdn.poki.com/scripts/v2/poki-sdk.js"></script>
 
  <style>/* ... the same styles as in index.html ... */</style>
</head>
<body>
  <canvas id="game"></canvas>
  <div id="hud" class="hidden">0</div>
  <!-- ... the same start / over overlays ... -->
 
  <!-- 2) Ads adapter for Poki (INSTEAD of the stub) -->
  <script>
    function muteForAd()   { /* stop music/sound and disable game input */ }
    function unmuteForAd() { /* restore sound and input */ }
 
    window.Ads = {
      loadingFinished() { PokiSDK.gameLoadingFinished(); },
      gameplayStart()  { PokiSDK.gameplayStart(); },
      gameplayStop()   { PokiSDK.gameplayStop(); },
 
      // Won't ALWAYS show a video — Poki decides based on its own timer
      interstitial() {
        return PokiSDK.commercialBreak(muteForAd).then(unmuteForAd);
      },
 
      // success === true only if the video was watched to the end
      rewarded() {
        return PokiSDK.rewardedBreak({ size: 'medium', onStart: muteForAd })
          .then((success) => { unmuteForAd(); return !!success; });
      },
    };
 
    PokiSDK.init()
      .then(() => console.log('Poki SDK ok'))
      .catch(() => console.log('Poki SDK failed, continue anyway'));
  </script>
 
  <!-- prevent the page from jumping on arrows/space/wheel (the game is inside Poki's long page) -->
  <script>
    window.addEventListener('keydown', ev => {
      if (['ArrowDown', 'ArrowUp', ' '].includes(ev.key)) ev.preventDefault();
    });
    window.addEventListener('wheel', ev => ev.preventDefault(), { passive: false });
  </script>
 
  <!-- 3) Game code, unchanged -->
  <script src="game.js"></script>
</body>
</html>

Make a logical game field of 640x360 (16:9) and scale it proportionally, centered,
with black bars (letterbox), while keeping support for any window size and
devicePixelRatio. Recompute input coordinates to account for the scale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>Star Dodger</title>
 
  <!-- 1) CrazyGames SDK v3 BEFORE the game code -->
  <script src="https://sdk.crazygames.com/crazygames-sdk-v3.js"></script>
 
  <style>/* ... the same styles ... */</style>
</head>
<body>
  <canvas id="game"></canvas>
  <div id="hud" class="hidden">0</div>
  <!-- ... the same overlays ... -->
 
  <!-- 2) Ads adapter for CrazyGames + loading the game after init -->
  <script>
    function muteForAd()   { /* disable sound + game input */ }
    function unmuteForAd() { /* restore sound + input */ }
 
    (async () => {
      try {
        await window.CrazyGames.SDK.init();          // you must wait for init
      } catch (e) {
        console.log('CrazyGames init failed', e);
      }
      const CG = window.CrazyGames.SDK;
 
      window.Ads = {
        loadingFinished() { CG.game.sdkGameLoadingStop?.(); },
        gameplayStart()  { CG.game.gameplayStart(); },
        gameplayStop()   { CG.game.gameplayStop(); },
 
        // requestAd takes callbacks, not a Promise — we wrap it in a Promise
        interstitial() {
          return new Promise((resolve) => {
            CG.ad.requestAd('midgame', {
              adStarted:  () => muteForAd(),
              adFinished: () => { unmuteForAd(); resolve(); },
              adError:    () => { unmuteForAd(); resolve(); }, // on error, continue anyway
            });
          });
        },
 
        // grant the reward ONLY in adFinished
        rewarded() {
          return new Promise((resolve) => {
            CG.ad.requestAd('rewarded', {
              adStarted:  () => muteForAd(),
              adFinished: () => { unmuteForAd(); resolve(true);  }, // watched -> reward
              adError:    () => { unmuteForAd(); resolve(false); }, // didn't show -> no reward
            });
          });
        },
      };
 
      // load the game after the adapter is ready
      const s = document.createElement('script');
      s.src = 'game.js';
      document.body.appendChild(s);
    })();
  </script>
</body>
</html>

star-dodger/
├── game.js            ← game logic, shared (DOES NOT change)
├── index.html         ← local version (Ads stub) — for development/testing
├── poki.html          ← Poki version
└── crazygames.html    ← CrazyGames version

Based on index.html and game.js, assemble poki.html and crazygames.html. In each one:
load the required SDK in <head>, implement window.Ads ON TOP of our interface
(loadingFinished/gameplayStart/gameplayStop/interstitial/rewarded), then load game.js.
Do NOT change game.js. Implementations: Poki — commercialBreak/rewardedBreak; CrazyGames —
SDK.ad.requestAd('midgame'/'rewarded') with callbacks. Mute sound/input during ads,
and for Poki add the anti-page-jump snippet.