WebRTC Pong - A WebRTC Multiplayer Game

A classic Pong game built with WebRTC for real-time multiplayer gaming over the internet.

Disclaimer: This project was created using Claude Haiku 4.5 AI.

Features

• Real-time Multiplayer: Connect with another player using WebRTC data channels
• Mouse Control: Move your paddle up and down using your mouse
• Black & White Design: Clean, classic Pong aesthetic with black background and white elements
• Ball Physics: Realistic ball movement with paddle spin mechanics
• Auto-matchmaking: Automatic opponent matching through the signaling server

Setup & Installation

Prerequisites

• Node.js (v14 or higher)
• npm

Installation

1. Navigate to the project directory:

cd RtcPong

2. Install dependencies:

npm install

3. Start the signaling server:

npm start

4. Open your browser and go to:

http://localhost:3000

5. Open the same URL in another browser window/tab or on another machine to connect with an opponent.

How to Play

1. Click the "Join Game" button to look for an opponent
2. Wait for another player to join
3. Once matched, move your mouse up and down to control your paddle
4. Hit the ball to the opponent's side
5. The ball will bounce off paddles with spin effects based on where it hits
6. First player to score points wins!

Architecture

Signaling Server (server.js)

• Built with Express and Socket.IO
• Handles matchmaking between players
• Facilitates WebRTC offer/answer exchange
• Manages ICE candidate exchange
• Detects disconnections

Client (public/game.js)

• Canvas-based game rendering
• WebRTC PeerConnection for real-time communication
• Data channels for ball state synchronization
• Mouse-based paddle control
• Real-time ball physics

Technical Details

WebRTC Implementation

• Signaling: Socket.IO for signaling server communication
• Data Channels: Used to transmit ball position and velocity
• ICE Servers: Multiple STUN and TURN servers for NAT traversal
  • STUN: Google's STUN servers (stun.l.google.com, stun1.l.google.com)
  • TURN: Public relay servers (openrelay.metered.ca) for symmetric NAT scenarios
• Player Roles:
  • Player 1 controls the ball physics and sends updates until they hit the ball at which point the roles reverse and Player 2 takes over sending the ball position until they hit the ball and the roles reverse again.

NAT Traversal (TURN Server Support)

The application includes TURN server support to enable connections for players behind restrictive firewalls and symmetric NATs:

• Default Configuration: Uses free public TURN servers (openrelay.metered.ca) that work out-of-the-box
• Custom TURN Servers: For production deployments, configure private TURN servers via environment variables:

  export TURN_USERNAME=your_username
  export TURN_PASSWORD=your_password
  npm start

• Server Configuration: TURN servers are defined in server.js and served to clients via the /api/ice-servers endpoint

Game Physics

• Ball bounces off top and bottom walls
• Ball bounces off paddles with spin based on impact location
• Ball speed increases slightly with each paddle hit

Browser Compatibility

Requires WebRTC support:

• Chrome/Chromium 23+
• Firefox 22+
• Safari 11+
• Edge 79+