ok so im working on a pong game and i dont know many good programming practice's, placements, and that which im trying to learn now this is a draft of the script im trying to use uncomplete so id like someone even proof-read it, confirm if its a bad or a simple error
The File is the code im using 
im still learning alot but i play to make pong then snake then more of those "Classic" Games to get a idea of programming games
Edit: File wont attach, ill post script here
<script>
$(document).ready(function()
{
{
//Global Variables
//Stage
var canvas;
var ctx; //delcaring the context of the element
var WIDTH; //Width of the canvas element
var HEIGHT;//this will be the height of the cnavas element
//ball
var x;//Postion of X-Ball
var y;//Postion of Y-Ball
var ballRadius = 10; //This is the radius of the ball (pxiels)
//Paddles
var paddleHeight = 70;/*This displays
the height of paddles*/
var paddleWidth = 10;//Displays width of paddles//
var playerPaddle; //this the variable of the player paddle//
var playerPaddleColour = "#EE3424";//Delcares the paddle to being white aka colour//
var compPaddle; //Same as players expecet COMP//
var compPaddleColour = "EE8722";//this is the colour of the computers paddle (orange)
//attach event listeners
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
//flags
var upPressed = false;
var downPressed = false;
//interval variable
var refreshStage;
//set upPressed or downPressed if up or down are pressed//
function onKeyDown(evt)
{
if (evt.keyCode == 38)
{
upPressed = true;
}
else if (evt.keyCode == 40)
{
downPressed = true;
}
}
//unset upPressed or downPressed if the up or down are let go
function onKeyUp(evt)
{
if (evt.keyCode == 38)
{
upPressed = true;
}
else if (evt.KeyCode == 40)
{
downPressed = false;
}
}
function clearStage()
{
ctx.clearRect(0,0,WIDTH,HEIGHT);
}
init();
};
function init()
{
//get the canvas element
canvas = $('#pongGame')[0];
//get the context of the element
ctx = canvas.getContext("2d");
//set our width and height variables equal to the width
//and height of the canvas element
WIDTH = canvas.width;
HEIGHT = canvas.height;
//set the starting height of the paddles to the center
//of the y-axis
playerPaddle = (HEIGHT / 2) - (paddleHeight/2);
compPaddle = (HEIGHT/ 2) - (paddleHeight/2);
//set the x and y values for where the ball will start
//in this case the center of the canvas
x = 400;
y = 250;
//This Function clears the stage below every 100th of
//a second (10ms)
refreshStage = setInterval(drawGame, 10);
//This function Draw the Game Stage
function drawGame()
{
//First wipe the old frame
clearStage();
//draw the sidelines
drawSideLines();
//Draw the ball
drawBall();
//check to see if the downPressed flag equals true
if (downPressed == true)
{
//make sure there is room for the paddle to move further down
if(playerPaddle + paddleHeight + 20 <= HEIGHT)
{
//set the new postition of the playerPaddle down 5 pixels
playerPaddle +=5;
}
}
//check to see if the UpPressed flag equals true//
else if (upPressed == true)
{
//make sure there is room for the paddle to move up
if(playerPaddle - 20 >= 0)
{
//set the new postion of the paddle up 5 pxs
playerPaddle -= 5;
}
}
}
//Draw the Player paddle, passing variables defined above
drawPaddle(0,playerPaddle,paddleWidth,PaddleHeight,playerPaddleColour);
//draw the comp paddle, passing variables defined above
drawPaddle(WIDTH - 10,comPaddle,PaddleWidth,paddleHeight,compPaddleColour);
}
//this is a function to draw the side lines//
function drawSideLines()
{
ctx.beginPath();
ctx.rect(0,0,WIDTH,15);
ctx.closePath();
ctx.fillStyle="#1666AF";
ctx.fill();
ctx.beginPath();
ctx.rect(0,HEIGHT - 15,WIDTH,15);
ctx.closePath();
ctx.fillStyle="#1666AF";
ctx.fill();
}
//This is drawing the ball, simples!//
function drawBall()
{
ctx.beginPath();
ctx.arc(x,y, ballRadius,0,Math.PI*2, true);
ctx.closePath();
ctx.fillStyle="6DB33F";
ctx.fill();
}
//This draws the paddle//
function drawPaddle(xaxis,yaxis,pwidth,pheight,pcolour)
{
ctx.beginPath();
ctx.rect(xaxis,yaxis,pwidth,pheight);
ctx.closePath();
ctx.fillStyle=pcolour;
ctx.fill();
}
</script>
<style type="text/css">
/*This block gives the canvas
a centered element*/
#pongGame
{
background:url(http://www.allstate.com/resources/Allstate/images/ni/NI-LinkedIm-Banner.jpg);
background-size: 75%;
background-repeat:no-repeat;
background-position:center;
border:1px solid #1666AF;
}
/*This block centers the contiant of the page*/
#container
{
position: fixed;
top: 50%;
left: 50%;
;
margin-top: -275px;
text-align: center;
}
/*This is the font for the scoreboard
and text*/
#Score
{
margin-left: 500px;
font-family: 'Rambla', sans-serif;
font-size:28px;
color: #717073;
border: 2px solid #1666AF;
margin-bottom: 5px;
}
/*This block sets the color
text of the score board*/
#playerScore
{
color: #EE3424;
}
#compScore
{
color: #EE8722;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Rambla:700" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="container">
<div id="Score">
You: <span id="playerScore">0</span> <span style="color: #6db33f;"><b>//</b></span> Computer: <span id="compScore">0</span>
</div>
<canvas width="800" height="500">
Your browser does not support HTML5
</canvas>
</div>
