Untitled

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>My First Webpage</title>
            <meta name="description" content="Creative Computing Club Ping Pong">
            <meta name="author" content="Creative Computing Club">

            <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
            <script language="javascript" src="javascripts/jquery.hotkeys.js" type="text/javascript"></script>
            <script language="javascript" src="javascripts/key_status.js" type="text/javascript"></script>

        </head>

        <body>
             <script type='text/javascript'>
            var ballX = 240;
            var ballY = 160;
            var speed=3;
            var ballvSpeed=speed;
            var ballhSpeed=speed;
            var player1y= 160;
            var player2y= 160;
            var player1Score=0;
            var player2Score=0;
            var gameMode=0;

            var canvasElement = $("<canvas width='480' height='320'></canvas>");
            var canvas = canvasElement.get(0).getContext("2d");
            canvasElement.appendTo('body');

            setInterval(function( ) {

                if(gameMode==1){
                    updateGame( );
                    drawGame( );
                }

                if (gameMode==0){
                    startScreen( );
                }

                if(keydown.space && gameMode==0) {
                    gameMode=1;
                }

            }, 1000/60);

            <!--Update Game Logic-->
            function updateGame( ) {

                <!--Update Ball-->
                ballX=ballX+ballhSpeed;
                ballY=ballY+ballvSpeed;

                <!--Ball Out of Play-->
                if (ballX>475){player1Score+=1; ballX=240;ballhSpeed=-speed;}
                if (ballX<0){player2Score+=1; ballX=240;ballhSpeed=speed;}

                <!--Checks Score-->
                if (player1Score==5 || player2Score==5){
                    player1y=160; player2y=160; player1Score=0; player2Score=0; speed=3; gameMode=0;
                }

                <!--Bounce Ball off of Paddles-->
                if (ballX>445 && ballX<455 && ballY>player2y-20 && ballY<player2y+20) {
                    ballhSpeed=-speed;
                }

                if (ballX<30 && ballX>20 && ballY>player1y-20 && ballY<player1y+20) {
                    ballhSpeed=speed;
                }

                <!--Bounce Ball off of Ceiling and Floor-->
                if (ballY>300){ballvSpeed=-speed;}
                if (ballY<10) {ballvSpeed=speed;}

                <!--Stops Game-->
                if(keydown.esc) {
                    player1y=160; player2y=160; player1Score=0; player2Score=0;
                    speed=3; gameMode=0;ballX=240; ballY=160;
                }

                <!--Player 1 Controls-->
                if(keydown.q) {
                    player1y -= 5;
                }
                if(keydown.a) {
                    player1y += 5;
                }
                <!--Limit Player 1-->
                if(player1y<30){player1y=30;}
                if(player1y>290){player1y=290;}

                <!--Player 2 Controls-->
                if(keydown.p) {
                    player2y -= 5;
                }
                if(keydown.l) {
                    player2y += 5;
                }
                <!--Limit Player 2-->
                if(player2y<30){player2y=30;}
                if(player2y>290){player2y=290;}

            }

            <!--Displays the Start Screen-->
            function startScreen( ) {

                <!--Clears Screen-->
                canvas.fillStyle = "#000";
                canvas.fillRect(0,0,480,320);

                <!--Draws Title-->
                canvas.fillStyle = "#FFF";
                canvas.font = "30px Arial";
                canvas.fillText("PING",200,110);
                canvas.font = "60px Arial";
                canvas.fillText("PONG",150,160);
                canvas.font = "20px Arial";
                canvas.fillText("PRESS SPACE TO PLAY",125,250);

            }

            <!--Displays the Game Screen-->
            function drawGame( ) {

                <!--Clears Screen-->
                canvas.fillStyle = "#000";
                canvas.fillRect(0,0,480,320);

                <!--Draws Top and Bottom Bars-->
                canvas.fillStyle = "#08F";
                canvas.fillRect(0,0,480,10);
                canvas.fillRect(0,310,480,10);

                <!--Draws Score-->
                canvas.strokeStyle = "#08F";
                canvas.font = "30px Arial";
                canvas.fillText(player1Score,120,50);
                canvas.fillText(player2Score,360,50);

                <!--Draws Net and Ball-->
                canvas.fillStyle = "#FFF";
                canvas.fillRect(245,10,5,300);
                canvas.fillRect(ballX,ballY,8,8);

                <!--Draws and Players-->
                canvas.fillRect(450,player2y-20,10,40);
                canvas.fillRect(20,player1y-20,10,40);

            }

        </script>
    </body>
</html>