Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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


advertisement
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.



Tom Duffy, DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the college's in-house Web design studio.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap