Frogger Game HTML CSS JavaScript Source Code

32 Codex7

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CROSSROAD</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
  :root {
    --sidewalk: #8B7355;
    --sidewalk-line: #7A6448;
    --road: #2A2A2A;
    --road-line: #3A3A3A;
    --lane-stripe: #F5C842;
    --player: #FF6B6B;
    --player-dark: #CC4444;
    --bg: #1A1A2E;
    --ui-bg: rgba(10,10,20,0.92);
    --green: #4ECDC4;
    --red: #FF6B6B;
    --yellow: #F5C842;
    --white: #E8E8E8;
  }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Press Start 2P', monospace;
    overflow: hidden;
    user-select: none;
  }

#wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

#hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    padding: 8px 12px;
    background: var(--ui-bg);
    border: 2px solid #333;
    border-radius: 4px;
  }

.hud-block { display: flex; flex-direction: column; gap: 4px; }
  .hud-label { font-size: 6px; color: #888; letter-spacing: 1px; }
  .hud-value { font-size: 10px; color: var(--yellow); }
  #lives-display { display: flex; gap: 6px; align-items: center; }
  .life-icon { font-size: 14px; filter: drop-shadow(0 0 4px #FF6B6B); }
  .life-icon.dead { filter: grayscale(1) opacity(0.3); }

#canvas-container {
    position: relative;
    border: 3px solid #333;
    border-radius: 2px;
    box-shadow: 0 0 40px rgba(78,205,196,0.15), 0 0 80px rgba(0,0,0,0.8);
  }

canvas { display: block; image-rendering: pixelated; }

/* Overlay screens */
  .screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,20,0.93);
    z-index: 10;
    gap: 0;
  }

.screen.hidden { display: none; }

.screen-title {
    font-size: 28px;
    color: var(--yellow);
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(245,200,66,0.6), 4px 4px 0 #8B6000;
    margin-bottom: 8px;
  }

.screen-sub {
    font-size: 7px;
    color: var(--green);
    letter-spacing: 3px;
    margin-bottom: 36px;
  }

.screen-info {
    font-size: 7px;
    color: #aaa;
    line-height: 2.2;
    text-align: center;
    margin-bottom: 28px;
  }

.screen-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #111;
    background: var(--yellow);
    border: none;
    padding: 12px 28px;
    cursor: pointer;
    letter-spacing: 2px;
    border-radius: 2px;
    box-shadow: 4px 4px 0 #8B6000;
    transition: transform 0.1s, box-shadow 0.1s;
    margin-top: 4px;
  }

.screen-btn:hover {
    transform: translate(-2px,-2px);
    box-shadow: 6px 6px 0 #8B6000;
  }
  .screen-btn:active {
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 #8B6000;
  }

.go-score {
    font-size: 11px;
    color: var(--green);
    margin-bottom: 6px;
  }

.go-hi {
    font-size: 7px;
    color: #888;
    margin-bottom: 30px;
  }

.road-deco {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--yellow) 0 20px, transparent 20px 40px);
    opacity: 0.4;
  }

/* Scanline effect */
  #canvas-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.08) 2px,
      rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    border-radius: 1px;
  }

#difficulty-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: var(--red);
    letter-spacing: 2px;
    text-shadow: 0 0 10px red;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
    transition: opacity 0.3s;
  }
  #difficulty-flash.show { opacity: 1; }
</style>
</head>
<body>

<div id="wrapper">
  <div id="hud">
    <div class="hud-block">
      <div class="hud-label">SCORE</div>
      <div class="hud-value" id="score-display">00</div>
    </div>
    <div class="hud-block" style="align-items:center">
      <div class="hud-label">LIVES</div>
      <div id="lives-display">
        <span class="life-icon" id="life1">0</span>
        <span class="life-icon" id="life2">0</span>
        <span class="life-icon" id="life3">0</span>
      </div>
    </div>
    <div class="hud-block" style="align-items:flex-end">
      <div class="hud-label">BEST</div>
      <div class="hud-value" id="hi-display">00</div>
    </div>
  </div>

<div class="screen" id="startScreen">
      <div class="road-deco"></div>
      <div class="screen-title">CROSSROAD</div>
      <div class="screen-sub">a frogger-style road game</div>
      <div class="screen-info">
        ARROW KEYS or WASD to move<br>
        Reach the top to score a point<br>
        Avoid the traffic — 3 lives only<br>
        Speed increases every 3 crossings
      </div>
      <button class="screen-btn" id="startBtn">START GAME</button>
    </div>

