Pong

Pong was the first video game to enter our home, sometime between the late seventies and the early eighties. I believe I still have it, tucked away in a cardboard box somewhere. It plugged straight into the television —though I couldn’t say what kind of connector it used— and I doubt it would speak to a modern 4K screen today.

But that no longer matters: more than forty years have passed, and it now lives elsewhere, embedded in my website, suspended in time like a museum piece, reprogrammed to measure by artificial intelligence.

Press Play to start. New game resets the score.
Controls: W/S (left), ArrowUp/ArrowDown (right), Touch (tap where you want each paddle), Space (pause), F (fullscreen), Esc (exit fullscreen), ⛶ button (touch fullscreen).
On mobile: tap on each half of the game to place each paddle and use ⛶ for fullscreen.

Standard embed (any website)

<div id="pong-host"></div>
<script src="https://marconoris.com/assets/js/pong-embed.js"></script>
<script>
  const game = LibellusPong.createPong("#pong-host", {
    width: 640,
    height: 360,
    newGameLabel: "New game"
  });
  game.setSpeed(1.2); // optional
</script>

Fullscreen embed (100% viewport)

<div id="pong-host" style="position:fixed; inset:0;"></div>
<script src="https://marconoris.com/assets/js/pong-embed.js"></script>
<script>
  document.documentElement.style.overflow = "hidden";
  document.body.style.margin = "0";
  document.body.style.overflow = "hidden";

  let game;
  function mount() {
    if (game) game.destroy();
    game = LibellusPong.createPong("#pong-host", {
      width: window.innerWidth,
      height: window.innerHeight,
      newGameLabel: "New game"
    });
  }

  mount();
  window.addEventListener("resize", mount);
</script>