Juego de pases de fútbol retro en JavaScript Canvas

17 0 Juegos rowekeavarie083 Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Juego de pases de fútbol retro en JavaScript Canvas

Recomendado

13 July 2024

Plantilla de formulario de inicio de sesión más sencilla

12 December 2025

Formulario de inicio de sesión HTML con CSS y Font Awesome

19 January 2026

ABC Clever: Aprende idiomas en línea

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

Comentarios 0

…