<div class="screen hidden" id="gameOverScreen">
      <div class="road-deco"></div>
      <div class="screen-title" style="color:var(--red);text-shadow:0 0 20px rgba(255,107,107,0.6),4px 4px 0 #800">GAME OVER</div>
      <div class="screen-sub" style="color:#888">you didn't make it</div>
      <div class="go-score">SCORE: <span id="final-score">0</span></div>
      <div class="go-hi">BEST: <span id="final-hi">0</span></div>
      <button class="screen-btn" id="retryBtn">TRY AGAIN</button>
    </div>

<div id="difficulty-flash">⚡ FASTER! ⚡</div>
  </div>
</div>

// ─── Layout ───────────────────────────────────────────────
const ROWS = 13;
const CELL = H / ROWS;  // ~40px per row
const COLS = 12;
const CELL_W = W / COLS; // 40px per col

// Row types from bottom to top (index 0=bottom)
// 0 = sidewalk, 1-7 = road lanes, 8 = median, 9-11 = road lanes, 12 = top sidewalk... 
// We'll use row pixel positions
const SIDEWALK_BOTTOM_Y = H - CELL;
const SIDEWALK_TOP_Y = 0;
const ROAD_START_Y = CELL;       // row 1 from bottom
const ROAD_END_Y = H - CELL;     // excludes bottom sidewalk

// Row definitions (from TOP of canvas downwards)
// rows[0] = top (y=0..CELL), rows[12] = bottom
const ROW_DEFS = [];
for (let r = 0; r < ROWS; r++) {
  const y = r * CELL;
  if (r === 0)       ROW_DEFS.push({ type: 'sidewalk', y });
  else if (r === 6)  ROW_DEFS.push({ type: 'median', y });
  else if (r === 12) ROW_DEFS.push({ type: 'sidewalk', y });
  else               ROW_DEFS.push({ type: 'lane', y });
}

// Lane row indices (exclude sidewalks and median)
const LANE_ROWS = ROW_DEFS
  .map((d,i) => ({...d, row:i}))
  .filter(d => d.type === 'lane')
  .map(d => d.row);
// Should give rows 1-5 and 7-11

// ─── State ────────────────────────────────────────────────
let state = 'start'; // 'start' | 'playing' | 'dead' | 'over'
let score = 0, lives = 3;
let hiScore = parseInt(localStorage.getItem('crossroad_hi') || '0');
let difficulty = 1;
let diffFlashTimer = 0;

// Player
const PLAYER_START_ROW = 12;
let player = {
  row: PLAYER_START_ROW,
  col: 6,
  x: 0, y: 0,        // pixel position (animated)
  targetX: 0, targetY: 0,
  moving: false,
  moveT: 0,
  prevX: 0, prevY: 0,
  dead: false,
  deadTimer: 0,
  bounceT: 0,
};

// Cars
let cars = [];

// ─── Car colors ───────────────────────────────────────────
const CAR_PALETTES = [
  { body: '#E74C3C', roof: '#C0392B', window: '#85C1E9', light: '#F9E79F' },
  { body: '#3498DB', roof: '#2980B9', window: '#AED6F1', light: '#F9E79F' },
  { body: '#2ECC71', roof: '#27AE60', window: '#A9DFBF', light: '#F9E79F' },
  { body: '#9B59B6', roof: '#8E44AD', window: '#D2B4DE', light: '#F9E79F' },
  { body: '#E67E22', roof: '#D35400', window: '#FAD7A0', light: '#F9E79F' },
  { body: '#F1C40F', roof: '#D4AC0D', window: '#7FB3D3', light: '#FDFEFE' },
  { body: '#ECF0F1', roof: '#BDC3C7', window: '#85C1E9', light: '#F9E79F' },
  { body: '#1ABC9C', roof: '#17A589', window: '#A2D9CE', light: '#F9E79F' },
];

// ─── Lane configs ──────────────────────────────────────────
function makeLanes() {
  const configs = [];
  LANE_ROWS.forEach((row, i) => {
    const dir = (i % 2 === 0) ? 1 : -1; // alternating direction
    const baseSpeed = 0.6 + (i * 0.18);
    const gap = 180 - i * 8;
    configs.push({ row, dir, baseSpeed, gap, palette: CAR_PALETTES[i % CAR_PALETTES.length] });
  });
  return configs;
}

