JavaScript : Ping Pong Game Code


Having the knowledge of moving images using JavaScript, we’ll be creating a small Ping Pong game as an example for this post.

Today we’ll learn to do a few new things in JavaScript:

1. Executing some code every specified time interval (for game loop).
2. Tracking and using mouse movements.
3. Attaching code (function) to events.

About Game :

As you should be knowing, in this game there is one ball and two paddles at two ends. One is user-controlled the other, for this example, is CPU controlled. User has to move the paddle in order not to let the ball pass through, CPU also has to do the same thing. Whoever’s side the ball passes through looses the game.

There are a few objects which can interact with each other, these are ball, paddles, walls. Let’s see the various interactions that can take place between these:

  1. Ball Hitting Upper/Lower Wall – Ball will bounce off.
  2. Ball Passing Through Either Side – Player or CPU, depending on whose side ball passed through, will loose the game.
  3. Ball Hitting Paddle – It’ll bounce off

We’ll need to take care of these events:

  1. Page Load – Game objects will be initialized
  2. Game Start – Mouse click on the player paddle will start the game.
  3. Mouse Movements – Inside the game area (a div), the paddle will follow the y-position of the mouse. Paddle however should not get past the boundaries.
  4. CPU Paddle – The paddle will follow the ball by moving up/down depending the relative position of the ball. We’ve added a little intelligence by only moving the paddle while ball is coming towards it. This will make the movement as well as the game look more real.

Game Code :

NOTE:  Put two files “codingtalks1.png & codingtalks2.png ”  in the same directory the script is in. Simply Download these file by click here : CodingTalks- Ping Pong Game Files

You Need "JavaScript : Ping Pong Game Code" ???

"JavaScript : Ping Pong Game Code" (Source Code / Report / PPT) Totally belong to CodingTalks Team and We always ready to Share our Stuff with our users. If you are Very Much Interested on This Topic Then you must Leave a Comment what Exactly you Looking For Or Send us Email to get Full Information.

Coding Talks

Filed in: HTML, Java Tags: , , , ,

Get Updates

Share This Post

Related Posts

Leave a Reply

Submit Comment

© 2018 CodingTalks. All rights reserved.

Warning: filemtime(): stat failed for /home/codingtalks/public_html/wp-content/plugins/floating-social-share-bar//js/waypoints.min.js in /home/codingtalks/public_html/wp-content/plugins/floating-social-share-bar/floatingshare.php on line 213