Pong.js NPM | npm.io

Pong.js

Configurable JavaScript Pong game in the browser. Uses Pixi.js for rendering. Available stand-alone or as npm module for Browserify

Screenshot

Live examples

Usage

Simple Example Usage

var pong = new Pong(document.getElementById('wrapper'));

// Add keyboard controls for player A
pong.players.a.addControls({
	'up': 'w',
	'down': 's',
});

// Add behaviour for player B
pong.events.on('update', function () {

	if (pong.players.b.y < pong.balls[0].y) {
		pong.players.b.move(1);
	} else if (pong.players.b.y > pong.balls[0].y) {
		pong.players.b.move(-1);
	}

});

Browserify Example Usage

Installation

npm install pong.js

Example

var Pong = require('pong.js'),
	pong = new Pong(document.getElementById('wrapper'));


// Add keyboard controls for player A
pong.players.a.addControls({
	'up': 'w',
	'down': 's',
});

// Add behaviour for player B
pong.events.on('update', function () {

	if (pong.players.b.y < pong.balls[0].y) {
		pong.players.b.move(1);
	} else if (pong.players.b.y > pong.balls[0].y) {
		pong.players.b.move(-1);
	}

});

Development

Global Dependencies

Browserify npm install -g browserify
Watchify npm install -g watchify

Install

git clone git@github.com:KanoComputing/Pong.js.git
cd Pong.js
npm install

Build

npm run build

Watch

npm run watch

Docs

Pong class

Methods

start() - Start game
stop() - Stop game
update() - Run next frame in the gameloop
updateIfStill() - Only update if gameloop not running
resize() - Resize accordingly to wrapper size. Use for responsive implementations
reset() - Reset paddles positions, scores and balls
setBackgroundColor([ string ]) - Set background color using hexa string (#xxxxxx`)
setLinesColor([ string ]) - Set lines color using hexa string (#xxxxxx)
setTextStyle([ object ]) - Set text style attributes (E.g. font, fill, align)
addBall() - Add a ball to the game

Properties

events - Game event emitter
players - Object containing Players (a and b by default)
stage - Pixi.js stage
renderer - Pixi.js renderer
wrapper - Wrapping DOM element
balls - Array containing Ball objects
loop - GameLoop object

Player class

Methods

addControls([ object ]) - Add keyboard controls (E.g. { up: 'w', down: 's' })
move([ number ]) - Move up (-1) or down (1`) according to speed at next iteration
screenX() - Returns screen X position
screenY() - Returns screen Y position
getBoundingBox() - Returns paddle bounding box
reset() - Reset player position
addPoint() - Increse player score
setHeight([ number ]) - Set paddle height
setColor([ string ]) - Set paddle color using hexa string (#xxxxxx)