Tennis Game Keyboard 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; // done in onload for consistency

    var holdUpP1 = false;
    var holdDownP1 = false;

    //// below here vvv
    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') {
            holdUpP1 = stateHeld;
        } else if (whichKey == '40') {
            holdDownP1 = stateHeld;
        }
    }

    function applyKeyAction() {
        if(paddle1Y > 0) {
                        if(holdUpP1) {
                                    paddle1Y -= 10;
                        }
        }
        if(paddle1Y+100 < canvas.height) {
                        if(holdDownP1) {
                                    paddle1Y += 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
             }
             if(ballX > canvas.width/2) {
                          ballSpeedX = -10
             }
             if(ballX < canvas.width/2) {
                          ballSpeedX = 10
             }
             ballSpeedY = 8
             ballX = canvas.width/2;
             ballY = canvas.height/2;
}

    function computerMovement() {
        var paddle2YCenter=paddle2Y+(PADDLE_HEIGHT/2);
        var distToBall = (ballY-paddle2YCenter);
        var percentToJump = 0.2;
        paddle2Y+=percentToJump*distToBall;
    }

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

        applyKeyAction();

             computerMovement();
             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 Won", canvas.width/2-100, 200);
            } else if (player2Score >= WINNING_SCORE) {
                canvasContext.fillText("Computer Won", canvas.width/2-110, 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>