https://github.com/vermaharsha/pong-game
A simple Pong game using HTML5 Canvas and JavaScript with mouse control and AI opponent.
https://github.com/vermaharsha/pong-game
basic-trigonometry collision-detection coordinate-system-logic css game-loop html5-canvas javascript mouse-events object-oriented-javascript
Last synced: 4 months ago
JSON representation
A simple Pong game using HTML5 Canvas and JavaScript with mouse control and AI opponent.
- Host: GitHub
- URL: https://github.com/vermaharsha/pong-game
- Owner: vermaharsha
- Created: 2025-07-05T12:45:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-05T12:58:13.000Z (4 months ago)
- Last Synced: 2025-07-05T14:04:23.494Z (4 months ago)
- Topics: basic-trigonometry, collision-detection, coordinate-system-logic, css, game-loop, html5-canvas, javascript, mouse-events, object-oriented-javascript
- Language: JavaScript
- Homepage: https://vermaharsha.github.io/Pong-Game/
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎮 Pong Game - JavaScript Canvas Edition
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`.
---
## 🧩 1. Project Overview
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.
---
## ✨ 2. Features
* **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.
---
## 🛠️ 3. Technologies Used
| 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 |
---
## ⚙️ 4. Setup Instructions
Follow these steps to run the game locally:
1. **Clone the repository** or copy the files:
```bash
git clone https://github.com/yourusername/pong-game.git
cd pong-game
```
2. **File Structure:**
```
pong-game/
├── index.html
├── style.css
└── script.js
```
3. **Open `index.html` in your browser:**
Just double-click the file.
4. **Start Playing:**
Move your mouse up and down inside the canvas to control the left paddle.
---
---
## 📸 Screenshots
---
## 🙌 Acknowledgments
* 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.