GregoireHebert · November 24, 2018 21:59
diff --git a/pong.html b/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>