basic ball bounce

+ minors changes

pong.html

@@ -26,7 +26,8 @@ canvas {
 
 var gridDisplay = true;
 
-function startGame() {
+function startGame()
+{
 	myGameArea.createGameArea();
 
 // Const
@@ -49,11 +50,13 @@ function startGame() {
 	player1.speed = playerSpeed;
 	player2.speed = playerSpeed;
 	ball.speed = ballSpeed;
+	ball.dirX = -0.5;
+	ball.dirY = +0.5;
 	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);
 	
-	wall_top = new component(w, wall_size, "white", 0, 0);
+	wall_top = new component(w, wall_size, "grey", 0, 0);
-	wall_bottom = new component(w, wall_size, "white", 0, h-wall_size);
+	wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size);
 
 // Grid
 	w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
@@ -87,11 +90,13 @@ var myGameArea = {
 			{ myGameArea.deleteKey(e.key); })
 	},
 	addKey : function(key) {
+		key = key.toLowerCase();
 		var i = myGameArea.keys.indexOf(key);
 		if (i == -1)
 		myGameArea.keys.push(key);
 	},
 	deleteKey : function(key) {
+		key = key.toLowerCase();
 		var i = myGameArea.keys.indexOf(key);
 		if (i != -1)
 			myGameArea.keys.splice(i, 1);
@@ -104,7 +109,8 @@ var myGameArea = {
 	}
 }
 
-function score(size, font, color, x, y) {
+function score(size, font, color, x, y)
+{
 	this.size = size;
 	this.font = font;
 	this.color = color;
@@ -119,7 +125,8 @@ function score(size, font, color, x, y) {
 	}
 }
 
-function component(width, height, color, x, y) {
+function component(width, height, color, x, y)
+{
 	this.width = width;
 	this.height = height;
 	this.color = color;
@@ -137,54 +144,65 @@ function component(width, height, color, x, y) {
 		this.x += this.dirX * this.speed;
 		this.y += this.dirY * this.speed;
 	}
-	this.crashWith = function(otherobj) { // From W3schools. To redo.
+	this.collision = function(collider) { // 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 otherleft = collider.x;
-		var otherright = otherobj.x + (otherobj.width);
+		var otherright = collider.x + (collider.width);
-		var othertop = otherobj.y;
+		var othertop = collider.y;
-		var otherbottom = otherobj.y + (otherobj.height);
+		var otherbottom = collider.y + (collider.height);
-		var crash = true;
 		if ((mybottom < othertop) ||
 		(mytop > otherbottom) ||
 		(myright < otherleft) ||
 		(myleft > otherright)) {
-			crash = false;
+			return false;
 		}
-		return crash;
+		else
+			return true;
+	}
+	this.bounce = function() { // WIP
+		ball.dirX = ball.dirX * -1;
+		ball.dirY = ball.dirY * -1;
 	}
 }
 
-function gameLoop() {
+function gameLoop()
-	if (ball.crashWith(player1))
+{
-		myGameArea.stop();
 	handleInput();
 
-	ball.dirX = -0.5;
-	ball.dirY = +0.5;
 	ball.move();
+	if (ball.collision(wall_top))
+		ball.bounce();
+	if (ball.collision(wall_bottom))
+		ball.bounce();
+	if (ball.collision(player1))
+		ball.bounce();
+	if (ball.collision(player2))
+		ball.bounce();
 
 	draw();
 }
 
-function draw() {
+function draw()
+{
 	myGameArea.clear();
 
 	if (gridDisplay)
 		drawGrid();
 	
+	wall_top.update();
+	wall_bottom.update();
 	player1.update();
 	player2.update();
 	ball.update();
 	score1.update();
 	score2.update();
-	wall_top.update();
-	wall_bottom.update();
 }
 
-function drawGrid() {
+function drawGrid()
+{
 	w_grid_mid.update();
 	w_grid_u1.update();
 	w_grid_d1.update();
@@ -194,7 +212,8 @@ function drawGrid() {
 	h_grid_d1.update();
 }
 
-function handleInput() {
+function handleInput()
+{
 	var keys = myGameArea.keys;
 	if (keys.length == 0)
 		return;
@@ -207,30 +226,31 @@ function handleInput() {
 	playerMove(keys);
 }
 
-function playerMove(keys) {
+function playerMove(keys)
-	player1.dirX = 0;
+{
 	player1.dirY = 0;
-	if (keys.indexOf("a") != -1)
-	{ player1.dirX += -1; }
-	if (keys.indexOf("d") != -1)
-	{ player1.dirX += 1; }
 	if (keys.indexOf("w") != -1)
 		{ player1.dirY += -1; }
 	if (keys.indexOf("s") != -1)
 		{ player1.dirY += 1; }
 	player1.move();
+	if (player1.collision(wall_top) || player1.collision(wall_bottom))
+	{
+		player1.dirY = player1.dirY * -1;
+		player1.move();
+	}
 
-	player2.dirX = 0;
 	player2.dirY = 0;
-	if (keys.indexOf("ArrowLeft") != -1)
+	if (keys.indexOf("ArrowUp".toLowerCase()) != -1)
-		{ player2.dirX += -1; }
-	if (keys.indexOf("ArrowRight") != -1)
-		{ player2.dirX += 1; }
-	if (keys.indexOf("ArrowUp") != -1)
 		{ player2.dirY += -1; }
-	if (keys.indexOf("ArrowDown") != -1)
+	if (keys.indexOf("ArrowDown".toLowerCase()) != -1)
 		{ player2.dirY += 1; }
 	player2.move();
+	if (player2.collision(wall_top) || player2.collision(wall_bottom))
+	{
+		player2.dirY = player2.dirY * -1;
+		player2.move();
+	}
 }
 
 </script>