Full config
const game = new PaddleGame({
// ── 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-paddle');
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 PaddleGame({ isAdmin: true }, '#my-paddle');
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.