GregoireHebert/pong.html

## pong.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Pong">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Pong</title>

        <style type="text/css">
        	canvas { background-color: black; }
        </style>
    </head>
    <body>
    	<canvas id="pong" width="900" height="670"></canvas>

        <script type="text/javascript">
        	const canvas = document.getElementById('pong');
			const canvasWidth = canvas.width;
			const canvasHeight = canvas.height;
			const ctx = canvas.getContext("2d");

			const animate = window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				function(callback) { window.setTimeout(callback, 1000/60) };

			const tick = function() {
			  game.update();
			  game.draw();
			  animate(tick);
			};

			class paddle {
				constructor () {
					this.score = 0;
					this.speed = 0;
					this.dim = {width: 20, height: 100};
				}
				draw () {
					this.displayScore();
					ctx.fillRect(this.position.x, this.position.y, this.dim.width, this.dim.height);
				}
				update (ball) {
					let diff = -((this.position.y + (this.dim.width / 2)) - ball.position.y);
					if (diff < 0 && diff < -4) { // max speed up
						this.speed = -4;
					} else if (diff > 0 && diff > 4) { // max speed down
						this.speed = 4;
					} else {
						this.speed = 0;
					}

					if ((this.position.y > 60 && this.speed < 0) || (this.position.y+this.dim.height < 630 && this.speed > 0)) {
						this.position.y += this.speed;
					}
				}
			}

			class player extends paddle {
				constructor () {
					super();
					this.position = {x: 30, y: 300};
				}
				displayScore () {
					ctx.font = "50px Arial";
					ctx.fillText(this.score, 350, 100);
				}
				update () {
					if (0 === Object.keys(keysDown).length) {
						this.speed = 0;
						return;
					}

					for(var key in keysDown) {
						var value = Number(key);
						if(value == 38) { // up arrow
							this.speed = -4;
						} else if (value == 40) { // down arrow
							this.speed = 4;
						} else {
							this.speed = 0;
						}
					}

					if ((this.position.y > 60 && this.speed < 0) || (this.position.y+this.dim.height < 630 && this.speed > 0)) {
						this.position.y += this.speed;
					}
				}
			}

			class oponent extends paddle {
				constructor () {
					super();
					this.position = {x: 850, y: 300};
				}
				displayScore () {
					ctx.font = "50px Arial";
					ctx.fillText(this.score, 510, 100);
				}
			}

			class ball {
				constructor () {
					this.init();
				}
				init () {
					this.position = {x: 66, y: 346};
					this.speed = {x: 3, y: 0};
				}
				draw () {
					ctx.beginPath();
					ctx.arc(this.position.x, this.position.y, 8, 0, 2 * Math.PI, true);
					ctx.fill();
				}
				update (player, opponent) {
					this.bounceOnPlayerPaddle(player);
					this.bounceOnOpponentPaddle(opponent);
					this.bounceOnWall();

					if (this.isOut(player, opponent)) {
						this.init();
					}

					this.position.x += this.speed.x;
  					this.position.y += this.speed.y;
				}
				bounceOnOpponentPaddle (opponent) {
					if (this.position.x+8 >= (opponent.position.x) &&
						this.position.y > opponent.position.y &&
						this.position.y < opponent.position.y + opponent.dim.height
					) {
						this.speed.x = -3;
						this.speed.y += opponent.speed / 2;
					}
				}
				bounceOnPlayerPaddle (player) {
					if (this.position.x-8 <= (player.position.x + player.dim.width) &&
						this.position.y > player.position.y &&
						this.position.y < player.position.y + player.dim.height
					) {
						this.speed.x = 3;
						this.speed.y += player.speed / 2;
					}
				}
				bounceOnWall () {
					if (this.position.y-8 <= 50 || this.position.y+8 >= 640) {
						this.speed.y *= -1;
					}
				}
				isOut (player, opponent) {
					if (this.position.x < player.position.x) {
						opponent.score += 1;
						return true;
					}
					if (this.position.x > opponent.position.x + opponent.dim.width) {
						player.score += 1;
						return true;
					}
					return false;
				}
			}

			class terrain {
				draw () {
					ctx.fillStyle = "#000000";
  					ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  					ctx.fillStyle = "#ffffff";
  					ctx.font = "20px Arial";
  					ctx.fillText("Utiliser les flèches haut et bas pour jouer.", 270, 20);
					this.drawNorthWall();
					this.drawSouthWall();
					this.drawCenter();
				}
				drawNorthWall () {
					ctx.fillRect(30, 30, 840, 20);
				}
				drawSouthWall () {
					ctx.fillRect(30, 640, 840, 20);
				}
				drawCenter () {
					for(var n = 0 ; n < 600/40 ; n++) { // draw dashed halfway line
						ctx.fillRect(435, (60+20*2*n), 20, 10);
					}
				}
			}

			class pong {
				constructor () {
					this.p = new player();
					this.o = new oponent();
					this.b = new ball();
					this.t = new terrain();
				}
				draw () {
					this.t.draw();
					this.p.draw();
					this.o.draw();
					this.b.draw();
				}
				update () {
					this.p.update();
					this.b.update(this.p, this.o);
					this.o.update(this.b);
				}
			}

			ctx.strokeStyle = '#ffffff';
			ctx.fillStyle = '#ffffff';

			let game;
			let keysDown = {};

			window.onload = function() {
				game = new pong();
				animate(tick);
			};

			window.addEventListener("keydown", function(event) {
			  keysDown[event.keyCode] = true;
			});

			window.addEventListener("keyup", function(event) {
			  delete keysDown[event.keyCode];
			});
        </script>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="description" content="Pong">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Pong</title>

	<style type="text/css">
	canvas { background-color: black; }
	</style>
	</head>
	<body>
	<canvas id="pong" width="900" height="670"></canvas>

	<script type="text/javascript">
	const canvas = document.getElementById('pong');
	const canvasWidth = canvas.width;
	const canvasHeight = canvas.height;
	const ctx = canvas.getContext("2d");

	const animate = window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	function(callback) { window.setTimeout(callback, 1000/60) };

	const tick = function() {
	game.update();
	game.draw();
	animate(tick);
	};

	class paddle {
	constructor () {
	this.score = 0;
	this.speed = 0;
	this.dim = {width: 20, height: 100};
	}
	draw () {
	this.displayScore();
	ctx.fillRect(this.position.x, this.position.y, this.dim.width, this.dim.height);
	}
	update (ball) {
	let diff = -((this.position.y + (this.dim.width / 2)) - ball.position.y);
	if (diff < 0 && diff < -4) { // max speed up
	this.speed = -4;
	} else if (diff > 0 && diff > 4) { // max speed down
	this.speed = 4;
	} else {
	this.speed = 0;
	}

	if ((this.position.y > 60 && this.speed < 0) \|\| (this.position.y+this.dim.height < 630 && this.speed > 0)) {
	this.position.y += this.speed;
	}
	}
	}

	class player extends paddle {
	constructor () {
	super();
	this.position = {x: 30, y: 300};
	}
	displayScore () {
	ctx.font = "50px Arial";
	ctx.fillText(this.score, 350, 100);
	}
	update () {
	if (0 === Object.keys(keysDown).length) {
	this.speed = 0;
	return;
	}

	for(var key in keysDown) {
	var value = Number(key);
	if(value == 38) { // up arrow
	this.speed = -4;
	} else if (value == 40) { // down arrow
	this.speed = 4;
	} else {
	this.speed = 0;
	}
	}

	if ((this.position.y > 60 && this.speed < 0) \|\| (this.position.y+this.dim.height < 630 && this.speed > 0)) {
	this.position.y += this.speed;
	}
	}
	}

	class oponent extends paddle {
	constructor () {
	super();
	this.position = {x: 850, y: 300};
	}
	displayScore () {
	ctx.font = "50px Arial";
	ctx.fillText(this.score, 510, 100);
	}
	}

	class ball {
	constructor () {
	this.init();
	}
	init () {
	this.position = {x: 66, y: 346};
	this.speed = {x: 3, y: 0};
	}
	draw () {
	ctx.beginPath();
	ctx.arc(this.position.x, this.position.y, 8, 0, 2 * Math.PI, true);
	ctx.fill();
	}
	update (player, opponent) {
	this.bounceOnPlayerPaddle(player);
	this.bounceOnOpponentPaddle(opponent);
	this.bounceOnWall();

	if (this.isOut(player, opponent)) {
	this.init();
	}

	this.position.x += this.speed.x;
	this.position.y += this.speed.y;
	}
	bounceOnOpponentPaddle (opponent) {
	if (this.position.x+8 >= (opponent.position.x) &&
	this.position.y > opponent.position.y &&
	this.position.y < opponent.position.y + opponent.dim.height
	) {
	this.speed.x = -3;
	this.speed.y += opponent.speed / 2;
	}
	}
	bounceOnPlayerPaddle (player) {
	if (this.position.x-8 <= (player.position.x + player.dim.width) &&
	this.position.y > player.position.y &&
	this.position.y < player.position.y + player.dim.height
	) {
	this.speed.x = 3;
	this.speed.y += player.speed / 2;
	}
	}
	bounceOnWall () {
	if (this.position.y-8 <= 50 \|\| this.position.y+8 >= 640) {
	this.speed.y *= -1;
	}
	}
	isOut (player, opponent) {
	if (this.position.x < player.position.x) {
	opponent.score += 1;
	return true;
	}
	if (this.position.x > opponent.position.x + opponent.dim.width) {
	player.score += 1;
	return true;
	}
	return false;
	}
	}

	class terrain {
	draw () {
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, canvasWidth, canvasHeight);
	ctx.fillStyle = "#ffffff";
	ctx.font = "20px Arial";
	ctx.fillText("Utiliser les flèches haut et bas pour jouer.", 270, 20);
	this.drawNorthWall();
	this.drawSouthWall();
	this.drawCenter();
	}
	drawNorthWall () {
	ctx.fillRect(30, 30, 840, 20);
	}
	drawSouthWall () {
	ctx.fillRect(30, 640, 840, 20);
	}
	drawCenter () {
	for(var n = 0 ; n < 600/40 ; n++) { // draw dashed halfway line
	ctx.fillRect(435, (60+202n), 20, 10);
	}
	}
	}

	class pong {
	constructor () {
	this.p = new player();
	this.o = new oponent();
	this.b = new ball();
	this.t = new terrain();
	}
	draw () {
	this.t.draw();
	this.p.draw();
	this.o.draw();
	this.b.draw();
	}
	update () {
	this.p.update();
	this.b.update(this.p, this.o);
	this.o.update(this.b);
	}
	}

	ctx.strokeStyle = '#ffffff';
	ctx.fillStyle = '#ffffff';

	let game;
	let keysDown = {};

	window.onload = function() {
	game = new pong();
	animate(tick);
	};

	window.addEventListener("keydown", function(event) {
	keysDown[event.keyCode] = true;
	});

	window.addEventListener("keyup", function(event) {
	delete keysDown[event.keyCode];
	});
	</script>
	</body>
	</html>