From 0a7fb208577e04fbeeee6794952584bd1f938d13 Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Sat, 15 Oct 2022 23:28:03 +0200
Subject: [PATCH] added wall + inputs adjustements

---
 pong.html | 131 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 82 insertions(+), 49 deletions(-)
diff --git a/pong.html b/pong.html
index e0025889..644659f7 100644
--- a/pong.html
+++ b/pong.html
@@ -18,18 +18,13 @@ canvas {
 <body onload="startGame()">
 
 <div id="canvas-container">
+	<!-- <p> =) </p> -->
 </div>
 
 <script>
 // "use strict";
 
-var player1;
-var player2;
-var	score1;
-var	score2;
-var ball;
-
-var playerSpeed = 2;
+var gridDisplay = true;
 
 function startGame() {
 	myGameArea.createGameArea();
@@ -43,13 +38,22 @@ function startGame() {
 	const ph = pw*5;
 	const ball_size = pw; // const ball_size = w/50;
 	const score_size = w/16;
+	const wall_size = w/100;
+	const playerSpeed = w/150;
+	const ballSpeed = w/150;
 
 // 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);
+	player1.speed = playerSpeed;
+	player2.speed = playerSpeed;
+	ball.speed = ballSpeed;
 	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);
 
 // Grid
 	w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
@@ -64,7 +68,7 @@ function startGame() {
 }
 
 var myGameArea = {
-	keys: new Map(),
+	keys: [],
 	canvas : document.createElement("canvas"),
 	createGameArea : function() {
 		this.canvas.width = 500;
@@ -72,17 +76,25 @@ var myGameArea = {
 		// 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.getElementById("canvas-container").appendChild(this.canvas);
+		var container = document.getElementById("canvas-container");
+		container.insertBefore(this.canvas, container.childNodes[0]);
 	},
 	start : function() {
 		this.interval = setInterval(gameLoop, 20);
-		window.addEventListener('keydown', function (e) {
-			myGameArea.keys.set(e.key, true);
-		})
-		window.addEventListener('keyup', function (e) {
-			myGameArea.keys.set(e.key, false);
-		})
+		window.addEventListener('keydown', function (e)
+			{ myGameArea.addKey(e.key); })
+		window.addEventListener('keyup', function (e)
+			{ myGameArea.deleteKey(e.key); })
+	},
+	addKey : function(key) {
+		var i = myGameArea.keys.indexOf(key);
+		if (i == -1)
+			myGameArea.keys.push(key);
+	},
+	deleteKey : function(key) {
+		var i = myGameArea.keys.indexOf(key);
+		if (i != -1)
+			myGameArea.keys.splice(i, 1);
 	},
 	clear : function() {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -113,16 +125,17 @@ function component(width, height, color, x, y) {
 	this.color = color;
 	this.x = x;
 	this.y = y;
-	this.speedX = 0;
-	this.speedY = 0;
+	this.dirX = 0;
+	this.dirY = 0;
+	this.speed = 1.0;
 	this.update = function() {
 		ctx = myGameArea.context;
 		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.move = function() {
+		this.x += this.dirX * this.speed;
+		this.y += this.dirY * this.speed;
 	}
 	this.crashWith = function(otherobj) { // From W3schools. To redo.
 		var myleft = this.x;
@@ -147,20 +160,28 @@ function component(width, height, color, x, y) {
 function gameLoop() {
 	if (ball.crashWith(player1))
 		myGameArea.stop();
-	playerMove();
-	// ball.x += -0.5;
-	// ball.y += +0.2;
+	handleInput();
+
+	ball.dirX = -0.5;
+	ball.dirY = +0.5;
+	ball.move();
+
 	draw();
-	drawGrid();
 }
 
 function draw() {
 	myGameArea.clear();
+
+	if (gridDisplay)
+		drawGrid();
+	
 	player1.update();
 	player2.update();
 	ball.update();
 	score1.update();
 	score2.update();
+	wall_top.update();
+	wall_bottom.update();
 }
 
 function drawGrid() {
@@ -173,35 +194,47 @@ function drawGrid() {
 	h_grid_d1.update();
 }
 
-function playerMove() {
-	player1.speedX = 0;
-	player1.speedY = 0;
-	if ( myGameArea.keys.get("a") )
-		{ player1.speedX += -playerSpeed; }
-	if ( myGameArea.keys.get("d") )
-		{ player1.speedX += playerSpeed; }
-	if ( myGameArea.keys.get("w") )
-		{ player1.speedY += -playerSpeed; }
-	if ( myGameArea.keys.get("s") )
-		{ player1.speedY += playerSpeed; }
-	player1.newPos();
+function handleInput() {
+	var keys = myGameArea.keys;
+	if (keys.length == 0)
+		return;
 
-	player2.speedX = 0;
-	player2.speedY = 0;
-	if ( myGameArea.keys.get("ArrowLeft") )
-		{ player2.speedX += -playerSpeed; }
-	if ( myGameArea.keys.get("ArrowRight") )
-		{ player2.speedX += playerSpeed; }
-	if ( myGameArea.keys.get("ArrowUp") )
-		{ player2.speedY += -playerSpeed; }
-	if ( myGameArea.keys.get("ArrowDown") )
-		{ player2.speedY += playerSpeed; }
-	player2.newPos();
+	if (keys.indexOf("g") != -1)
+	{
+		gridDisplay = !gridDisplay;
+		myGameArea.deleteKey("g");
+	}
+	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();
+	
+	player2.dirX = 0;
+	player2.dirY = 0;
+	if (keys.indexOf("ArrowLeft") != -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)
+		{ player2.dirY += 1; }
+	player2.move();
 }
 
 </script>
 
 
-
 </body>
 </html>
