An Introduction to Game Programming with JavaScript-4 : Page 4

The Game Loop Details
Obviously, the main game loop calls functions that still need to be written. The functions are relatively straightforward so here they are all at once:

function detectCollisions(){
   //just reflect the ball on a collision
   //a more robust engine could change trajectory of 
   //the 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 > 480)
      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 > 450){
      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 and modifying 
   //the score label
   clearTimeout(timer);
   score.innerHTML += "   Game Over";
   score.style.backgroundColor = 'rgb(128,0,0)';
}

There are some interesting things going on. First, note that any collision simply reverses the dependent direction of the ball. So, if the ball hits a side or the top boundary, it moves in the opposite direction after the collision. If the ball gets near the paddle, the collision detection routine determines if the ball hits the paddle. If so, collisionY() returns true.

Second, the render() function updates the two dynamic objects of the game—the ball and the score. The ball is moved using some simple animation techniques I described in an earlier article. The game updates the score label by simply writing some new text to its innerHTML property.

Next, the difficulty() function increases the magnitude of the dy variable. That is, it increases the absolute value of the number stored in the variable regardless of the sign. So, if dy is currently negative, it subtracts 1. And if dy is positive, it adds 1.

Finally, the gameOver() function terminates the game loop and provides some visual cues that the game has, in fact, ended.

I tested Rebound with Mozilla Firefox 1.0, Internet Explorer 6.0, and Opera 7.11. Rebound works beautifully in Firefox and IE but fails under Opera. Opera has extensive keyboard shortcuts registered so that Opera users can surf easily using only the keyboard. This includes bindings for the arrow keys and I suspect this is the reason for the failure in Opera. A more robust implementation would sniff for Opera and use different keys—a requirement you should be aware of if you're writing keyhandler routines for people that may be using Opera. In the interest of focusing on the game programming aspects of the script, I've omitted that fix.

I hope this article demonstrates the fundamental principles of game programming using JavaScript.

Previous Page