Frogger

// Frogger. Hop up from the bottom, cross the road, ride logs and turtles
// across the river, fill the 5 goal slots at the top. 3 lives.

const GOALS = 5;
const HOP_DUR = 0.12;
const SLOTS = [1, 4, 7, 10, 13];

// row, dir (+1 right / -1 left), speed (tiles/s), spacing, len, kind, color
const LANES = [
  { row: 1, dir: -1, speed: 1.8, spacing: 6, len: 3, kind: "log" },
  { row: 2, dir:  1, speed: 1.2, spacing: 7, len: 2, kind: "turtle" },
  { row: 3, dir: -1, speed: 2.4, spacing: 8, len: 4, kind: "log" },
  { row: 4, dir:  1, speed: 1.6, spacing: 5, len: 2, kind: "log" },
  { row: 5, dir: -1, speed: 1.0, spacing: 6, len: 3, kind: "turtle" },
  { row: 7, dir: -1, speed: 2.0, spacing: 5, len: 1, kind: "car",   color: "#ff3b30" },
  { row: 8, dir:  1, speed: 1.4, spacing: 6, len: 1, kind: "car",   color: "#ffcc00" },
  { row: 9, dir: -1, speed: 3.0, spacing: 8, len: 1, kind: "car",   color: "#0a84ff" },
  { row:10, dir:  1, speed: 2.2, spacing: 5, len: 2, kind: "truck", color: "#af52de" },
  { row:11, dir: -1, speed: 1.6, spacing: 6, len: 1, kind: "car",   color: "#34c759" },
];

let entities, frog, lives, score, goals, alive, won, message, msgT;

function reset(fullReset) {
  entities = [];
  for (let i = 0; i < LANES.length; i++) {
    const L = LANES[i];
    const off = (i * 1.7) % L.spacing;
    for (let x = -L.spacing * 2; x < 32; x += L.spacing) {
      entities.push({ laneIdx: i, x: x + off });
    }
  }
  frog = { col: 7, row: 12, hopT: 0, fromCol: 7, fromRow: 12, toCol: 7, toRow: 12 };
  if (fullReset) {
    lives = 3; score = 0; goals = new Array(GOALS).fill(false);
    alive = true; won = false;
  }
  message = ""; msgT = 0;
}

function init() { reset(true); }

function offsets(w, h) {
  const t = Math.min(w / 15, h / 13);
  return { t, ox: (w - t * 15) / 2, oy: (h - t * 13) / 2 };
}

function tryHop(dCol, dRow) {
  if (frog.hopT > 0) return;
  const nc = frog.col + dCol, nr = frog.row + dRow;
  if (nc < 0 || nc > 14 || nr < 0 || nr > 12) return;
  frog.fromCol = frog.col; frog.fromRow = frog.row;
  frog.toCol = Math.round(nc); frog.toRow = nr;
  frog.hopT = 1;
  score += 1;
}

// Turtles cycle: visible (rideable) → diving warning (still rideable) → underwater.
function turtlePhase(e, L, time) {
  return (time * 0.7 + e.x * 0.13 + L.row * 0.9) % 4.2;
}
function turtleVisible(p) { return p < 3.6; }
function turtleRideable(p) { return p < 3.0; }

function loseLife(reason) {
  lives--; message = reason; msgT = 1.0;
  if (lives <= 0) { alive = false; return; }
  frog.col = 7; frog.row = 12; frog.hopT = 0;
  frog.fromCol = 7; frog.fromRow = 12; frog.toCol = 7; frog.toRow = 12;
}

function laneOf(row) {
  for (let i = 0; i < LANES.length; i++) if (LANES[i].row === row) return i;
  return -1;
}

