Retro Football Passing Game in JavaScript Canvas

20 0 Games rowekeavarie083 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Retro Football Passing Game in JavaScript Canvas

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

Comments 0

…

Retro Football Passing Game in JavaScript Canvas

Recommended

Comments 0