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

Write and Register a Keyboard Event Handler
You'll need to gather keypress information from the user. To do that, create an event listener and register it with the document object's onkeydown event. After registering the listener, the document executes the listener code each time the specified event occurs. Create the event listener by adding the following to the script:

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';
   }
   // FYI - keyCode 38 is up arrow, 
   //       keyCode 40 is down arrow
}

The preceding code uses object detection to distinguish between Mozilla and IE. Mozilla automatically creates the event object and passes it to the listener. IE creates the event object as a property of the window object. So, if the keyListener() function receives a null argument, it knows that the browser is IE and it assigns the correct event object to the e variable.

Next, the event listener determines if either the left or right arrow has been pressed. If the left arrow is pressed, it moves the paddle to the left by 4 pixels. If the right arrow is pressed, it moves the paddle to the right. Both Mozilla and IE correctly interpret a repeated key and produce continuous movement. Since this is a simple demo, it only listens for these two keys, but a more complex game might need to respond to keypresses from other keys as well. If so, you can simply add conditional tests for each of the keys.

Registering the event listener with the document object is simple. Just add the following lines at the bottom of the init() function:

//register key listener with document object
   document.onkeydown = keyListener; 

Executing the Main Loop
The next task is to create the game's main loop and start it. Add the start() function to the script:

function start(){
   //game loop
   detectCollisions();
   render();
   difficulty();
            
   //end conditions
   if(ballTop < 470){
      //still in play - keep the loop going
      timer = setTimeout('start()',50);
   }
   else{
      gameOver();
   }
}

The game continues until the user misses the ball. At that point, the ballTop variable will be larger than 470 (just over the height of the gameplay surface minus the height of the paddle plus the height of the ball). Call the start() function at the end of the init() function:

//start the game loop
   start();

The main game loop does all the work. It makes calls to detect whether the ball has collided with a boundary, renders objects to the screen, adjusts the difficulty of the game, and determines if the ball is still in play. If the ball is still within the acceptable playing area, it calls setTimeout(). The start() function is quasi-recursive; setTimeout() returns immediately so start() isn't "classically" recursive—but the effect is the same. Using setTimeout() has the added benefit of allowing control over the frame rate of the game. I used a delay of 50 ms. You can adjust the overall speed of the game by manipulating that parameter.

Previous Page

Next Page