A paddle and ball game in Javascript

 As a web developer you just have to know and write some javascript to add some extra feeling and functionality on your web applications .I am not a declared web developer but since i love the web it will be nice to be able understand its own key programming language . Here is where I start .I am building a small paddle and ball game .I am not starting from the basics because I already understand the basics in programming. What I wish to accomplish is to be able to link css to javascript ,move objects on the screen and let it work on all browsers. I wanted to do it with jquery but I feel like I am cheating on myself on my goal to learn the main scripting language for the web. Just some raw Javascript will make me happy.I know i will learn events in javascript,functions definitions,timing,key game concepts and others as I develop the game.
To start the development of this game .They are certain important objects that have to be defined.Anyway lets imagine how the player will play the game.

-load up the game on the browser
-move the paddle from left to right with the mouse
-every time the ball hits the paddle the game points increase.

From the above we see that they are certain key objects that we must have a reference to them and know their states.

1)The playing area.(where the game will be played)
2)The paddle
3)The ball
4)The score
In javascript you can represent your objects like css defined fields.This make life easy for everybody.Every object in the game has its own css properties.Lets not forget.This is a web based game.Hence I wrote these styles to fit the above objects .With this each style can me manipulated using Javascript.
As a web developer you must have some css feeling even if you are not a designer.Anyway you can put this in-line or in a separate file. I choose to put it in-line since its a small program

//Comment
//the ball and paddle object will be represented by images
//Still they will be in a div class representing them.

Coming up next will be the script to handle this objects on the screen.
Let start scripting ....

Since its inline Javascipt,this script will be at the head section of the html page.
1)In every game you must have references your objects or what ever components you will need to know their states in the game.
2)Name the components and initiate them to various positions

The first function is the initiate function

function init(){
      //get the ball,paddles and score references on the document by getting their Ids.           
            ball = document.getElementById('ball');
            paddle = document.getElementById('paddle');
            score = document.getElementById('score');
//since we shall use the keyboard to move the paddle we have to register input from the keyboard to the current document that is out game
            //register key listener with document object
            document.onkeydown = keyListener;
            //start the game loop
            start();
        }

We can find that there is a Keylistner that returns an event on a key press that will be linked to the paddle .Note that this can be different on various browsers.

function keyListener(e){
            if(!e){
                  //if its IE
                 e = window.event;
            }
            if(e.keyCode==37 && paddleLeft > 0){
                //keyCode 37 is left arrow
                paddleLeft -= 5;
                paddle.style.left = paddleLeft + 'px';
            }
            if(e.keyCode==39 && paddleLeft < 436){
                //keyCode 39 is right arrow
                paddleLeft += 5;
                paddle.style.left = paddleLeft + 'px';
            }
            //FYI - keyCode 38 is up arrow, keyCode 40 is down arrow
        }
 

The next function to handle will be the start function.Remember that is the last line in the initialisation function.This is where the magic begins.
That will be coming up next...........