Table tennis or Ping pong game using HTML, Java and JavaScript

Published on 03 Jul 2021. Written by Atharv Deshpande

Introduction

Coding a game is more satisfying than casual coding. Moving parts on a screen gives more happiness to coding efforts. This practical knowledge gives more ideas about the implementation of concepts. There are many games like a snake game. Cricket etc. But do you have knowledge about game development? If No, then this game development project will definitely help you to develop a game like Table tennis or commonly known as Pong. 

Read more..

SLNOTE
Project Description

Table tennis or Pong is the first commercially successful game. This game development project is for beginners and can clear many coding concepts in java. Many students searched it for their first year or second-year minor project. There are different milestones for the development of this game

1. Creation of moving paddles or object like tennis bat
2. Movement of the ball due to hits
3. Scoring System
4. Declaration of winner

These milestones will help you with project planning.

SLLATEST
Concepts Used

• HTML
• Java
• JavaScript

Project Implementation

1. Open your Web Editor which is more familiar for you.
2. Create sketch.js file in which you can finalize the playground dimensions in setup() function with black background in draw(). You can use different colors also. Use distinct functions for playground dimension and playground color.
3. After that, you have to create paddles. Create paddle.js file with paddle class name. Create a constructor in which dimensions of the paddle will be specify with this keyword. You must have to use display() function to make the paddles visible on screen.
4. Get back to the sketch.js and create paddle object in setup function where you created the canvas for the playground. Call display() in the draw function I.e gamerPaddle.display();
5. Refer paddle.js and sketch.js files in HTML file I.e. index.html
6. Next step is to create your AI opponent. Create aiOpponent object in setup() and declare it in draw() with display() method.
7. Next task is to move the paddles or table tennis bat. Create up() and down() functions in paddle class with movements in Y-axis.
8. There are some built-in functions for the controlling the paddle with keyPressed and keyReleased. Use those functions to control the paddles.
9. Call up() and down() functions in draw() function.
10. The next part is to create a ball. Create ball.js file and refer it in index.html
11. Starting from the middle of the playground the ball must go in X and Y direction with equal speed but in the particular canvas border. It will be defined with xGo and yGo. Display() the ball in draw() function.
12. Now both paddles and ball can move but we have to hit the ball by the tennis bat called paddle. For that create three functions I.e. hitGamer() and hitAi() with hitEqualHright() which is useful for both gamer paddle and AI paddle.
13. Now you can hit the ball with gamer paddle and the computer can hit the ball with AI paddle.
14. Create new function I.e. score(). when opponent miss the hit then player will get 1 point. Do this part with if else conditions.
15. You are done! You can rename functions with personal ones. Add different colors and sizes for more understanding,

Benefits of this game development project

1. You will be able to handle multiple files in the project.
2. It will clear the concepts and practical use of class, function and constructors.
3. It is a fun and practices purpose project.

SLDYK
Kit required to develop Table tennis or Ping pong game using HTML, Java and JavaScript:

• HTML
• CSS
• JavaScript

Technologies you will learn by working on Table tennis or Ping pong game using HTML, Java and JavaScript:

• Game development

Any Questions?