Canvas - Ping Pong

canvas-ping-pong.markdown

Canvas - Ping Pong

Just playing with Canvas

A Pen by Alex Ilyaev on CodePen.

License.

index.html

	<canvas id="canvas" width="100" height="100"></canvas>

	<div class="wrap">
		<label for="speed"><b>SpeedX:</b></label>
		<input type="number" id="speedX" class="btn" value="5">
		<span>&nbsp;|&nbsp;</span>

		<label for="speed"><b>SpeedY:</b></label>
		<input type="number" id="speedY" class="btn" value="5">
	</div>
	<div class="wrap">
		<button id="stop" class="btn">Stop</button>
		<button id="run" class="btn">Run</button>
	</div>

script.js

(function () {
	'use strict';

	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	// Rectangle
	var rect = {
		x: 0,
		y: 75,
		width: 30,
		height: 30
	};

	var animId = null;

	var direction = {
		right: true,
		bottom: true
	};
	var speed = {
		x: 5,
		y: 5,
		haste: 10,
		hasteX: 5,
		hasteY: 10
	};

	// Set dimensions
	function setCanvasDimensions() {
		var width = $(document).width() / 1.1;
		var height = $(document).height() / 1.5;

		canvas.width = width;
		canvas.height = height;
	}

	// Re-Draw
	function drawRect() {
		ctx.beginPath();
		ctx.rect(
			rect.x,
			rect.y,
			rect.width,
			rect.height);

		ctx.fillStyle = '#E74C3C';
		ctx.fill();
	}

	function handleEdge() {
		if (rect.x + rect.width >= canvas.width || rect.x < 0) {
			direction.right = !direction.right;
			speed.hasteX = speed.x + speed.haste;
		}

		if (rect.y + rect.height >= canvas.height || rect.y < 0) {
			direction.bottom = !direction.bottom;
			speed.hasteY = speed.y + speed.haste;
		}
	}

	function handleHaste() {
		if (speed.hasteX > speed.x) {
			speed.hasteX--;
		}
		if (speed.hasteY > speed.y) {
			speed.hasteY--;
		}
	}

	// Clear the Canvas
	function clear() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	// Trigger Re-Draw
	function render() {
		var speedX = speed.hasteX > speed.x ? speed.hasteX : speed.x;
		var speedY = speed.hasteY > speed.y ? speed.hasteY : speed.y;

		handleEdge();
		handleHaste();

		if (direction.right) {
			rect.x = rect.x + speedX;
		} else {
			rect.x = rect.x - speedX;
		}

		if (direction.bottom) {
			rect.y = rect.y + speedY;
		} else {
			rect.y = rect.y - speedY;
		}

		drawRect(rect);
	}

	// Setup the animation
	function animate() {
		animId = window.requestAnimationFrame(animate);

		clear();
		render();
	}

	// Stop the animation
	function stop(id) {
		if (id) {
			window.cancelAnimationFrame(id);
		}
	}

	// Debounce helper for window resize
	function debounceResize(delay, callback) {
		var timeout;

		$(window).on('resize orientationChanged', function () {
			clearTimeout(timeout);
			timeout = setTimeout(callback, delay);
		});
	}

	/**
	 * Button click handlers
	 */

	debounceResize(20, function () {
		setCanvasDimensions();
	});

	$('#stop').on('click', function (e) {
		e.preventDefault();
		stop(animId);
	});

	$('#run').on('click', function (e) {
		e.preventDefault(animId);
		stop(animId);
		animate();
	});

	$('#speedX').on('change', function (e) {
		speed.x = parseInt(e.target.value, 10);
	});
	$('#speedY').on('change', function (e) {
		speed.y = parseInt(e.target.value, 10);
	});

	/**
	 * Init
	 */

	(function () {
		setCanvasDimensions();
		animate();
	}());

}());

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

style.css

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
}

body {
	background: #333;
	color: white;
}

canvas {
	background: beige;
	display: block;
	margin: 0 auto;
}

.wrap {
	margin-top: 20px;
	text-align: center;
}

.btn {
	cursor: pointer;
	border: 0;
	border-radius: 10px;
	font-size: 1.1em;
	font-weight: bold;
	width: 150px;
	height: 30px;
}

input.btn {
	width: 50px;
	cursor: default;
	text-align: center;
}