function tick({ ctx, dt, width, height, input, time }) {
  if (dt > 0.05) dt = 0.05;
  if (msgT > 0) msgT -= dt;

  if (!alive || won) {
    const clicks = input.consumeClicks();
    if (clicks.length || input.justPressed("r") || input.justPressed("R") || input.justPressed(" ")) {
      reset(true);
    }
    draw(ctx, width, height, time);
    drawOverlay(ctx, width, height);
    return;
  }

  // Move lane entities.
  for (const e of entities) {
    const L = LANES[e.laneIdx];
    e.x += L.dir * L.speed * dt;
    if (L.dir > 0 && e.x > 16) e.x -= 16 + L.spacing * 2;
    if (L.dir < 0 && e.x < -1 - L.len - L.spacing) e.x += 16 + L.spacing * 2;
  }

  // Input.
  if (frog.hopT === 0) {
    if (input.justPressed("ArrowUp")    || input.justPressed("w") || input.justPressed("W")) tryHop(0, -1);
    else if (input.justPressed("ArrowDown")  || input.justPressed("s") || input.justPressed("S")) tryHop(0, 1);
    else if (input.justPressed("ArrowLeft")  || input.justPressed("a") || input.justPressed("A")) tryHop(-1, 0);
    else if (input.justPressed("ArrowRight") || input.justPressed("d") || input.justPressed("D")) tryHop(1, 0);
    const clicks = input.consumeClicks();
    if (clicks.length && frog.hopT === 0) {
      const { t, ox, oy } = offsets(width, height);
      const fx = ox + (frog.col + 0.5) * t, fy = oy + (frog.row + 0.5) * t;
      const dx = clicks[0].x - fx, dy = clicks[0].y - fy;
      if (Math.abs(dx) > Math.abs(dy)) tryHop(dx > 0 ? 1 : -1, 0);
      else tryHop(0, dy > 0 ? 1 : -1);
    }
  }

  // Advance hop.
  if (frog.hopT > 0) {
    frog.hopT -= dt / HOP_DUR;
    if (frog.hopT <= 0) {
      frog.hopT = 0;
      frog.col = frog.toCol; frog.row = frog.toRow;
      if (frog.row === 0) {
        let landed = -1;
        for (let i = 0; i < SLOTS.length; i++) if (frog.col === SLOTS[i]) { landed = i; break; }
        if (landed === -1) loseLife("missed the lily pad");
        else if (goals[landed]) loseLife("slot already taken");
        else {
          goals[landed] = true; score += 50;
          message = "lily pad!"; msgT = 1.0;
          if (goals.every(Boolean)) won = true;
          else { frog.col = 7; frog.row = 12; }
        }
      }
    }
  }

  // Hazards / carriers on current row (only when settled).
  const lane = laneOf(frog.row);
  if (lane !== -1 && frog.hopT === 0) {
    const L = LANES[lane];
    if (L.kind === "log" || L.kind === "turtle") {
      let carrier = null;
      for (const e of entities) {
        if (e.laneIdx !== lane) continue;
        if (L.kind === "turtle" && !turtleVisible(turtlePhase(e, L, time))) continue;
        if (frog.col >= e.x && frog.col < e.x + L.len) { carrier = e; break; }
      }
      if (!carrier) loseLife("splash!");
      else if (L.kind === "turtle" && !turtleRideable(turtlePhase(carrier, L, time))) loseLife("drowned");
      else {
        const newCol = frog.col + L.dir * L.speed * dt;
        if (newCol < 0 || newCol > 14) loseLife("washed away");
        else frog.col = newCol;
      }
    } else {
      for (const e of entities) {
        if (e.laneIdx !== lane) continue;
        if (frog.col + 0.85 > e.x && frog.col + 0.15 < e.x + L.len) { loseLife("squashed"); break; }
      }
    }
  }

  draw(ctx, width, height, time);
}