let laneConfigs = [];

// ─── Player helpers ────────────────────────────────────────
function rowToY(row) { return ROW_DEFS[row].y; }
function colToX(col) { return col * CELL_W; }

function snapPlayer() {
  player.x = colToX(player.col);
  player.y = rowToY(player.row);
  player.targetX = player.x;
  player.targetY = player.y;
  player.prevX = player.x;
  player.prevY = player.y;
}

function resetPlayer() {
  player.row = PLAYER_START_ROW;
  player.col = 5;
  player.dead = false;
  player.moving = false;
  player.moveT = 0;
  player.bounceT = 0;
  snapPlayer();
}

// ─── Input ─────────────────────────────────────────────────
const MOVE_DUR = 0.12; // seconds for move animation

document.addEventListener('keydown', e => {
  if (state === 'start' || state === 'over') return;
  if (state === 'dead') return;
  if (player.moving || player.dead) return;

let dr = 0, dc = 0;
  switch(e.key) {
    case 'ArrowUp': case 'w': case 'W': dr = -1; break;
    case 'ArrowDown': case 's': case 'S': dr = 1; break;
    case 'ArrowLeft': case 'a': case 'A': dc = -1; break;
    case 'ArrowRight': case 'd': case 'D': dc = 1; break;
    default: return;
  }
  e.preventDefault();

const newRow = player.row + dr;
  const newCol = player.col + dc;

if (newRow < 0 || newRow >= ROWS) return;
  if (newCol < 0 || newCol >= COLS) return;

player.prevX = player.x;
  player.prevY = player.y;
  player.row = newRow;
  player.col = newCol;
  player.targetX = colToX(newCol);
  player.targetY = rowToY(newRow);
  player.moving = true;
  player.moveT = 0;
});

// ─── Game logic ────────────────────────────────────────────
function checkReachedTop() {
  if (player.row === 0) {
    score++;
    updateHUD();
    if (score > hiScore) {
      hiScore = score;
      localStorage.setItem('crossroad_hi', hiScore);
    }
    // Difficulty bump
    if (score % 3 === 0) {
      difficulty += 0.35;
      initCars();
      showDiffFlash();
    }
    // Briefly flash then reset
    player.moving = false;
    player.dead = false;
    setTimeout(() => resetPlayer(), 300);
  }
}

function showDiffFlash() {
  const el = document.getElementById('difficulty-flash');
  el.classList.add('show');
  setTimeout(() => el.classList.remove('show'), 1500);
}

function killPlayer() {
  if (player.dead) return;
  player.dead = true;
  player.deadTimer = 1.2;
  lives--;
  updateHUD();
  if (lives <= 0) {
    state = 'dead';
  }
}

function updateHUD() {
  document.getElementById('score-display').textContent = String(score).padStart(2,'0');
  document.getElementById('hi-display').textContent = String(hiScore).padStart(2,'0');
  const icons = ['life1','life2','life3'];
  icons.forEach((id, i) => {
    const el = document.getElementById(id);
    el.classList.toggle('dead', i >= lives);
  });
}

function startGame() {
  score = 0; lives = 3; difficulty = 1;
  updateHUD();
  initCars();
  resetPlayer();
  state = 'playing';
  document.getElementById('startScreen').classList.add('hidden');
  document.getElementById('gameOverScreen').classList.add('hidden');
}

function showGameOver() {
  document.getElementById('final-score').textContent = score;
  document.getElementById('final-hi').textContent = hiScore;
  document.getElementById('gameOverScreen').classList.remove('hidden');
  state = 'over';
}

document.getElementById('startBtn').addEventListener('click', startGame);
document.getElementById('retryBtn').addEventListener('click', startGame);

