examples/random-balls.html

<!DOCTYPE html>
<html>
<head>
	<title>Pong.js - Shrink player</title>

	<script type="text/javascript" src="../build/Pong.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">

	<script type="text/javascript">

		window.onload = function () {
			var pong = new Pong(document.getElementById('pong'));

			function resize () {
				var gameHeight = window.innerHeight - 40 + 'px';
				document.getElementById('pong').style.height = gameHeight;

				pong.resize();
			}

			resize();
			window.onresize = resize;

			pong.players.a.addControls({
				'up': 'up',
				'down': 'down',
			});

			pong.players.b.speed = 280;

			pong.on('update', function () {
				if (pong.balls.length) {
					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);
					}
				}
			});

			function randRange (min, max) {
				return Math.random() * (max - min) + min;
			}

			function addBall () {
				pong.addBall();
				pong.balls[pong.balls.length - 1].setSize(randRange(5, 30));
			}

			pong.on('start', function () {
				pong.balls[pong.balls.length - 1].setSize(randRange(5, 30));
			});

			pong.players.a.on('hit', function () {
				addBall();
			});

			pong.players.b.on('hit', function () {
				addBall();
			});
		};

	</script>

</head>
<body>

	<div id="pong"></div>

	<div class="panel">
		Move with [ UP ], [ DOWN ], score points to get the enemy's paddle to shrink
	</div>

</body>
</html>