Basic Table Tennis Game Code Samples

This blog entry outlines some basic information to get up to speed with the development of a basic table tennis game. At this point, it is not meant to be a complete implementation neither is it going to impose any particular (other than what’s obvious) design and/or architectural understanding of the project’s terms of reference.

  • Basic introduction to OpenGL: you need to get a basic OpenGL program up and running; this will give you an understand of the OpenGL environment generally and how much code it takes to have a Window display on your computer. I found this tutorial to be a useful introduction to OpenGL; it is useful for an absolute beginner as it walks you through OpenGL step by step. There are also Visual C++ 6.0 project code downloads from the tutorial.
  • The Game’s Screen: the game is essentially comprised of quadrilaterals (rectangles of varying widths and height – assuming a square (the ball) can be called a rectangle as well. From the tutorial in the point above, identify the code section that is responsible for rendering images on the screen. To draw a rectangle in OpenGL you need the coordinates of its four corners (vertices); strictly speaking, you just need the coordinates of one of the corners of the rectangle. The image below illustrates that; the coordinates of the single vertex is required to establish the position of the rectangle.


Update: added game layout diagram


The following artifacts in the game can be represented as rectangles:

  • The Game boundary: the largest rectangle in the drawing depicting the game;
  • The Ball: it can be represented as a filled square (strictly speaking not a rectangle but it requires the drawing of four sides);
  • Computer Player Pad and Human Player Pad: rectangles of varying heights;
  • Net: a filled rectangle;

The following code sample renders a rectangle in OpenGL:

glColor3f(0.4f, 1.f, 0.2f);
glVertex3f(-1.5, -1.0f, 0.0);
glVertex3f(1.5, -1.0f, 0.0);
glVertex3f(1.5, 1.0f, 0.0);
glVertex3f(-1.5, 1.0f, 0.0);

And the next one renders a filled rectangle:

glColor3f(0.4f, 1.f, 0.2f);
glVertex3f(-1.5, -1.0f, 0.0);
glVertex3f(1.5, -1.0f, 0.0);
glVertex3f(1.5, 1.0f, 0.0);
glVertex3f(-1.5, 1.0f, 0.0);

With information above it is possible to create a method that renders a rectangle, given one corner or vertex, as well as the rectangle’s width and height. This would be optimal because most of the shapes in the Game’s screens are rectangle which would mean writing complicated code that would be seemingly hard to debug.

void draw_rectangle(Point start_point, width, height){

glColor3f(0.1f, 1.f, 0.2f);
glVertex3f(start_point.x, start_point.y, 0.0);
glVertex3f(start_point.x+width, start_point.y, 0.0);
glVertex3f(start_point.x+width, start_point.y+height, 0.0);
glVertex3f(start_point.x, start_point.y+height, 0.0);



 * In order to user the above form, you will need to create a Point  * class.


Or it can be implemented like this:

void draw_rectangle(float x, float y, float width, float height){

glColor3f(0.1f, 1.f, 0.2f);
glVertex3f(x, y, 0.0);
glVertex3f(x+width, y, 0.0);
glVertex3f(x+width, y+height, 0.0);
glVertex3f(x, y+height, 0.0);


I hope the above information is helpful. If there is any improvements you think need to be included in the aforementioned, please add a comment – it might help someone.

Happy hacking!

  1. #1 by ChrisJ on July 27, 2007 - 1:41 am

    the link to the tutorial doesn’t work 😦

  2. #2 by imma on July 27, 2007 - 6:37 am

    The link has been fixed

  3. #3 by Wiilysfnd on December 1, 2007 - 2:00 pm

    You have the natural advantage in tax debt settlement , which may be appropriate for debtors with …
    Great Solution

  4. #4 by Idetrorce on December 15, 2007 - 4:59 pm

    very interesting, but I don’t agree with you

  1. Top Posts «
  2. inspired minds

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: