Tennis Game 2 Player Finalised

<html>

<canvas id="gameCanvas" width="1350" height="640"></canvas>

<script>
    var canvas;
    var canvasContext;
    var ballX = 50;
    var ballY = 50;
    var ballSpeedX = 10;
    var ballSpeedY = 5;

    var player1Score = 0
    var player2Score = 0
    const WINNING_SCORE = 3;

    var showingWinScreen = false;

    var paddle1Y = 250;
    var paddle2Y = 250;
    var paddle1X = 0;
    var paddle2X = 1340;
    const PADDLE_THICKNESS = 10;
    const PADDLE_HEIGHT = 100;

    //// document.onkeydown = checkKey;

    var holdUpP1 = false;
    var holdDownP1 = false;
    var holdUpP2 = false;
    var holdDownP2 = false;

    function pressKey(e) {
        e = e || window.event;
        keySet(e.keyCode,true);
    }
    function releaseKey(e) {
        e = e || window.event;
        keySet(e.keyCode,false);
    }

    function keySet(whichKey,stateHeld) {
        if (whichKey == '38') {
            holdUpP2 = stateHeld;
        } else if (whichKey == '40') {
            holdDownP2 = stateHeld;
        } else if (whichKey == '87') {
            holdUpP1 = stateHeld;
        } else if (whichKey == '83') {
            holdDownP1 = stateHeld;
        }
    }

function applyKeyAction() {
        if(paddle1Y > 0) {
                        if(holdUpP1) {
                                    paddle1Y -= 10;
                        }
        }
        if(paddle1Y+100 < canvas.height) {
                        if(holdDownP1) {
                                    paddle1Y += 10;
                        }
        }
        if(paddle2Y > 0) {
                        if(holdUpP2) {
                                    paddle2Y -= 10;
                        }
        }
        if(paddle2Y+100 < canvas.height) {
                        if(holdDownP2) {
                                    paddle2Y += 10;
                        }
        }
}

    function handleMouseClick(evt) {
        if (showingWinScreen) {
            player1Score = 0;
            player2Score = 0;
            showingWinScreen = false;
        }
    }

    window.onload = function() {
        console.log("Hello World!");
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

        var framesPerSecond = 30
        setInterval(function() {
            moveEverything();
            drawEverything();
        }, 1000 / framesPerSecond);

        canvas.addEventListener('mousedown', handleMouseClick);
        document.addEventListener('keydown', pressKey);
        document.addEventListener('keyup', releaseKey);

        (e);
    }

    function ballReset() {
        if (player1Score >= WINNING_SCORE ||
            player2Score >= WINNING_SCORE) {
            showingWinScreen = true
        }
        ballSpeedX = -ballSpeedX
        ballX = canvas.width / 2;
        ballY = canvas.height / 2;
        if(ballSpeedX > 0) {
                ballSpeedX=10;
        }else if(ballSpeedX < 0) {
                ballSpeedX=-10;
        }
        ballSpeedY=5;
    }

    function moveEverything() {
        if (showingWinScreen) {
            return;
        }

        applyKeyAction();

        ballX += ballSpeedX;
        ballY += ballSpeedY;

             bounceBall();
    }

    function drawNet() {
        for (var i = 0; i < canvas.height; i += 40) {
            colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
        }
    }

    function drawEverything() {
        // background
        colorRect(0, 0, canvas.width, canvas.height, 'black');

            canvasContext.font="40px Arial";

        if (showingWinScreen) {
            canvasContext.fillStyle = 'white';

            if (player1Score >= WINNING_SCORE) {
                canvasContext.fillText("Player 1 Won", canvas.width/2-100, 200);
            } else if (player2Score >= WINNING_SCORE) {
                canvasContext.fillText("Player 2 Won", canvas.width/2-100, 200);
            }
            canvasContext.fillText("Click to continue", canvas.width/2-120, 480);
            return;
        }

        // net
        drawNet();

        // left player paddle
        colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

        // right computer paddle
        colorRect(canvas.width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

        // ball
        colorCircle(ballX, ballY, 10, 'white');

        canvasContext.fillText(player1Score, 100, 100);
        canvasContext.fillText(player2Score, canvas.width - 100, 100);
    }

    function colorCircle(centerX, centerY, radius, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.beginPath();
        canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
        canvasContext.fill();
    }

    function colorRect(leftX, topY, width, height, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.fillRect(leftX, topY, width, height);
    }

function bounceBall() {

                                  if(ballX >= paddle1X &&
                                      ballX <= paddle1X+PADDLE_THICKNESS &&
                                      ballY >= paddle1Y &&
                                      ballY <= paddle1Y+PADDLE_HEIGHT) {
                                              ballSpeedX = -ballSpeedX;

                                              var deltaX = ballX - (paddleX+100/2);
                                              ballSpeedX = deltaX * 0.35;

                                  }
                                  if(ballX >= paddle2X &&
                                      ballX <= paddle2X+PADDLE_THICKNESS &&
                                      ballY >= paddle2Y &&
                                      ballY <= paddle2Y+PADDLE_HEIGHT) {
                                              ballSpeedX = -ballSpeedX;

                                              var deltaX = ballX - (paddleX+100/2);
                                              ballSpeedX = deltaX * 0.35;

                                  }


                 if(ballX < 0) {
                             ballReset();
                             player2Score++
                 }

                 if(ballY <= 0) {
                             ballSpeedY = -ballSpeedY;
                 }

                 if(ballX > canvas.width) {
                             ballReset();
                             player1Score++
                 }

                 if(ballY >= canvas.height) {
                             ballSpeedY = -ballSpeedY;
                 }
}

</script>

</html>