function draw(ctx, width, height, time) {
  const { t, ox, oy } = offsets(width, height);
  ctx.fillStyle = "#06070d";
  ctx.fillRect(0, 0, width, height);

  // Row backgrounds.
  const ROW_BG = ["#0e2a14","#0a2a55","#0a2a55","#0a2a55","#0a2a55","#0a2a55","#2a2a32","#1a1a22","#1a1a22","#1a1a22","#1a1a22","#1a1a22","#1a3a1f"];
  for (let r = 0; r < 13; r++) {
    ctx.fillStyle = ROW_BG[r];
    ctx.fillRect(ox, oy + r * t, t * 15, t);
  }

  // Road stripes.
  ctx.strokeStyle = "#3a3a44"; ctx.lineWidth = 1;
  ctx.setLineDash([t * 0.4, t * 0.3]);
  for (let r = 7; r < 12; r++) {
    ctx.beginPath();
    ctx.moveTo(ox, oy + r * t); ctx.lineTo(ox + 15 * t, oy + r * t);
    ctx.stroke();
  }
  ctx.setLineDash([]);

  // Goal slots.
  for (let i = 0; i < SLOTS.length; i++) {
    const cx = ox + (SLOTS[i] + 0.5) * t, cy = oy + 0.5 * t;
    ctx.fillStyle = goals[i] ? "#ffcc00" : "#1a3a25";
    ctx.beginPath(); ctx.arc(cx, cy, t * 0.38, 0, Math.PI * 2); ctx.fill();
    if (goals[i]) {
      ctx.fillStyle = "#34c759";
      ctx.beginPath(); ctx.arc(cx, cy, t * 0.22, 0, Math.PI * 2); ctx.fill();
    }
  }

  // Entities.
  for (const e of entities) {
    const L = LANES[e.laneIdx];
    const x = ox + e.x * t, y = oy + L.row * t;
    if (L.kind === "log") {
      ctx.fillStyle = "#8a5a2a";
      ctx.fillRect(x + 2, y + t * 0.15, L.len * t - 4, t * 0.7);
      ctx.strokeStyle = "#5a3a1a"; ctx.lineWidth = 1;
      for (let k = 1; k < L.len * 2; k++) {
        const sx = x + k * t * 0.5;
        ctx.beginPath(); ctx.moveTo(sx, y + t * 0.2); ctx.lineTo(sx, y + t * 0.8); ctx.stroke();
      }
    } else if (L.kind === "turtle") {
      for (let k = 0; k < L.len; k++) {
        const ph = turtlePhase(e, L, time);
        if (!turtleVisible(ph)) continue;
        const tx = x + k * t;
        ctx.fillStyle = turtleRideable(ph) ? "#1f7a3a" : "#0a4a22";
        ctx.beginPath(); ctx.arc(tx + t * 0.5, y + t * 0.5, t * 0.32, 0, Math.PI * 2); ctx.fill();
        ctx.strokeStyle = "#0a2a14"; ctx.lineWidth = 1;
        ctx.beginPath(); ctx.arc(tx + t * 0.5, y + t * 0.5, t * 0.18, 0, Math.PI * 2); ctx.stroke();
      }
    } else {
      ctx.fillStyle = L.color;
      ctx.fillRect(x + 2, y + t * 0.12, L.len * t - 4, t * 0.76);
      ctx.fillStyle = "rgba(255,255,255,0.55)";
      const wx = L.dir > 0 ? x + L.len * t - t * 0.45 : x + t * 0.1;
      ctx.fillRect(wx, y + t * 0.25, t * 0.32, t * 0.5);
    }
  }

  // Frog.
  let fx = frog.col, fy = frog.row;
  if (frog.hopT > 0) {
    const p = 1 - frog.hopT;
    fx = frog.fromCol + (frog.toCol - frog.fromCol) * p;
    fy = frog.fromRow + (frog.toRow - frog.fromRow) * p;
  }
  const cx = ox + (fx + 0.5) * t;
  const lift = frog.hopT > 0 ? Math.sin((1 - frog.hopT) * Math.PI) * t * 0.18 : 0;
  const cy = oy + (fy + 0.5) * t - lift;
  ctx.fillStyle = "#34c759";
  ctx.beginPath(); ctx.arc(cx, cy, t * 0.34, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "#ffffff";
  ctx.beginPath(); ctx.arc(cx - t * 0.12, cy - t * 0.10, t * 0.07, 0, Math.PI * 2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx + t * 0.12, cy - t * 0.10, t * 0.07, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "#06070d";
  ctx.beginPath(); ctx.arc(cx - t * 0.12, cy - t * 0.10, t * 0.03, 0, Math.PI * 2); ctx.fill();
  ctx.beginPath(); ctx.arc(cx + t * 0.12, cy - t * 0.10, t * 0.03, 0, Math.PI * 2); ctx.fill();

  // HUD.
  ctx.fillStyle = "#e8e8f0";
  ctx.font = `bold ${Math.max(11, Math.round(t * 0.42))}px system-ui, sans-serif`;
  ctx.textAlign = "left"; ctx.fillText(`Score ${score}`, ox + 4, Math.max(14, oy - 4));
  ctx.textAlign = "right"; ctx.fillText(`Lives ${lives}`, ox + 15 * t - 4, Math.max(14, oy - 4));
  ctx.textAlign = "center";
  const hudY = Math.min(height - 4, oy + 13 * t + 14);
  if (msgT > 0 && message) {
    ctx.fillStyle = "#ffcc00";
    ctx.fillText(message, ox + 15 * t / 2, hudY);
  } else {
    ctx.fillStyle = "#9aa0b4";
    ctx.font = `${Math.max(10, Math.round(t * 0.32))}px system-ui, sans-serif`;
    ctx.fillText("arrows / WASD or tap to hop", ox + 15 * t / 2, hudY);
  }
}

function drawOverlay(ctx, width, height) {
  ctx.fillStyle = "rgba(6,7,13,0.72)";
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "#ffffff";
  ctx.textAlign = "center";
  ctx.font = "bold 24px system-ui, sans-serif";
  ctx.fillText(won ? "All lily pads filled!" : "Game over", width / 2, height / 2 - 8);
  ctx.font = "13px system-ui, sans-serif";
  ctx.fillStyle = "#c8ccdc";
  ctx.fillText(`Score ${score} — tap or press R to restart`, width / 2, height / 2 + 16);
}