diff --git a/pong.html b/pong.html
index fbe142de..e0025889 100644
--- a/pong.html
+++ b/pong.html
@@ -4,38 +4,78 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
 <style>
+#canvas-container {
+	text-align: center;
+}
 canvas {
 	border:1px solid #d3d3d3;
 	background-color: #333333;
+	width: 80%;
 }
 </style>
 
 </head>
 <body onload="startGame()">
 
+<div id="canvas-container">
+</div>
+
 <script>
 // "use strict";
 
 var player1;
 var player2;
+var	score1;
+var	score2;
 var ball;
 
+var playerSpeed = 2;
+
 function startGame() {
-	player1 = new component(15, 60, "white", 10, 100);
-	player2 = new component(15, 60, "white", 455, 100);
-	// ball = new component(10, 10, "white", 240, 125);
-	ball = new component(10, 10, "white", 40, 125);
+	myGameArea.createGameArea();
+
+// Const
+	const w = myGameArea.canvas.width;
+	const h = myGameArea.canvas.height;
+	const w_mid = w/2;
+	const h_mid = h/2;
+	const pw = w/50;
+	const ph = pw*5;
+	const ball_size = pw; // const ball_size = w/50;
+	const score_size = w/16;
+
+// Component
+	player1 = new component(pw, ph, "white", 0+w/50, h_mid-ph/2);
+	player2 = new component(pw, ph, "white", w-w/50-pw, h_mid-ph/2);
+	ball = new component(ball_size, ball_size, "white", w_mid-ball_size/2, h_mid-ball_size/2);
+	score1 = new score(score_size+"px", "Consolas", "white", w_mid-w/8, w/12);
+	score2 = new score(score_size+"px", "Consolas", "white", w_mid+w/8-score_size/2, w/12);
+
+// Grid
+	w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
+	w_grid_u1 = new component(w, 1, "yellow", 0, h/4);
+	w_grid_d1 = new component(w, 1, "yellow", 0, h-h/4);
+
+	h_grid_mid = new component(1, h, "darkgreen", w_mid, 0);
+	h_grid_u1 = new component(1, h, "yellow", w/4, 0);
+	h_grid_d1 = new component(1, h, "yellow", w-w/4, 0);
+
 	myGameArea.start();
 }
 
 var myGameArea = {
 	keys: new Map(),
 	canvas : document.createElement("canvas"),
-	start : function() {
-		this.canvas.width = 480;
-		this.canvas.height = 270;
+	createGameArea : function() {
+		this.canvas.width = 500;
+		this.canvas.height = 300;
+		// var heightRatio = 1;
+		// this.canvas.height = this.canvas.width * heightRatio;
 		this.context = this.canvas.getContext("2d");
-		document.body.insertBefore(this.canvas, document.body.childNodes[0]);
+		// document.body.insertBefore(this.canvas, document.body.childNodes[0]);
+		document.getElementById("canvas-container").appendChild(this.canvas);
+	},
+	start : function() {
 		this.interval = setInterval(gameLoop, 20);
 		window.addEventListener('keydown', function (e) {
 			myGameArea.keys.set(e.key, true);
@@ -46,30 +86,72 @@ var myGameArea = {
 	},
 	clear : function() {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	},
+	stop : function() {
+		clearInterval(this.interval);
+	}
+}
+
+function score(size, font, color, x, y) {
+	this.size = size;
+	this.font = font;
+	this.color = color;
+	this.x = x;
+	this.y = y;
+	this.text = "0";
+	this.update = function() {
+		ctx = myGameArea.context;
+		ctx.font = this.size + " " + this.font;
+		ctx.fillStyle = this.color;
+		ctx.fillText(this.text, this.x, this.y);
 	}
 }
 
 function component(width, height, color, x, y) {
 	this.width = width;
 	this.height = height;
-	this.speedX = 0;
-	this.speedY = 0;
+	this.color = color;
 	this.x = x;
 	this.y = y;
+	this.speedX = 0;
+	this.speedY = 0;
 	this.update = function() {
 		ctx = myGameArea.context;
-		ctx.fillStyle = color;
+		ctx.fillStyle = this.color;
 		ctx.fillRect(this.x, this.y, this.width, this.height);
 	}
 	this.newPos = function() {
 		this.x += this.speedX;
 		this.y += this.speedY;
 	}
+	this.crashWith = function(otherobj) { // From W3schools. To redo.
+		var myleft = this.x;
+		var myright = this.x + (this.width);
+		var mytop = this.y;
+		var mybottom = this.y + (this.height);
+		var otherleft = otherobj.x;
+		var otherright = otherobj.x + (otherobj.width);
+		var othertop = otherobj.y;
+		var otherbottom = otherobj.y + (otherobj.height);
+		var crash = true;
+		if ((mybottom < othertop) ||
+		(mytop > otherbottom) ||
+		(myright < otherleft) ||
+		(myleft > otherright)) {
+			crash = false;
+		}
+		return crash;
+	}
 }
 
 function gameLoop() {
+	if (ball.crashWith(player1))
+		myGameArea.stop();
 	playerMove();
+	// ball.x += -0.5;
+	// ball.y += +0.2;
 	draw();
+	drawGrid();
 }
 
 function draw() {
@@ -77,31 +159,43 @@ function draw() {
 	player1.update();
 	player2.update();
 	ball.update();
+	score1.update();
+	score2.update();
+}
+
+function drawGrid() {
+	w_grid_mid.update();
+	w_grid_u1.update();
+	w_grid_d1.update();
+	
+	h_grid_mid.update();
+	h_grid_u1.update();
+	h_grid_d1.update();
 }
 
 function playerMove() {
 	player1.speedX = 0;
 	player1.speedY = 0;
 	if ( myGameArea.keys.get("a") )
-		{ player1.speedX += -1; }
+		{ player1.speedX += -playerSpeed; }
 	if ( myGameArea.keys.get("d") )
-		{ player1.speedX += 1; }
+		{ player1.speedX += playerSpeed; }
 	if ( myGameArea.keys.get("w") )
-		{ player1.speedY += -1; }
+		{ player1.speedY += -playerSpeed; }
 	if ( myGameArea.keys.get("s") )
-		{ player1.speedY += 1; }
+		{ player1.speedY += playerSpeed; }
 	player1.newPos();
 
 	player2.speedX = 0;
 	player2.speedY = 0;
 	if ( myGameArea.keys.get("ArrowLeft") )
-		{ player2.speedX += -1; }
+		{ player2.speedX += -playerSpeed; }
 	if ( myGameArea.keys.get("ArrowRight") )
-		{ player2.speedX += 1; }
+		{ player2.speedX += playerSpeed; }
 	if ( myGameArea.keys.get("ArrowUp") )
-		{ player2.speedY += -1; }
+		{ player2.speedY += -playerSpeed; }
 	if ( myGameArea.keys.get("ArrowDown") )
-		{ player2.speedY += 1; }
+		{ player2.speedY += playerSpeed; }
 	player2.newPos();
 }
 
diff --git a/pong_example.jpg b/pong_example.jpg
new file mode 100644
index 00000000..d6132c28
Binary files /dev/null and b/pong_example.jpg differ
