Retro Pong demo: the npm package in action

Retro Pong (vertical)

NPM demo page

Currently in development version …

The field below is the package itself: one empty <div>, one new PongGame(...), nothing else. Every control on this page is a config option you get with it, and the settings panel behind the gear writes yours out as JSON. Read the quick start, or go to the main page to play the finished game.

Admin mode adds isAdmin: true to the constructor so you can try every tuning control. Leave it out of the version your visitors get.

Player 1

Controls

Game

← → to move • P pause • B cycle image

I initially created this Pong game in plain JavaScript as a fun side project. Over time I kept adding new features and eventually packaged it as a reusable library. It’s been great to see a personal project grow like this, especially since it was even used as a live dashboard widget at work for a while.

1. Install

npm install retro-pong-game

2. Add a container

3. Import & run

Recommended for first-time setup. Start with isAdmin: true to configure the game visually:

import { PongGame } from 'retro-pong-game';

new PongGame({ isAdmin: true }, '#my-pong');

Open the settings panel (gear icon), adjust colors, sizes and speeds live, then click Copy to export your config as JSON. Paste it into your constructor and remove isAdmin.

Already know your config? Pass it directly:

new PongGame({
  sizeMode: 'responsive',
  hasSound: true,
  colors: {
    paddle:     '#62cb31',
    ball:       '#e6e990',
    background: '#222',
  },
}, '#my-pong');

View on npm ↗

Full config

const game = new PongGame({

   // ── Canvas ───────────────────────────────
   // sizeMode controls how the canvas responds to its container:
   //   "responsive" = fills container + auto-resizes (default, recommended)
   //   "auto"       = fills container once, then stays fixed
   //   "fixed"      = uses exact canvasWidth / canvasHeight below
   sizeMode: 'responsive',
   canvasWidth:   900,    // px (only used when sizeMode: "fixed")
   canvasHeight:  700,    // px (only used when sizeMode: "fixed")

   // ── Game ─────────────────────────────────
   ballDiameter:    8,    // ball size in px
   ballSpeed:       3,    // starting speed (px / frame)
   paddleWidth:    84,    // paddle width in px
   paddleHeight:    7,    // paddle height in px
   gameMode:   'medium',  // 'easy' | 'medium' | 'hard' | 'extreme' | 'multiplayer'
   isMultiplayer: false,  // true = local 2-player on one keyboard
   particleBounce: true,  // particle burst on paddle hit
   hasSound:       true,  // enable sound effects
   ballImage:        '',  // URL of a custom image to show on the ball (optional)
   showSettings:   true,  // false = lock settings from players
   player1Name:      '',  // empty shows no name above the paddle
   player2Name:      '',

   // ── Test mode (dev only) ────────────────
   testPowerupsAndDowns: false,  // true = cycle through all power-ups/downs one by one

   // ── Admin (remove before shipping) ───────
   isAdmin:       false,  // true = unlock difficulty/timing in settings panel

  // ── Timer ────────────────────────────────
  timer: {
    duration:              '5:00', // match length (M:SS)
    hasBackgroundCircle:    true,  // circular progress ring
    labelColor:           '#fff',
    labelFontSize:           12,
    circleColor:         '#62cb31',
    circleLineWidth:          5,
    circleBackgroundColor:  '#333',
  },

  // ── Colors ───────────────────────────────
   colors: {
     paddle:        '#62cb31',
     ball:          '#e6e990',
     background:       '#000',
     centerline:    '#4fa185',
     score:         '#62cb31',
   },

  // ── Background ───────────────────────────
  animatedBackground: {
    starfield: true,   // scrolling star effect
    nebular:  false,   // scrolling cloud effect
    animateDashedLine: true,  // true = scrolling dashed center line, false = static
  },

  // ── Particles ────────────────────────────
  particleConfig: {
    particlesCount: 20,
  },

   // ── Field items ──────────────────────────
   powerUps:  true,  // random power-up / power-down items
   obstacles: true,  // random angled wall that deflects the ball
   mines:     true,  // random sea mines that explode on contact

  // ── Side walls ───────────────────────────
  wall: {
    offset: 0,   // px from the left and right canvas edge
    width:  4,   // px thick
  },

   // ── Saved settings ───────────────────────
   // The in-game panel saves to localStorage and those settings win over what
   // you pass here. Set this to false if your own page decides the config.
   useStoredSettings: true,

   // ── Callbacks ────────────────────────────
   onSoundToggle: (enabled) => console.log(enabled),  // fired when sound icon is toggled

}, '#my-pong');

Admin mode

Set isAdmin: true to unlock difficulty and timing controls in the settings panel. Use it while integrating the game to fine-tune the feel, then remove it before going live.

new PongGame({ isAdmin: true }, '#my-pong');

In admin mode the settings panel shows all difficulty fields (ballSpeed, playerPaddleSpeed, computerPaddleSpeed, …) and timer.duration, plus a Config JSON section with a Copy button. Paste the output directly as your initial config.

Public methods

// Paddle control: for on-screen buttons / touch
game.pressLeft();     // start moving paddle left
game.releaseLeft();   // stop  moving paddle left
game.pressRight();    // start moving paddle right
game.releaseRight();  // stop  moving paddle right

// Sound
game.toggleSound(true);   // enable
game.toggleSound(false);  // mute
game.hasSound();           // → boolean

// Ball image & pause
game.cycleBallImage(); // cycle ball image (same as pressing B)
game.togglePause();    // pause / resume   (same as pressing P)

// AI difficulty
game.increaseDifficulty();
game.decreaseDifficulty();

// Resize canvas to fit its container
game.resizeGame();

// Teardown: always call before removing the element
game.destroy();