miscs littles adjustements

pong.html

@@ -12,7 +12,7 @@
 }
 canvas {
 	background-color: #333333;
-	max-width: 90vw;
+	max-width: 75vw;
 	/* max-height: 100vh; */
 	/* width: 80%; */
 }
@@ -28,23 +28,23 @@ canvas {
 <script>
 // "use strict";
 
-var gridDisplay = true;
+var gridDisplay = false;
 
 function startGame()
 {
-	myGameArea.createGameArea();
+	gameArea.createGameArea();
 
 // Const
-	const w = myGameArea.canvas.width;
+	w = gameArea.canvas.width;
-	const h = myGameArea.canvas.height;
+	h = gameArea.canvas.height;
-	const w_mid = w/2;
+	w_mid = w/2;
-	const h_mid = h/2;
+	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;
 	const wall_size = w/100;
-	const playerSpeed = w/150;
+	const playerSpeed = w/75;
 	const ballSpeed = w/150;
 
 // Component
@@ -70,11 +70,14 @@ function startGame()
 	h_grid_mid = new component(grid_size, h, "darkgreen", w_mid, 0);
 	h_grid_u1 = new component(grid_size, h, "darkgreen", w/4, 0);
 	h_grid_d1 = new component(grid_size, h, "darkgreen", w-w/4, 0);
+	
+// dashed line TODO
+	// midLine = new component(grid_size, h, "white", w_mid, 0);
 
-	myGameArea.start();
+	gameArea.start();
 }
 
-var myGameArea = {
+var gameArea = {
 	keys: [],
 	canvas : document.createElement("canvas"),
 	createGameArea : function() {
@@ -82,31 +85,31 @@ var myGameArea = {
 		var ratio = 1.66666;
 		this.canvas.width = 1500;
 		this.canvas.height = this.canvas.width / ratio;
-		this.context = this.canvas.getContext("2d");
+		this.ctx = this.canvas.getContext("2d");
 		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.addKey(e.key); })
+			{ gameArea.addKey(e.key); })
 		window.addEventListener('keyup', function (e)
-			{ myGameArea.deleteKey(e.key); })
+			{ gameArea.deleteKey(e.key); })
 	},
 	addKey : function(key) {
 		key = key.toLowerCase();
-		var i = myGameArea.keys.indexOf(key);
+		var i = gameArea.keys.indexOf(key);
 		if (i == -1)
-		myGameArea.keys.push(key);
+		gameArea.keys.push(key);
 	},
 	deleteKey : function(key) {
 		key = key.toLowerCase();
-		var i = myGameArea.keys.indexOf(key);
+		var i = gameArea.keys.indexOf(key);
 		if (i != -1)
-			myGameArea.keys.splice(i, 1);
+			gameArea.keys.splice(i, 1);
 	},
 	clear : function() {
-		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	},
 	stop : function() {
 		clearInterval(this.interval);
@@ -122,7 +125,7 @@ function score(size, font, color, x, y)
 	this.y = y;
 	this.text = "0";
 	this.update = function() {
-		ctx = myGameArea.context;
+		ctx = gameArea.ctx;
 		ctx.font = this.size + " " + this.font;
 		ctx.fillStyle = this.color;
 		ctx.fillText(this.text, this.x, this.y);
@@ -140,7 +143,7 @@ function component(width, height, color, x, y)
 	this.dirY = 0;
 	this.speed = 1.0;
 	this.update = function() {
-		ctx = myGameArea.context;
+		ctx = gameArea.ctx;
 		ctx.fillStyle = this.color;
 		ctx.fillRect(this.x, this.y, this.width, this.height);
 	}
@@ -172,6 +175,35 @@ function component(width, height, color, x, y)
 	}
 }
 
+// Bad drawLine, TODO make a drawLine with fillRect()
+function drawLine(start, end, color, pattern)
+{
+	ctx = gameArea.ctx;
+	ctx.beginPath();
+	ctx.setLineDash(pattern);
+	ctx.moveTo(start[0], start[1]);
+	ctx.lineTo(end[0], end[1]);
+	ctx.strokeStyle = color;
+	ctx.stroke();
+}
+
+function line(width, height, color, x, y)
+{
+	this.width = width;
+	this.height = height;
+	this.color = color;
+	this.x = x;
+	this.y = y;
+	this.dirX = 0;
+	this.dirY = 0;
+	this.speed = 1.0;
+	this.update = function() {
+		ctx = gameArea.ctx;
+		ctx.fillStyle = this.color;
+		ctx.fillRect(this.x, this.y, this.width, this.height);
+	}
+}
+
 function gameLoop()
 {
 	handleInput();
@@ -191,11 +223,13 @@ function gameLoop()
 
 function draw()
 {
-	myGameArea.clear();
+	gameArea.clear();
 
 	if (gridDisplay)
 		drawGrid();
 	
+	// drawLine([w_mid, 0], [w_mid, h], "white", [10, 10]); // bad
+	
 	wall_top.update();
 	wall_bottom.update();
 	player1.update();
@@ -218,14 +252,14 @@ function drawGrid()
 
 function handleInput()
 {
-	var keys = myGameArea.keys;
+	var keys = gameArea.keys;
 	if (keys.length == 0)
 		return;
 
 	if (keys.indexOf("g") != -1)
 	{
 		gridDisplay = !gridDisplay;
-		myGameArea.deleteKey("g");
+		gameArea.deleteKey("g");
 	}
 	playerMove(keys);
 }