Jeu de passes de football rétro en JavaScript Canvas

21 0 Jeux rowekeavarie083 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu de passes de football rétro en JavaScript Canvas

Recommandé

20 October 2026

Chargeur de jeu Web HTML5 réactif en JavaScript

9 September 2025

Conteneur d'animation CSS Pixel

11 July 2025

Un code de Mete

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Retro Bowl - Mini Edition</title>
<style>
  body { margin: 0; background: #1a1a1d; color: #fff; font-family: 'Courier New', monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; user-select: none; }
  canvas { background: #2e8b57; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.6); cursor: crosshair; }
  #hud { width: 800px; display: flex; justify-content: space-between; background: #111; padding: 10px 15px; border: 4px solid #fff; border-bottom: none; box-sizing: border-box; font-weight: bold; font-size: 16px; }
  .controls { margin-top: 10px; font-size: 14px; color: #ccc; text-align: center; }
  button { margin-left: 15px; padding: 4px 12px; font-family: inherit; font-weight: bold; background: #e67e22; color: #fff; border: 2px solid #fff; cursor: pointer; }
  button:hover { background: #d35400; }
</style>
</head>
<body>
<div id="hud">
  <div id="down-info">1ST & 10 | BALL ON 20</div>
  <div id="score-info">SCORE: 0</div>
  <div><button onclick="resetDrive()">NEW DRIVE</button></div>
</div>
<canvas id="game" width="800" height="420"></canvas>
<div class="controls">
  <b>PASSING:</b> Click & drag backward anywhere to aim, release to throw | <b>RUNNING:</b> UP / DOWN arrows (or W / S) to juke defenders
</div>

const FIELD_LENGTH = 100; // yards
const PX_PER_YARD = 16;

let state = 'PRE_SNAP'; // PRE_SNAP, AIMING, IN_AIR, RUNNING, PLAY_OVER, TD, TURNOVER
let down = 1;
let lineOfScrimmage = 20;
let firstDownLine = 30;
let score = 0;
let message = 'DRAG BACKWARD TO SNAP & AIM';
let msgTimer = 0;

let dragStart = null;
let dragCurrent = null;

let qb = { x: 0, y: 210 };
let ball = { x: 0, y: 210, z: 0, vx: 0, vy: 0, vz: 0, active: false };
let receivers = [];
let defenders = [];
let carrier = null;

function initPlay() {
  state = 'PRE_SNAP';
  dragStart = null;
  dragCurrent = null;
  carrier = null;
  ball.active = false;

qb = { x: lineOfScrimmage - 4, y: 210 };

receivers = [
    { x: lineOfScrimmage, y: 70, route: 'STREAK', speed: 12.5, caught: false },
    { x: lineOfScrimmage, y: 150, route: 'SLANT', speed: 12.0, caught: false },
    { x: lineOfScrimmage, y: 340, route: 'POST', speed: 13.0, caught: false }
  ];

defenders = [
    { x: lineOfScrimmage + 7, y: 70, speed: 10.2, targetIdx: 0 },
    { x: lineOfScrimmage + 6, y: 155, speed: 10.0, targetIdx: 1 },
    { x: lineOfScrimmage + 8, y: 340, speed: 10.4, targetIdx: 2 },
    { x: lineOfScrimmage + 14, y: 210, speed: 9.8, targetIdx: -1 } // Safety
  ];
  updateHUD();
}

function resetDrive() {
  down = 1;
  lineOfScrimmage = 20;
  firstDownLine = 30;
  score = 0;
  message = 'DRAG BACKWARD TO SNAP & AIM';
  initPlay();
}

canvas.addEventListener('mousedown', (e) => {
  if (state === 'PRE_SNAP') {
    state = 'AIMING';
    const rect = canvas.getBoundingClientRect();
    dragStart = { x: e.clientX - rect.left, y: e.clientY - rect.top };
    dragCurrent = { ...dragStart };
    message = '';
  }
});

window.addEventListener('mouseup', () => {
  if (state === 'AIMING' && dragStart && dragCurrent) {
    const dx = dragStart.x - dragCurrent.x;
    const dy = dragStart.y - dragCurrent.y;
    const power = Math.min(Math.hypot(dx, dy), 180);

if (power > 15) {
      const angle = Math.atan2(dy, dx);
      const throwSpeed = (power / 180) * 28 + 8;
      ball = {
        x: qb.x,
        y: qb.y,
        z: 5,
        vx: Math.cos(angle) * throwSpeed,
        vy: Math.sin(angle) * throwSpeed * PX_PER_YARD,
        vz: (power / 180) * 14 + 4,
        active: true
      };
      state = 'IN_AIR';
    } else {
      state = 'PRE_SNAP';
    }
    dragStart = null;
    dragCurrent = null;
  }
});

const keys = {};
window.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; });
window.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; });

function endPlay(newYardLine, reason) {
  state = 'PLAY_OVER';
  message = reason;

if (newYardLine >= 100) {
    score += 7;
    state = 'TD';
    message = 'TOUCHDOWN! (+7 PTS)';
    updateHUD();
    setTimeout(() => {
      down = 1;
      lineOfScrimmage = 20;
      firstDownLine = 30;
      message = 'DRAG BACKWARD TO SNAP & AIM';
      initPlay();
    }, 2200);
    return;
  }

lineOfScrimmage = Math.max(1, newYardLine);

if (lineOfScrimmage >= firstDownLine) {
    down = 1;
    firstDownLine = Math.min(100, lineOfScrimmage + 10);
    message = 'FIRST DOWN!';
  } else {
    down++;
    if (down > 4) {
      state = 'TURNOVER';
      message = 'TURNOVER ON DOWNS!';
      setTimeout(resetDrive, 2200);
      return;
    }
  }

updateHUD();
  setTimeout(() => {
    message = 'DRAG BACKWARD TO SNAP & AIM';
    initPlay();
  }, 1600);
}

let lastTime = performance.now();
function update(dt) {
  if (state === 'AIMING' || state === 'IN_AIR') {
    // Move receivers
    receivers.forEach((r) => {
      r.x += r.speed * dt;
      if (r.route === 'SLANT' && r.x > lineOfScrimmage + 4) r.y += 65 * dt;
      if (r.route === 'POST' && r.x > lineOfScrimmage + 10) r.y -= 75 * dt;
      r.y = Math.max(25, Math.min(395, r.y));
    });

// Move defenders
    defenders.forEach((d) => {
      if (d.targetIdx >= 0) {
        const target = receivers[d.targetIdx];
        const dx = (target.x + 2) - d.x;
        const dy = target.y - d.y;
        const dist = Math.hypot(dx, dy / PX_PER_YARD);
        if (dist > 0.1) {
          d.x += (dx / dist) * d.speed * dt;
          d.y += ((dy / PX_PER_YARD) / dist) * d.speed * PX_PER_YARD * dt;
        }
      } else {
        // Safety patrols deep middle
        d.x += 4 * dt;
      }
    });
  }

if (state === 'IN_AIR' && ball.active) {
    ball.x += ball.vx * dt;
    ball.y += ball.vy * dt;
    ball.z += ball.vz * dt;
    ball.vz -= 24 * dt; // Gravity

// Check catch when ball is low enough
    if (ball.z <= 8 && ball.z >= 0) {
      for (let r of receivers) {
        const distYards = Math.hypot(r.x - ball.x, (r.y - ball.y) / PX_PER_YARD);
        if (distYards < 1.6) {
          r.caught = true;
          carrier = r;
          ball.active = false;
          state = 'RUNNING';
          message = 'CAUGHT! USE UP/DOWN TO RUN!';
          break;
        }
      }
    }

// Check ground hit (Incomplete)
    if (ball.z <= 0) {
      ball.active = false;
      endPlay(lineOfScrimmage, 'INCOMPLETE PASS!');
    }
  }

if (state === 'RUNNING' && carrier) {
    carrier.x += (carrier.speed + 1.2) * dt;
    if (keys['arrowup'] || keys['w']) carrier.y -= 170 * dt;
    if (keys['arrowdown'] || keys['s']) carrier.y += 170 * dt;
    carrier.y = Math.max(20, Math.min(400, carrier.y));

if (carrier.x >= 100) {
      endPlay(100, 'TOUCHDOWN!');
      return;
    }

// Defenders chase carrier
    for (let d of defenders) {
      const dx = carrier.x - d.x;
      const dy = (carrier.y - d.y) / PX_PER_YARD;
      const dist = Math.hypot(dx, dy);
      if (dist > 0.1) {
        d.x += (dx / dist) * (d.speed + 0.8) * dt;
        d.y += (dy / dist) * (d.speed + 0.8) * PX_PER_YARD * dt;
      }
      // Tackle check
      if (dist < 1.1) {
        endPlay(carrier.x, `TACKLED AT THE ${Math.round(carrier.x)}!`);
        break;
      }
    }
  }
}

function drawPlayer(xPx, yPx, color, helmetColor, hasBall = false) {
  // Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.35)';
  ctx.beginPath();
  ctx.ellipse(xPx, yPx + 8, 10, 5, 0, 0, Math.PI * 2);
  ctx.fill();

// Body
  ctx.fillStyle = color;
  ctx.fillRect(xPx - 7, yPx - 8, 14, 14);

// Helmet
  ctx.fillStyle = helmetColor;
  ctx.beginPath();
  ctx.arc(xPx, yPx - 11, 6, 0, Math.PI * 2);
  ctx.fill();

if (hasBall) {
    ctx.fillStyle = '#8B4513';
    ctx.beginPath();
    ctx.ellipse(xPx + 6, yPx - 2, 5, 3, 0.3, 0, Math.PI * 2);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

// Camera tracks QB or Ball Carrier
  let focusX = carrier ? carrier.x : (ball.active ? ball.x : qb.x);
  let camX = (focusX - 12) * PX_PER_YARD;
  camX = Math.max(-60, Math.min(105 * PX_PER_YARD - canvas.width, camX));

ctx.save();
  ctx.translate(-camX, 0);

// Endzone (100 to 110 yards)
  ctx.fillStyle = '#1e3799';
  ctx.fillRect(100 * PX_PER_YARD, 0, 12 * PX_PER_YARD, canvas.height);
  ctx.fillStyle = 'rgba(255,255,255,0.25)';
  ctx.font = 'bold 42px Courier New';
  ctx.fillText('TOUCHDOWN', 102 * PX_PER_YARD, 220);

// Yard lines
  ctx.strokeStyle = 'rgba(255,255,255,0.5)';
  ctx.lineWidth = 2;
  ctx.font = 'bold 16px Courier New';
  ctx.fillStyle = 'rgba(255,255,255,0.7)';

for (let y = 0; y <= 100; y += 5) {
    let x = y * PX_PER_YARD;
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();

if (y % 10 === 0 && y > 0 && y < 100) {
      let label = y <= 50 ? y : 100 - y;
      ctx.fillText(label, x - 10, 25);
      ctx.fillText(label, x - 10, canvas.height - 12);
    }
  }

// Line of Scrimmage (Blue)
  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(lineOfScrimmage * PX_PER_YARD, 0);
  ctx.lineTo(lineOfScrimmage * PX_PER_YARD, canvas.height);
  ctx.stroke();

// First Down Line (Yellow)

CSS

Commentaires 0

…