Pong Game

This pong clone was my first project with Javascript, made early in high school. I had no formal computer science education and no fluency in any specific language; I built this in about two hours.


The Code

<html>

<head>
    <style>
        #pong {
            float: right;
        }
    </style>
</head>

<body>
    <canvas id='pong' tabindex="1"></canvas>
    <script>
        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'", 80, 300);

                    ctx.font = "35px Arial";
                    ctx.fillStyle = "#ffffff";
                    ctx.fillText("Right paddle is 'P' and 'L'", 125, 340);

                    ctx.font = "35px Arial";
                    ctx.fillStyle = "#ffffff";
                    ctx.fillText("Press 'S' to start", 180, 380);
                } else {
                    ctx.font = "35px Arial";
                    ctx.fillStyle = "#ffffff";
                    ctx.fillText("Point! 'S' to continue", 155, 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);
    </script>
</body>

</html>