Code source HTML, CSS et JavaScript du jeu Frogger

197 Codex7

Ouvrir dans l'éditeur Publiez votre code

Code source HTML, CSS et JavaScript du jeu Frogger

Recommandé

27 March 2026

Polytrack Game Loader et proxy de travailleur

18 December 2023

Animation de texte en HTML et CSS

12 December 2025

Jeu de ping-pong rétro en JavaScript avec manches spéciales

HTML

<!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