Okay, let's start building a simple real-time multiplayer Pong game using Node.js, Express, and Socket.IO. This setup will include a server to manage the game state and client-side code to render the game and handle user input. { "name": "multiplayer-pong", "version": "1.0.0", "description": "A simple multiplayer Pong game", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.17.1", "socket.io": "^4.0.0" }, "author": "", "license": "ISC" } const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server); const PORT = process.env.PORT || 3000; app.use(express.static('public')); let players = {}; let ball = { x: 300, y: 200, dx: 4, dy: 4, radius: 10 }; // Increased speed let gameStarted = false; let gameInterval; const PADDLE_HEIGHT = 100; const PADDLE_WIDTH = 10; const CANVAS_WIDTH = 600; const CANVAS_HEIGHT = 400; const PADDLE_SPEED = 8; // Increased paddle speed function resetBall() { ball.x = CANVAS_WIDTH / 2; ball.y = CANVAS_HEIGHT / 2; // Randomize initial direction slightly ball.dx = (Math.random() > 0.5 ? 1 : -1) * (4 + Math.random()); ball.dy = (Math.random() > 0.5 ? 1 : -1) * (4 + Math.random()); } function updateGame() { if (!gameStarted) return; // Move ball ball.x += ball.dx; ball.y += ball.dy; // Wall collision (top/bottom) if (ball.y + ball.radius > CANVAS_HEIGHT || ball.y - ball.radius < 0) { ball.dy *= -1; } // Paddle collision const player1 = players[Object.keys(players)[0]]; const player2 = players[Object.keys(players)[1]]; if (player1 && player2) { // Player 1 paddle collision if ( ball.x - ball.radius < PADDLE_WIDTH && ball.y > player1.y && ball.y < player1.y + PADDLE_HEIGHT ) { ball.dx *= -1.05; // Increase speed slightly on hit ball.dy += (ball.y - (player1.y + PADDLE_HEIGHT / 2)) * 0.1; // Add spin based on hit position } // Player 2 paddle collision if ( ball.x + ball.radius > CANVAS_WIDTH - PADDLE_WIDTH && ball.y > player2.y && ball.y < player2.y + PADDLE_HEIGHT ) { ball.dx *= -1.05; // Increase speed slightly on hit ball.dy += (ball.y - (player2.y + PADDLE_HEIGHT / 2)) * 0.1; // Add spin based on hit position } } // Score points if (ball.x - ball.radius < 0) { if (player2) player2.score++; io.emit('scoreUpdate', { player1: player1?.score ?? 0, player2: player2?.score ?? 0 }); resetBall(); } else if (ball.x + ball.radius > CANVAS_WIDTH) { if (player1) player1.score++; io.emit('scoreUpdate', { player1: player1?.score ?? 0, player2: player2?.score ?? 0 }); resetBall(); } // Clamp ball speed const speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy); const maxSpeed = 15; if (speed > maxSpeed) { ball.dx = (ball.dx / speed) * maxSpeed; ball.dy = (ball.dy / speed) * maxSpeed; } // Broadcast game state io.emit('gameState', { players, ball }); } io.on('connection', (socket) => { console.log('A user connected:', socket.id); // Assign player number let playerNumber = 0; if (Object.keys(players).length === 0) { playerNumber = 1; } else if (Object.keys(players).length === 1) { playerNumber = 2; } else { // Spectator or game full socket.emit('gameFull'); console.log('Game full, spectator connected:', socket.id); // Send initial state to spectator socket.emit('gameState', { players, ball }); socket.emit('scoreUpdate', { player1: players[Object.keys(players)[0]]?.score ?? 0, player2: players[Object.keys(players)[1]]?.score ?? 0 }); return; // Don't add as a player } players[socket.id] = { id: socket.id, number: playerNumber, y: CANVAS_HEIGHT / 2 - PADDLE_HEIGHT / 2, // Initial position centered score: 0, }; console.log(`Player ${playerNumber} connected: ${socket.id}`); socket.emit('playerAssignment', playerNumber); // Tell the client which player they are io.emit('gameState', { players, ball }); // Send initial state to all io.emit('scoreUpdate', { player1: players[Object.keys(players)[0]]?.score ?? 0, player2: players[Object.keys(players)[1]]?.score ?? 0 }); // Start game if two players are connected if (Object.keys(players).length === 2 && !gameStarted) { gameStarted = true; resetBall(); // Reset ball position when game starts gameInterval = setInterval(updateGame, 1000 / 60); // 60 FPS console.log('Game started!'); io.emit('gameStart'); // Notify clients game has started } socket.on('paddleMove', (data) => { const player = players[socket.id]; if (player) { if (data.direction === 'up') { player.y -= PADDLE_SPEED; } else if (data.direction === 'down') { player.y += PADDLE_SPEED; } // Prevent paddle from going out of bounds player.y = Math.max(0, Math.min(CANVAS_HEIGHT - PADDLE_HEIGHT, player.y)); // No need to broadcast here, gameState broadcast in interval handles it } }); socket.on('disconnect', () => { console.log('User disconnected:', socket.id); const disconnectedPlayer = players[socket.id]; delete players[socket.id]; // If a player disconnects, stop the game and reset if (disconnectedPlayer && disconnectedPlayer.number <= 2) { console.log(`Player ${disconnectedPlayer.number} disconnected. Stopping game.`); gameStarted = false; clearInterval(gameInterval); players = {}; // Reset players resetBall(); ball.dx = 0; // Stop the ball immediately ball.dy = 0; io.emit('gameOver', `Player ${disconnectedPlayer.number} disconnected.`); io.emit('gameState', { players, ball }); // Update clients with empty state io.emit('scoreUpdate', { player1: 0, player2: 0 }); } else { // If a spectator disconnects, just update the state if needed io.emit('gameState', { players, ball }); } }); }); server.listen(PORT, () => { console.log(`Server listening on port ${PORT}`); }); Multiplayer Pong

Multiplayer Pong

Connecting...

Score: 0 - 0

Waiting for players...

body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #222; color: #eee; font-family: sans-serif; } canvas { border: 1px solid #eee; background-color: #000; } #game-info { margin-bottom: 10px; text-align: center; } #status { color: yellow; min-height: 1.2em; /* Prevent layout shift */ } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const playerIdElement = document.getElementById('player-id'); const scoreElement = document.getElementById('score'); const statusElement = document.getElementById('status'); const socket = io(); const PADDLE_HEIGHT = 100; const PADDLE_WIDTH = 10; const BALL_RADIUS = 10; const CANVAS_WIDTH = canvas.width; const CANVAS_HEIGHT = canvas.height; let localPlayers = {}; let localBall = { x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2 }; let playerNumber = null; let keysPressed = {}; function drawPaddle(x, y) { ctx.fillStyle = '#eee'; ctx.fillRect(x, y, PADDLE_WIDTH, PADDLE_HEIGHT); } function drawBall(x, y) { ctx.beginPath(); ctx.arc(x, y, BALL_RADIUS, 0, Math.PI * 2); ctx.fillStyle = '#eee'; ctx.fill(); ctx.closePath(); } function draw() { // Clear canvas ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw paddles for (const id in localPlayers) { const player = localPlayers[id]; if (player.number === 1) { drawPaddle(0, player.y); } else if (player.number === 2) { drawPaddle(CANVAS_WIDTH - PADDLE_WIDTH, player.y); } } // Draw ball drawBall(localBall.x, localBall.y); } socket.on('connect', () => { console.log('Connected to server:', socket.id); }); socket.on('playerAssignment', (number) => { playerNumber = number; playerIdElement.textContent = `You are Player ${playerNumber}`; console.log(`Assigned as Player ${playerNumber}`); statusElement.textContent = 'Waiting for opponent...'; }); socket.on('gameFull', () => { playerIdElement.textContent = 'Game is full. Spectating.'; statusElement.textContent = 'Game in progress...'; }); socket.on('gameStart', () => { statusElement.textContent = 'Game Started!'; }); socket.on('gameState', (gameState) => { localPlayers = gameState.players; localBall = gameState.ball; // Only redraw if the game is active or spectating if (Object.keys(localPlayers).length > 0 || playerNumber === null) { draw(); } }); socket.on('scoreUpdate', (scores) => { scoreElement.textContent = `Score: ${scores.player1} - ${scores.player2}`; }); socket.on('gameOver', (message) => { statusElement.textContent = `Game Over: ${message}`; // Optionally clear the canvas or show a message // ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // ctx.fillStyle = 'yellow'; // ctx.font = '30px Arial'; // ctx.textAlign = 'center'; // ctx.fillText(message, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); }); socket.on('disconnect', () => { console.log('Disconnected from server'); playerIdElement.textContent = 'Disconnected'; statusElement.textContent = 'Connection lost. Please refresh.'; // Clear game state on disconnect localPlayers = {}; localBall = { x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2 }; ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }); // Input handling document.addEventListener('keydown', (event) => { keysPressed[event.key] = true; }); document.addEventListener('keyup', (event) => { keysPressed[event.key] = false; }); // Send input updates periodically setInterval(() => { if (playerNumber) { // Only send if assigned as a player if (keysPressed['ArrowUp'] || keysPressed['w']) { socket.emit('paddleMove', { direction: 'up' }); } if (keysPressed['ArrowDown'] || keysPressed['s']) { socket.emit('paddleMove', { direction: 'down' }); } } }, 1000 / 30); // Send updates 30 times per second // Initial draw (optional, shows empty canvas until state received) draw(); npm install && npm start This sets up the basic structure: 1. **`package.json`**: Defines the project and its dependencies (`express`, `socket.io`). 2. **`server.js`**: The Node.js server using Express to serve static files and Socket.IO to handle real-time communication, game logic, and state synchronization. 3. **`public/index.html`**: The main HTML file for the client, including the canvas element. 4. **`public/style.css`**: Basic styling for the page and canvas. 5. **`public/client.js`**: Client-side JavaScript that connects to the server via Socket.IO, receives game state updates, renders the game on the canvas, and sends player input (paddle movement) back to the server. 6. **`install_and_run.sh`**: A shell script to install dependencies and start the server. Once the server starts, open the preview window. Open a second preview window (or share the URL) to have another player join. The first two connections will be assigned as Player 1 and Player 2. Use the Arrow Up/Down keys (or W/S) to control your paddle.