Untitled

<html>
  <head>
    <center> Super Pong </center>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
  </head>
  <div style = "text-align:center;">
    <canvas id = "gameCanvas" width = "800" height = "600"> </canvas>
	<p id = "scoreBoard"> 0 SCORE 0 </p>
  </div>
  <script>
    var myCanvas;
    var canvasContext;

    var ballSize = 25;

    var ballX = 0;
    var ballY = 0;

	var ballTrailX = 0;
	var ballTrailY = 0;
	var ballTrail2X = 0;
	var ballTrail2Y = 0;

    var speedX = 5;
    var speedY = 5;

    var paddleHeight = 100;

	var paddle1Y = 300;
    var paddle2Y = 300;

    var player1Score = 0;
    var player2Score = 0;

	var baseSpeed = 3;
	var direction = 1;

	var scoreBoard;

	function GetMousePosition(event) {
      var rect = myCanvas.getBoundingClientRect();
      var mouseX = event.clientX - rect.left;
      var mouseY = event.clientY - rect.top;

      return {
        x:mouseX,
        y:mouseY
      };
    }

    window.onload = function() {
      myCanvas = document.getElementById('gameCanvas');
      canvasContext = myCanvas.getContext('2d');

	  scoreBoard = document.getElementById("scoreBoard");

      //Repeatedly update the screen
      setInterval(DrawStuff, 20);

	  document.addEventListener("keydown",
	  function(evt) {
		const key = evt.key.toLowerCase();
		console.log(key);
        if(key == 'w' && paddle1Y > 0){
			paddle1Y -= paddleHeight;
		}
		if(key == 's' && paddle1Y < 399+paddleHeight){
			paddle1Y += paddleHeight;
		}
	  });

	  document.addEventListener("keydown",
	  function(evt) {
		const key = evt.key.toLowerCase();
		console.log(key);
        if(key == 'arrowup' && paddle2Y > 0){
			paddle2Y -= paddleHeight;
		}
		if(key == 'arrowdown' && paddle2Y < 399+paddleHeight){
			paddle2Y += paddleHeight;
		}
	  });
    }


    function DrawStuff() {
	  // detect score and reset ball
	  detectPoints();

	  //update ball trail
	  ballTrail2X = ballTrailX;
	  ballTrail2Y = ballTrailY;
	  ballTrailX = ballX+4;
	  ballTrailY = ballY+4;
	  //Update ball position
      ballX += speedX;
      ballY += speedY;

      //Draw Stuff
      canvasContext.fillStyle = 'black';
      canvasContext.fillRect(0,0,myCanvas.width,myCanvas.height);

      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(ballX, ballY, ballSize, ballSize);

	  canvasContext.fillStyle = 'white';
      canvasContext.fillRect(ballTrailX, ballTrailY, ballSize-9, ballSize-9);

	  canvasContext.fillStyle = 'white';
      canvasContext.fillRect(ballTrail2X, ballTrail2Y, ballSize-13, ballSize-13);

      canvasContext.fillRect((myCanvas.width / 2) - 1, 0, 2, myCanvas.height);

      canvasContext.fillRect(10, paddle1Y, 10, paddleHeight);
      canvasContext.fillRect(myCanvas.width - 20, paddle2Y, 10, paddleHeight);


      //Bounce top and bottom
      if (ballY <= 0 || ballY + ballSize >= myCanvas.height) {
        speedY *= -1;
      }

      //Paddle Collisions
      if(ballX <= 20 && (ballY >= paddle1Y && ballY <= paddle1Y + paddleHeight)) {
        speedX *= -1.1;
      }

      if (ballX >= myCanvas.width - 45 && (ballY >= paddle2Y && ballY <= paddle2Y + paddleHeight)) {
        speedX *= -1.1;
      }

    }

    function detectPoints() {
      if (ballX <= -10) {
        player2Score++;
		resetBall();
		scoreBoard.innerHTML = player1Score + " SCORE " + player2Score;
      } else if (ballX >= myCanvas.width+10) {
        player1Score++;
		resetBall();
		scoreBoard.innerHTML = player1Score + " SCORE " + player2Score;
      }
    }

	function resetBall(){
    var yDirection = 1;
    if(Math.random() > 0.5){
      yDirection = -1;
    }
		ballX = 400;
		ballY = 300;
		speedX = (Math.floor(Math.random()*4) + baseSpeed)*direction;
		speedY = (Math.floor(Math.random()*4) + baseSpeed)*yDirection;
    if(baseSpeed<15){
      baseSpeed +=1;
    }
		direction*=-1;
	}

  </script>
</html>