Ping Pong Game - HTML CSS JavaScript

📌 Project Description:

The Ping Pong Game is a browser-based version of the classic table tennis arcade game. Built with HTML, CSS, and JavaScript, this project features two paddles (player and AI), a bouncing ball, collision physics, and a score tracker. It is an excellent beginner-to-intermediate project that demonstrates real-time animations, event handling, and simple AI logic using vanilla JavaScript.

This game runs fully in the browser without any external libraries, and is responsive for desktop and mobile devices.

⚙️ Key Features:

• Smooth paddle and ball animations

• Collision detection between ball and paddles/walls

• AI opponent with dynamic difficulty

• Score tracking and reset functionality

• Keyboard or mouse/touch control for player paddle

• Responsive design using CSS

🕹️ How to Play:

Controls:

• 🖱️ Move your mouse up/down to control the left paddle
  or

• ⌨️ Use the W and S keys for up/down movement

Objective:

• Prevent the ball from passing your paddle

• Score points by making the ball pass the AI (right paddle)

Game Over:

• The game can be endless or end when a score limit is reached (customizable)

🧠 Skills You’ll Learn:

• JavaScript game loop using requestAnimationFrame()

• Paddle and ball movement logic

• Collision detection with velocity inversion

• Keyboard and mouse input handling

• Simple AI behavior programming

• DOM and canvas manipulation