// ─── Drawing ───────────────────────────────────────────────
function drawBackground() {
  // Fill everything
  ctx.fillStyle = '#1E1E1E';
  ctx.fillRect(0, 0, W, H);

ROW_DEFS.forEach((row, i) => {
    if (row.type === 'sidewalk') {
      // Sidewalk
      ctx.fillStyle = '#7A6A4F';
      ctx.fillRect(0, row.y, W, CELL);
      // Sidewalk texture (small dots)
      ctx.fillStyle = '#6B5D44';
      for (let x = 4; x < W; x += 12) {
        for (let y = row.y + 4; y < row.y + CELL; y += 12) {
          ctx.fillRect(x, y, 4, 4);
        }
      }
      // Edge line
      ctx.fillStyle = '#9B8B6A';
      ctx.fillRect(0, row.type === 'sidewalk' && i === 0 ? row.y + CELL - 3 : row.y, W, 3);

} else if (row.type === 'median') {
      // Median / divider strip
      ctx.fillStyle = '#3A3A3A';
      ctx.fillRect(0, row.y, W, CELL);
      // Yellow dashes
      ctx.fillStyle = '#F5C842';
      for (let x = 0; x < W; x += 32) {
        ctx.fillRect(x, row.y + CELL/2 - 3, 20, 6);
      }

} else {
      // Road lane
      ctx.fillStyle = (i % 2 === 0) ? '#282828' : '#242424';
      ctx.fillRect(0, row.y, W, CELL);
      // Lane edge dashes (white)
      ctx.fillStyle = 'rgba(255,255,255,0.12)';
      ctx.fillRect(0, row.y, W, 2);
      // Direction arrow hint (subtle)
      const dir = LANE_ROWS.includes(i) ? (LANE_ROWS.indexOf(i) % 2 === 0 ? 1 : -1) : 0;
      ctx.fillStyle = 'rgba(255,255,255,0.04)';
      for (let x = 20; x < W; x += 80) {
        ctx.save();
        ctx.translate(x + (dir === -1 ? 40 : 0), row.y + CELL/2);
        ctx.scale(dir, 1);
        ctx.beginPath();
        ctx.moveTo(0, -5); ctx.lineTo(14, 0); ctx.lineTo(0, 5);
        ctx.fill();
        ctx.restore();
      }
    }
  });
}

function drawCar(car) {
  const x = Math.round(car.x);
  const y = Math.round(car.y + 4);
  const w = car.w;
  const h = car.h;
  const p = car.palette;
  const flip = car.dir === -1;

ctx.save();
  if (flip) {
    ctx.translate(x + w, y);
    ctx.scale(-1, 1);
    ctx.translate(-0, 0);
  } else {
    ctx.translate(x, y);
  }

// Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.35)';
  ctx.fillRect(3, h - 3, w - 4, 5);

// Body
  ctx.fillStyle = p.body;
  ctx.fillRect(0, 4, w, h - 6);

// Roof (smaller, centered)
  const roofInset = Math.floor(w * 0.18);
  const roofW = w - roofInset * 2;
  const roofH = Math.floor(h * 0.45);
  ctx.fillStyle = p.roof;
  ctx.fillRect(roofInset, 2, roofW, roofH + 2);

// Windows
  ctx.fillStyle = p.window;
  ctx.globalAlpha = 0.85;
  // Windshield
  ctx.fillRect(roofInset + 2, 3, Math.floor(roofW * 0.38), roofH);
  // Rear window
  ctx.fillRect(roofInset + Math.floor(roofW * 0.62), 3, Math.floor(roofW * 0.36), roofH);
  ctx.globalAlpha = 1;

// Headlights (front = right side)
  ctx.fillStyle = p.light;
  ctx.fillRect(w - 5, 5, 4, 4);
  ctx.fillRect(w - 5, h - 10, 4, 4);

// Taillights (rear = left)
  ctx.fillStyle = '#FF4444';
  ctx.fillRect(1, 5, 4, 4);
  ctx.fillRect(1, h - 10, 4, 4);

// Wheels (4 corners)
  ctx.fillStyle = '#111';
  const wy = [3, h - 7];
  const wx = [4, w - 10];
  wy.forEach(yw => wx.forEach(xw => {
    ctx.fillRect(xw, yw, 8, 5);
    ctx.fillStyle = '#555';
    ctx.fillRect(xw + 2, yw + 1, 4, 3);
    ctx.fillStyle = '#111';
  }));

ctx.restore();
}

