Retro Gridiron – Pixel American Football Game in HTML5

74 0 Games CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Retro Gridiron – Pixel American Football Game in HTML5

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #1f6b2a; color: #fff; font-family: "Press Start 2P", monospace; touch-action: none; user-select: none; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; background: #111; border-bottom: 4px solid #ffcc00; padding: 8px 4px; }
#hud div { flex: 1; max-width: 170px; text-align: center; }
#hud small { display: block; font-size: 8px; color: #ffcc00; margin-bottom: 5px; }
#hud b { font-size: clamp(9px, 2.6vw, 13px); font-weight: normal; }
#banner { position: fixed; top: 38%; left: 0; right: 0; text-align: center; font-size: clamp(18px, 6vw, 40px); color: #ffcc00; text-shadow: 4px 4px 0 #000; pointer-events: none; opacity: 0; transition: opacity .2s; }
#banner.on { opacity: 1; }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.82); text-align: center; padding: 20px; }
.overlay.hide { display: none; }
h1 { font-size: clamp(26px, 8vw, 54px); line-height: 1.3; color: #ffcc00; text-shadow: 5px 5px 0 #c0392b; }
.overlay p { font-size: 11px; line-height: 1.8; }
.overlay ul { list-style: none; font-size: 10px; line-height: 2.1; text-align: left; max-width: 520px; opacity: .85; }
.overlay li b { color: #ffcc00; }
#best { color: #7cf; }
#play { font: inherit; font-size: 16px; padding: 16px 32px; border: 4px solid #fff; background: #c0392b; color: #fff; cursor: pointer; box-shadow: 6px 6px 0 #000; }
#play:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 #000; }

// RETRO GRIDIRON — original arcade American football game (HTML5 canvas)
// World units are yards. x: 0..53.3 (sideline to sideline), y: 0..100 own goal → opponent goal.
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), W, H, S, OX;
var FW = 53.3;
function resize() {
  var d = window.devicePixelRatio || 1; W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0);
  S = Math.min(W / (FW + 6), H / 34); OX = (W - FW * S) / 2;
}
addEventListener('resize', resize); resize();

moveTo(carrier, tx, carrier.y + 6, spd, dt);
    ball.x = carrier.x; ball.y = carrier.y; ball.h = 0;
    if (carrier.y >= 100) return touchdown();
    if (carrier.x < 0 || carrier.x > FW) endPlay(carrier.y, 'OUT OF BOUNDS');
  }
  camY += ((state === 'air' ? ball.y : carrier.y) - 4 - camY) * Math.min(1, 4 * dt);
}
function snap() {
  state = 'pass'; recs.forEach(function (r) { r.sx = r.x; r.sy = r.y; r.hist = []; });
}
function throwTo(r) {
  var spd = 21, t = dist(qb, r) / spd;
  var tx = r.x, ty = r.y;
  // lead the receiver: simulate the route ahead
  var sim = { x: r.x, y: r.y, step: r.step }, left = t;
  for (var i = 0; i < 3; i++) {
    sim = { x: r.x, y: r.y, step: r.step }; left = t;
    while (left > 0 && r.route[sim.step]) {
      var wp = r.route[sim.step], wx = r.sx + wp[0], wy = r.sy + wp[1], d = Math.hypot(wx - sim.x, wy - sim.y), go = Math.min(d, r.sp * left);
      if (d > 0) { sim.x += (wx - sim.x) / d * go; sim.y += (wy - sim.y) / d * go; }
      left -= go / r.sp; if (go >= d) sim.step++;
    }
    t = Math.hypot(sim.x - qb.x, sim.y - qb.y) / spd;
  }
  ball.fx = qb.x; ball.fy = qb.y; ball.tx = sim.x; ball.ty = sim.y; ball.t = 0; ball.dur = Math.max(.25, t); ball.target = r;
  state = 'air';
}
function resolveCatch() {
  var spot = { x: ball.tx, y: ball.ty }, r = ball.target;
  var nd = defs.filter(function (d) { return !d.rush; }).reduce(function (a, b) { return dist(b, spot) < dist(a, spot) ? b : a; });
  var dR = dist(r, spot), dD = dist(nd, spot);
  if (dD < 1.1 && dD < dR) { if (Math.random() < .45) { turnover('INTERCEPTED!'); } else endPlay(los, 'BROKEN UP'); return; }
  if (dR < 1.6) { carrier = r; state = 'run'; banner('CAUGHT!'); return; }
  endPlay(los, 'INCOMPLETE');
}

addEventListener('keydown', function (e) { keys[e.code] = true; if (e.code === 'Space' && state === 'pre' && running) snap(); });
addEventListener('keyup', function (e) { keys[e.code] = false; });
cv.addEventListener('pointerdown', function (e) {
  if (!running) return;
  pointer = { x: e.clientX, y: e.clientY };
  if (state === 'pre') return snap();
  if (state === 'pass') {
    var w = toWorld(e.clientX, e.clientY), bestR = null, bd = 6;
    recs.forEach(function (r) { var d = dist(r, w); if (d < bd) { bd = d; bestR = r; } });
    if (bestR) throwTo(bestR);
  }
});
cv.addEventListener('pointermove', function (e) { if (pointer) pointer = { x: e.clientX, y: e.clientY }; });
addEventListener('pointerup', function () { pointer = null; });

Comments 0

…

Retro Gridiron – Pixel American Football Game in HTML5

Recommended

Comments 0