Javascript question. I need to make a simple game for class. I've made a game with a bouncing basketball within a box, and a moving paddle along the bottom. when the ball collides with the paddle, i want it to continue bouncing. If the user doesn't get the paddle there in time, the game is over. For some reason, the collision isn't being recognized, the ball goes right through the paddle. What am I doing wrong? Here is the code:

#playingArea{ position: absolute; top: 100; left: 100; border: 3px solid black; width: 500; height: 500; background-color: #E0FFFF; } #paddle{ position: absolute; top: 470; left: 228; width: 64; height: 16;

     }
     #ball{
         position: absolute;
         top: 4;
         left: 200;
         width: 16;
         height: 16;
     }
     #score{
         position: absolute;
         top: 486;
         left: 0;
         width: 500;
         height: 14;
         font-size: 10pt;
         color: white;
         background-color: rgb(32,128,64);
     }
 </style>
 <script language="JavaScript">
 //get info, process data, update screen objects
     //instance vars
     var ball;
     var paddle;
     var score;
     //initial speeds
     var dx = 5;
     var dy = 5;
     var currentScore = 0;
     var timer;
     //set initial conditions for ball and paddle
     var paddleLeft = 228;
     var ballLeft = 300;
     var ballTop = 4;
     
     function init(){
         //instantiate HTML object instance vars
         ball = document.getElementById('ball');
         paddle = document.getElementById('paddle');
         score = document.getElementById('score');
         //register key listener with document object
         document.onkeydown = keyListener;
         //start the game loop
         start();
     }
     
     function keyListener(e){
         if(!e){
             //for IE
             e = window.event;
         }
         if(e.keyCode==37 && paddleLeft > 0){
             //keyCode 37 is left arrow
             paddleLeft -= 4;
             paddle.style.left = paddleLeft + 'px';
         }
         if(e.keyCode==39 && paddleLeft < 436){
             //keyCode 39 is right arrow
             paddleLeft += 4;
             paddle.style.left = paddleLeft + 'px';
         }
        
     }
     
     function start(){
         //game loop
         detectCollisions();
         render();
        
         
         //end conditions
         if(ballTop < 470){
             //still in play - keep the loop going
             timer = setTimeout('start()',50);
         }
         else{
             gameOver();
         }
     }
     
     function detectCollisions(){
         //just reflect the ball on a collision
         //a more robust engine could change trajectory of ball based
         //on where the ball hits the paddle
         if(collisionX())
             dx = dx * -1;
         if(collisionY())
             dy = dy * -1;
     }
     
     function collisionX(){
         //check left and right boundaries
         if(ballLeft < 4 || ballLeft > 462)
             return true;
         return false;
     }
     
     function collisionY(){
         //check if at top of playing area
         if(ballTop < 4)
             return true;
         //check to see if ball collided with paddle
         if(ballTop > 470){
             if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64)
                 return true;
         }
         return false;
     }
     
     function render(){
         moveBall();
         updateScore();
     }
     
     function moveBall(){
         ballLeft += dx;
         ballTop += dy;
         ball.style.left = ballLeft;
         ball.style.top = ballTop;
     }
     
     function updateScore(){
         currentScore += 5;
         score.innerHTML = 'Score: ' + currentScore;
     }
     
     function difficulty(){
         //as the game progresses, increase magnitude of the vertical speed
         if(currentScore % 1000 == 0){
             if(dy > 0)
                 dy += 1;
             else
                 dy -= 1;
         }
     }
     
     function gameOver(){
         //end the game by clearing the timer, modifying the score label
         clearTimeout(timer);
         score.innerHTML += "   Game Over";
         score.style.backgroundColor = 'rgb(128,0,0)';
     }
     
     
 </script>

Bask-A-Bounce

Score: 0