function drawPlayer() {
  const px = Math.round(player.x) + 2;
  const py = Math.round(player.y) + 2;
  const pw = CELL_W - 4;
  const ph = CELL - 4;

const bounce = player.dead ? 0 : Math.sin(player.bounceT * 6) * 2;
  const deadScale = player.dead ? Math.max(0, 1 - (1.2 - player.deadTimer) * 1.5) : 1;

ctx.save();
  ctx.translate(px + pw/2, py + ph/2 + bounce);
  ctx.scale(deadScale, deadScale);

if (player.dead) {
    // Spinning X
    ctx.rotate((1.2 - player.deadTimer) * 8);
    ctx.fillStyle = '#FF4444';
    ctx.font = '20px Press Start 2P';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('✕', 0, 0);
    ctx.restore();
    return;
  }

// Body (frog-like character using CSS shapes)
  // Main body
  ctx.fillStyle = '#4ECDC4';
  ctx.fillRect(-11, -9, 22, 16);

// Head
  ctx.fillStyle = '#45B7AA';
  ctx.fillRect(-8, -14, 16, 10);

// Eyes
  ctx.fillStyle = '#FDFEFE';
  ctx.fillRect(-7, -16, 5, 5);
  ctx.fillRect(2, -16, 5, 5);
  ctx.fillStyle = '#2C3E50';
  ctx.fillRect(-5, -15, 3, 3);
  ctx.fillRect(4, -15, 3, 3);

// Mouth
  ctx.fillStyle = '#2C3E50';
  ctx.fillRect(-4, -7, 8, 2);

// Legs
  ctx.fillStyle = '#3DBDB6';
  ctx.fillRect(-14, -3, 4, 10);
  ctx.fillRect(10, -3, 4, 10);
  ctx.fillRect(-14, 5, 5, 4);
  ctx.fillRect(9, 5, 5, 4);

// Highlight
  ctx.fillStyle = 'rgba(255,255,255,0.25)';
  ctx.fillRect(-9, -13, 6, 4);

ctx.restore();

// Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.2)';
  ctx.fillRect(px + 4, py + ph - 2, pw - 8, 4);
}

// ─── Collision ─────────────────────────────────────────────
function checkCollision() {
  if (player.dead) return;
  const px = player.x + 6;
  const py = player.y + 4;
  const pw = CELL_W - 12;
  const ph = CELL - 8;

for (const car of cars) {
    if (car.row !== player.row) continue;
    const cx = car.x;
    const cy = car.y + 4;
    const cw = car.w;
    const ch = car.h;
    if (px < cx + cw && px + pw > cx && py < cy + ch && py + ph > cy) {
      killPlayer();
      return;
    }
  }
}

// ─── Game Loop ─────────────────────────────────────────────
let lastTime = 0;

function update(dt) {
  if (state !== 'playing' && state !== 'dead') return;

// Player bounce animation
  player.bounceT += dt;

// Player movement animation
  if (player.moving) {
    player.moveT += dt / MOVE_DUR;
    if (player.moveT >= 1) {
      player.moveT = 1;
      player.moving = false;
    }
    const t = easeOutCubic(player.moveT);
    player.x = player.prevX + (player.targetX - player.prevX) * t;
    player.y = player.prevY + (player.targetY - player.prevY) * t;

if (!player.moving) {
      checkReachedTop();
    }
  }

// Update cars
  cars.forEach(car => {
    car.x += car.speed * difficulty * (60 * dt);
    car.wobble += dt * 2;
    // Wrap around
    if (car.dir === 1 && car.x > W + 20) car.x = -car.w - 20;
    if (car.dir === -1 && car.x < -car.w - 20) car.x = W + 20;
  });

// Collision
  if (!player.moving && !player.dead) checkCollision();

// Dead timer
  if (player.dead) {
    player.deadTimer -= dt;
    if (player.deadTimer <= 0) {
      if (lives <= 0) {
        showGameOver();
      } else {
        resetPlayer();
        state = 'playing';
      }
    }
  }
}

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function draw() {
  ctx.clearRect(0, 0, W, H);
  drawBackground();

cars.forEach(drawCar);
  drawPlayer();

// Grid overlay (subtle)
  ctx.strokeStyle = 'rgba(255,255,255,0.02)';
  ctx.lineWidth = 1;
  for (let x = 0; x <= W; x += CELL_W) {
    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
  }
}

function loop(ts) {
  const dt = Math.min((ts - lastTime) / 1000, 0.05);
  lastTime = ts;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}

// ─── Init ──────────────────────────────────────────────────
updateHUD();
resetPlayer();
snapPlayer();
requestAnimationFrame(ts => { lastTime = ts; requestAnimationFrame(loop); });
</script>
</body>
</html>

CSS

Frogger Game HTML CSS JavaScript Source Code

Recommended