RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


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){
      //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
   //end conditions
   if(ballTop < 470){
      //still in play - keep the loop going
      timer = setTimeout('start()',50);
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
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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date