diff --git a/pong.html b/pong.html
index 644659f7..01620b8e 100644
--- a/pong.html
+++ b/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_bottom = new component(w, wall_size, "white", 0, h-wall_size);
+ wall_top = new component(w, wall_size, "grey", 0, 0);
+ 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);
+ 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 otherright = otherobj.x + (otherobj.width);
- var othertop = otherobj.y;
- var otherbottom = otherobj.y + (otherobj.height);
- var crash = true;
+ var otherleft = collider.x;
+ var otherright = collider.x + (collider.width);
+ var othertop = collider.y;
+ var otherbottom = collider.y + (collider.height);
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() {
- if (ball.crashWith(player1))
- myGameArea.stop();
+function gameLoop()
+{
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) {
- player1.dirX = 0;
+function playerMove(keys)
+{
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; }
+ { player1.dirY += -1; }
if (keys.indexOf("s") != -1)
- { player1.dirY += 1; }
+ { player1.dirY += 1; }
player1.move();
-
- player2.dirX = 0;
+ if (player1.collision(wall_top) || player1.collision(wall_bottom))
+ {
+ player1.dirY = player1.dirY * -1;
+ player1.move();
+ }
+
player2.dirY = 0;
- if (keys.indexOf("ArrowLeft") != -1)
- { player2.dirX += -1; }
- if (keys.indexOf("ArrowRight") != -1)
- { player2.dirX += 1; }
- if (keys.indexOf("ArrowUp") != -1)
+ if (keys.indexOf("ArrowUp".toLowerCase()) != -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();
+ }
}