Pong Game

I made a pong clone as both an exercise in Javascript and a savior from boredom. Enjoy. (The keyboard input needed means it won't work on mobile, sorry)

 

 

The Code

canvas = document.getElementById('pong');
canvas.width = 640;
canvas.height = 480;
ctx = canvas.getContext('2d');

ctx.fillStyle = "#000000"

ctx.beginPath();
ctx.rect(0,0,640,480);
ctx.closePath();
ctx.fill();
ctx.stroke();

var gameOn = false;
var gameStart = true;
var leftY = 190;
var leftKeyUp = false;
var leftKeyDown = false;
var rightY = 190;
var rightKeyUp = false;
var rightKeyDown = false;
var ballX = 310;
var ballY = 230;
var ballLastHitPaddle = 0;
var ballLastHitWall = 0;
var leftScore = 0;
var rightScore = 0;
var ballSpeed = 4;
var difficultyIncrease = 0;

document.onkeydown = function(evt) {
    if (evt.keyCode == 81) leftKeyUp = true;
    if (evt.keyCode == 83) gameOn = true;
    if (evt.keyCode == 65) leftKeyDown = true;
    if (evt.keyCode == 80) rightKeyUp = true;
    if (evt.keyCode == 76) rightKeyDown = true;
    return false;
};
document.onkeyup = function(evt) {
    if (evt.keyCode == 81) leftKeyUp = false;
    if (evt.keyCode == 65) leftKeyDown = false;
    if (evt.keyCode == 80) rightKeyUp = false;
    if (evt.keyCode == 76) rightKeyDown = false;
    return false;
};


gameRun = function() {
    ctx.fillStyle = "#000000"
    
    ctx.beginPath();
    ctx.rect(0,0,640,480);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    if (gameOn == true) {
        if (ballX <= 40 && ballY >= leftY && ballY <= leftY + 100) {
            ballLastHitPaddle = 0;
            difficultyIncrease = difficultyIncrease + 1;
        }
        if (ballX < 35) {
            rightScore = rightScore + 1;
            gameStart = false;
            gameOn = false;
            rightY = 190;
            leftY = 190;
            ballX = 310;
            ballY = 230;
            ballLastHitPaddle = 0;
            ballLastHitWall = 0;
        }
        if (ballX >= 580 && ballY >= rightY && ballY <= rightY + 100) {
            ballLastHitPaddle = 1;
            difficultyIncrease = difficultyIncrease + 1;
        }
        if (ballX > 585) {
            leftScore = leftScore + 1;
            gameStart = false;
            gameOn = false;
            rightY = 190;
            leftY = 190;
            ballX = 310;
            ballY = 230;
            ballLastHitPaddle = 0;
            ballLastHitWall = 0;
        }
        if (ballY <= 0) ballLastHitWall = 0;
        if (ballY >= 480) ballLastHitWall = 1;
    
        if (leftKeyUp == true) leftY = leftY - 10;
        if (rightKeyUp == true) rightY = rightY - 10;
        if (leftKeyDown == true) leftY = leftY + 10;
        if (rightKeyDown == true) rightY = rightY + 10;
        if (ballLastHitPaddle == 0) ballX = ballX + ballSpeed;
        if (ballLastHitPaddle == 1) ballX = ballX - ballSpeed;
        if (ballLastHitWall == 0) ballY = ballY + ballSpeed;
        if (ballLastHitWall == 1) ballY = ballY - ballSpeed;
        if (difficultyIncrease == 5) {
            difficultyIncrease = 0;
            ballSpeed = ballSpeed + 1;
        }
    } else {
        if (gameStart == true) {            
            ctx.font = "35px Arial";
            ctx.fillStyle = "#ffffff";
            ctx.fillText("Pong! Left paddle is 'Q' and 'A'", 100,300);
            
            ctx.font = "35px Arial";
            ctx.fillStyle = "#ffffff";
            ctx.fillText("Right paddle is 'P' and 'L'", 135,340);
            
            ctx.font = "35px Arial";
            ctx.fillStyle = "#ffffff";
            ctx.fillText("Press 'S' to start", 190,380);
        } else {
            ctx.font = "35px Arial";
            ctx.fillStyle = "#ffffff";
            ctx.fillText("Point! 'S' to continue", 165,300);
        }
    }
    
    
    ctx.fillStyle = "#ffffff"
    
    ctx.beginPath();
    ctx.rect(20,leftY,20,100);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.rect(600,rightY,20,100);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.rect(ballX,ballY,20,20);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    
    ctx.font = "35px Arial";
    ctx.fillStyle = "#ffffff"
    ctx.fillText(leftScore, 235,40)
    
    ctx.font = "35px Arial";
    ctx.fillStyle = "#ffffff"
    ctx.fillText(rightScore, 400,40)
};
_intervalId = setInterval(gameRun, 20);