A classic Pong game recreation built using HTML5 Canvas and Vanilla JavaScript. The player controls the left paddle with mouse movement, while the right paddle is controlled by a basic AI. This project demonstrates game physics, paddle-ball collision logic, and responsive animation via requestAnimationFrame.
This is a browser-based version of the iconic Pong game. It utilizes core JavaScript functionalities to create an interactive, real-time paddle-and-ball game with a simple AI opponent. This game runs entirely in the browser with no external game engine or library dependencies.
- Mouse-controlled Paddle: Move the left paddle using your mouse.
- AI Paddle: Right paddle follows the ball with basic logic.
- Ball Bounce Physics: Reflects off paddles and walls with angle-based direction.
- Scoring Logic: Ball resets after missing either paddle (point scored).
- Collision Spin Effect: Collision point adds variation to ball’s bounce angle.
- Center Net: Aesthetic dotted net in the center of the game.
- Smooth Gameplay: Uses
requestAnimationFrame()for efficient rendering.
| Technology | Purpose |
|---|---|
| HTML5 | Structure of canvas and page |
| CSS3 | Styling canvas and layout |
| JavaScript ES6 | Game logic and animations |
| HTML Canvas API | Drawing objects and animation |
Follow these steps to run the game locally:
-
Clone the repository or copy the files:
git clone https://github.com/yourusername/pong-game.git cd pong-game -
File Structure:
pong-game/ ├── index.html ├── style.css └── script.js -
Open
index.htmlin your browser: Just double-click the file. -
Start Playing: Move your mouse up and down inside the canvas to control the left paddle.
- Inspired by the classic Pong arcade game (1972).
- Game logic and collision approach based on physics and math functions (
Math.sin,Math.PI). - HTML5 Canvas API for real-time rendering.
Made with love by Harsha Verma