WebReference.com logo
tip archive  •   about  •   sitemap  •   contact  •   jobs  •   write for us  •   subscribe


[previous] [next]

Simple Game Programming In JavaScript [con't]

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume

The Key Events

Our game uses key presses to move the paddles up and down. We're also going to use a key press to serve the ball after the game has started so that players don't always have to use the mouse to press the "start game" button.

First, add these variables to the group up at the top of pingpong.js. You can change the characters between the single quotes to be whatever keys you want to press to move the paddles.

In goRight() and goLeft() we have one major change. Instead of changing directions when we hit the edges of the court we call the score() function and tell it which side just scored. The side opposite the direction of travel scores, since that side is the last side to have hit the ball. Other than that, the direction functions are just like they were at the end of the last tutorial.

The Paddle Functions

In order for animBall() to work at all, we need PadLoc(), which was called in line 27 of our big code block on page two.

Finally, add the event listener into your opening body tag like this:

And your key press event handling is ready. Now, every time a key is pressed, the event will be captured and dealt with according to the rules of the game.


[previous] [next]

Recent Articles

WebReference.com site name
Rolling Out Your Own HTML Application Version Control
HTML 5: Client-side Storage
Working with Ajax Server Extensions
internet.com site name
Wi-Fi Product Watch, November 2009
Chip Market Recovering From '08 Collapse
Low-Cost Tools to Kickstart Your New Business


internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs