Ping Pong with Obstacles

body { margin: 0; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; color: #fff; touch-action: none; /* Prevent default touch actions like scrolling */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } canvas { display: block; background-color: #000; border: 1px solid #fff; /* Optional: adds a border */ /* Canvas is hidden initially by JS */ display: none; } #menu { text-align: center; padding: 30px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; } #menu h1 { margin-bottom: 20px; } button { padding: 10px 20px; font-size: 1.2em; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; margin: 5px; } button:hover { background-color: #45a049; } .game-button { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10; display: none; /* Hidden initially */ } /* Mobile Controls Styling */ .mobile-controls { position: fixed; bottom: 0; left: 0; width: 100%; display: none; /* Hidden by default */ justify-content: space-between; padding: 15px; box-sizing: border-box; z-index: 20; pointer-events: none; /* Allow clicks through the container */ } .player-controls { display: flex; flex-direction: column; pointer-events: auto; /* Enable clicks on buttons */ } .control-button { padding: 15px 25px; /* Larger buttons for touch */ font-size: 1.1em; margin: 5px 0; opacity: 0.7; width: 100px; /* Fixed width */ } /* Media query or JS can add this class */ .mobile-detected .mobile-controls { display: flex; } .game-active #menu { display: none; } .game-active canvas { display: block; } .game-active #restartButton { display: block; } export class Ball { constructor(x, y, radius, color, canvas) { this.initialX = x; this.initialY = y; this.x = x; this.y = y; this.radius = radius; this.color = color; this.canvas = canvas; this.baseSpeed = 5; // Base speed this.speedMultiplier = 1.0; // Multiplier for current speed this.maxSpeed = 15; // Maximum speed limit this.dx = 0; // Initial velocity set by reset this.dy = 0; // Initial velocity set by reset this.reset(); // Set initial velocity } draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); } update(paddles, obstacles) { this.x += this.dx; this.y += this.dy; // Wall collision (top/bottom) if (this.y + this.radius > this.canvas.height || this.y - this.radius < 0) { this.dy = -this.dy; // Adjust position slightly to prevent sticking if (this.y + this.radius > this.canvas.height) { this.y = this.canvas.height - this.radius; } else if (this.y - this.radius < 0) { this.y = this.radius; } } // Paddle collision paddles.forEach(paddle => { // Find closest point on paddle to ball center let closestX = Math.max(paddle.x, Math.min(this.x, paddle.x + paddle.width)); let closestY = Math.max(paddle.y, Math.min(this.y, paddle.y + paddle.height)); // Calculate distance between ball center and closest point let distX = this.x - closestX; let distY = this.y - closestY; let distanceSquared = (distX * distX) + (distY * distY); // Check for collision (distance squared < radius squared) if (distanceSquared < (this.radius * this.radius)) { // Collision detected! const hitPaddleFace = this.y > paddle.y && this.y < paddle.y + paddle.height; if (hitPaddleFace) { // Hit the front face of the paddle this.dx = -this.dx; // Adjust position to prevent sticking if (this.x < this.canvas.width / 2) { // Left paddle this.x = paddle.x + paddle.width + this.radius; } else { // Right paddle this.x = paddle.x - this.radius; } // Realistic Angle Adjustment let collidePoint = (this.y - (paddle.y + paddle.height / 2)) / (paddle.height / 2); let bounceAngle = collidePoint * (Math.PI / 3); // Max angle 60 degrees // Increase speed multiplier slightly after paddle hit this.speedMultiplier = Math.min(this.speedMultiplier * 1.05, this.maxSpeed / this.baseSpeed); let currentSpeed = this.baseSpeed * this.speedMultiplier; let direction = Math.sign(this.dx); // Keep the horizontal direction after bounce this.dx = direction * currentSpeed * Math.cos(bounceAngle); this.dy = currentSpeed * Math.sin(bounceAngle); } else { // Hit the top or bottom edge of the paddle this.dy = -this.dy; // Adjust position to prevent sticking if (this.y < paddle.y + paddle.height / 2) { // Hit top edge this.y = paddle.y - this.radius; } else { // Hit bottom edge this.y = paddle.y + paddle.height + this.radius; } // Maintain speed magnitude on edge hits (or slightly reduce) let speedMag = Math.sqrt(this.dx * this.dx + this.dy * this.dy); this.dx *= (this.baseSpeed * this.speedMultiplier) / speedMag; this.dy *= (this.baseSpeed * this.speedMultiplier) / speedMag; } } }); // Obstacle collision (Circle-Circle) obstacles.forEach(obstacle => { const distX = this.x - obstacle.x; const distY = this.y - obstacle.y; const distance = Math.sqrt(distX * distX + distY * distY); const minDistance = this.radius + obstacle.radius; if (distance < minDistance) { // Collision detected const normalX = distX / distance; const normalY = distY / distance; const relativeVelX = this.dx; const relativeVelY = this.dy; const dotProduct = relativeVelX * normalX + relativeVelY * normalY; // Reflect velocity this.dx -= 2 * dotProduct * normalX; this.dy -= 2 * dotProduct * normalY; // Adjust position const overlap = minDistance - distance; this.x += normalX * (overlap + 0.1); this.y += normalY * (overlap + 0.1); // Optional: Slightly reduce speed multiplier on obstacle hit // this.speedMultiplier = Math.max(1.0, this.speedMultiplier * 0.98); // let speedMag = Math.sqrt(this.dx * this.dx + this.dy * this.dy); // let targetSpeed = this.baseSpeed * this.speedMultiplier; // if (speedMag > 0) { // this.dx *= targetSpeed / speedMag; // this.dy *= targetSpeed / speedMag; // } } }); // Clamp speed if it somehow exceeds max speed let speedMag = Math.sqrt(this.dx * this.dx + this.dy * this.dy); if (speedMag > this.maxSpeed) { const scale = this.maxSpeed / speedMag; this.dx *= scale; this.dy *= scale; } } reset(serveDirection = 0) { // serveDirection: 0=random, 1=right, -1=left this.x = this.initialX; this.y = this.initialY; this.speedMultiplier = 1.0; // Reset speed multiplier let initialSpeed = this.baseSpeed; let horizontalDirection; if (serveDirection === 0) { horizontalDirection = (Math.random() > 0.5 ? 1 : -1); } else { horizontalDirection = serveDirection; } this.dx = horizontalDirection * initialSpeed * 0.7; this.dy = (Math.random() > 0.5 ? 1 : -1) * initialSpeed; } isOutOfBounds() { return this.x + this.radius < 0 || this.x - this.radius > this.canvas.width; } scoredOnLeft() { return this.x + this.radius < 0; } scoredOnRight() { return this.x - this.radius > this.canvas.width; } } export class Paddle { constructor(x, y, width, height, color, canvas) { this.initialX = x; this.initialY = y; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.canvas = canvas; this.speed = 8; this.dy = 0; // Current vertical movement speed } draw(ctx) { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); } update() { this.y += this.dy; // Keep paddle within canvas bounds if (this.y < 0) { this.y = 0; } if (this.y + this.height > this.canvas.height) { this.y = this.canvas.height - this.height; } } moveUp() { this.dy = -this.speed; } moveDown() { this.dy = this.speed; } stop() { this.dy = 0; } reset() { this.x = this.initialX; this.y = this.initialY; this.dy = 0; } } export class Obstacle { constructor(x, y, radius, color) { this.x = x; // Center x this.y = y; // Center y this.radius = radius; this.color = color; } draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // Draw circle ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); } } import { Ball } from './ball.js'; import { Paddle } from './paddle.js'; import { Obstacle } from './obstacle.js'; // --- DOM Elements --- const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const menu = document.getElementById('menu'); const startButton = document.getElementById('startButton'); const restartButton = document.getElementById('restartButton'); const mobileControlsContainer = document.getElementById('mobileControls'); const p1UpButton = document.getElementById('controlsP1Up'); const p1DownButton = document.getElementById('controlsP1Down'); const p2UpButton = document.getElementById('controlsP2Up'); const p2DownButton = document.getElementById('controlsP2Down'); // --- Game State --- let gameState = 'menu'; // 'menu', 'playing', 'paused', 'gameOver' let animationFrameId = null; let scorePlayer1 = 0; let scorePlayer2 = 0; const keysPressed = {}; let isMobile = false; // --- Game Constants & Elements --- const paddleWidth = 10; const paddleHeight = 100; const ballRadius = 8; const obstacleRadius = 30; let player1, player2, ball, obstacles = []; // --- Utility Functions --- function isMobileDevice() { // Basic check, can be more robust return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2); } function resizeCanvas() { // Make canvas responsive (optional, simple scaling here) const aspectRatio = 800 / 600; const availableWidth = window.innerWidth * 0.9; const availableHeight = window.innerHeight * 0.9; let newWidth = availableWidth; let newHeight = newWidth / aspectRatio; if (newHeight > availableHeight) { newHeight = availableHeight; newWidth = newHeight * aspectRatio; } canvas.width = newWidth > 800 ? 800 : newWidth; // Max width canvas.height = newHeight > 600 ? 600 : newHeight; // Max height // Re-initialize or reposition elements if needed after resize // For simplicity, we'll re-init on start/restart } // --- Game Initialization and Reset --- function initializeGameElements() { player1 = new Paddle( 20, canvas.height / 2 - paddleHeight / 2, paddleWidth, paddleHeight, '#fff', canvas ); player2 = new Paddle( canvas.width - 20 - paddleWidth, canvas.height / 2 - paddleHeight / 2, paddleWidth, paddleHeight, '#fff', canvas ); ball = new Ball( canvas.width / 2, canvas.height / 2, ballRadius, '#fff', canvas ); obstacles = [ new Obstacle(canvas.width / 2, canvas.height / 4, obstacleRadius, '#f00'), new Obstacle(canvas.width / 2, (canvas.height * 3) / 4, obstacleRadius, '#00f'), new Obstacle(canvas.width / 4 + obstacleRadius, canvas.height / 2, obstacleRadius, '#0f0'), new Obstacle((canvas.width * 3) / 4 - obstacleRadius, canvas.height / 2, obstacleRadius, '#ff0'), new Obstacle(canvas.width / 2, canvas.height / 2, obstacleRadius * 1.2, '#808'), ]; } function resetGame() { scorePlayer1 = 0; scorePlayer2 = 0; if (player1) player1.reset(); if (player2) player2.reset(); if (ball) ball.reset(); // Reset ball position and speed // Obstacles don't need reset unless they move console.log("Game Reset"); } function startGame() { resizeCanvas(); // Set initial canvas size initializeGameElements(); // Create game objects based on canvas size resetGame(); // Set initial scores and positions gameState = 'playing'; document.body.classList.add('game-active'); // Show canvas/hide menu via CSS if (isMobile) { document.body.classList.add('mobile-detected'); // Show controls via CSS } if (animationFrameId) cancelAnimationFrame(animationFrameId); // Stop previous loop if any gameLoop(); // Start the animation loop console.log("Game Started"); } // --- Input Handling --- function handleKeyDown(event) { if (gameState !== 'playing' || isMobile) return; // Only handle keys during play on desktop keysPressed[event.key.toLowerCase()] = true; updatePaddleMovement(); } function handleKeyUp(event) { if (gameState !== 'playing' || isMobile) return; keysPressed[event.key.toLowerCase()] = false; updatePaddleMovement(); } function updatePaddleMovement() { // Player 1 (W/S) if (keysPressed['w']) player1.moveUp(); else if (keysPressed['s']) player1.moveDown(); else player1.stop(); // Player 2 (ArrowUp/ArrowDown) if (keysPressed['arrowup']) player2.moveUp(); else if (keysPressed['arrowdown']) player2.moveDown(); else player2.stop(); } // Mobile Touch Controls function setupMobileControls() { p1UpButton.addEventListener('touchstart', (e) => { e.preventDefault(); if (gameState === 'playing') player1.moveUp(); }); p1UpButton.addEventListener('touchend', (e) => { e.preventDefault(); if (gameState === 'playing') player1.stop(); }); p1DownButton.addEventListener('touchstart', (e) => { e.preventDefault(); if (gameState === 'playing') player1.moveDown(); }); p1DownButton.addEventListener('touchend', (e) => { e.preventDefault(); if (gameState === 'playing') player1.stop(); }); p2UpButton.addEventListener('touchstart', (e) => { e.preventDefault(); if (gameState === 'playing') player2.moveUp(); }); p2UpButton.addEventListener('touchend', (e) => { e.preventDefault(); if (gameState === 'playing') player2.stop(); }); p2DownButton.addEventListener('touchstart', (e) => { e.preventDefault(); if (gameState === 'playing') player2.moveDown(); }); p2DownButton.addEventListener('touchend', (e) => { e.preventDefault(); if (gameState === 'playing') player2.stop(); }); } // --- Drawing Functions --- function drawScores() { ctx.fillStyle = '#fff'; ctx.font = `${Math.max(18, canvas.width * 0.04)}px Arial`; // Responsive font size ctx.textAlign = 'center'; ctx.fillText(scorePlayer1, canvas.width / 4, 50); ctx.fillText(scorePlayer2, (canvas.width * 3) / 4, 50); ctx.textAlign = 'start'; } function drawCenterLine() { ctx.strokeStyle = '#555'; ctx.lineWidth = 2; ctx.setLineDash([10, 10]); ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); ctx.setLineDash([]); } // --- Game Loop --- function gameLoop() { if (gameState !== 'playing') { // Optionally draw paused state or game over screen here return; } // 1. Clear Canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // 2. Update Objects player1.update(); player2.update(); ball.update([player1, player2], obstacles); // 3. Check for Score if (ball.isOutOfBounds()) { let serveDirection = 0; if (ball.scoredOnLeft()) { scorePlayer2++; serveDirection = -1; // Serve to player 1 (left) } else if (ball.scoredOnRight()) { scorePlayer1++; serveDirection = 1; // Serve to player 2 (right) } ball.reset(serveDirection); // Reset ball position and speed, serve to winner // Check for game over condition if needed } // 4. Draw Objects drawCenterLine(); player1.draw(ctx); player2.draw(ctx); obstacles.forEach(obstacle => obstacle.draw(ctx)); ball.draw(ctx); drawScores(); // 5. Request Next Frame animationFrameId = requestAnimationFrame(gameLoop); } // --- Event Listeners --- startButton.addEventListener('click', startGame); restartButton.addEventListener('click', () => { // Reset scores and positions, then ensure the game loop continues resetGame(); if (gameState !== 'playing') { startGame(); // If game wasn't running, start it fully } }); window.addEventListener('resize', () => { // Only resize if game is active, otherwise handled by startGame if (gameState === 'playing') { resizeCanvas(); // Re-initialize elements if resize logic requires it // initializeGameElements(); // This might reset positions undesirably during play } }); document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); // --- Initialization --- isMobile = isMobileDevice(); if (isMobile) { console.log("Mobile device detected."); setupMobileControls(); // Optionally adjust game parameters for mobile // paddleHeight = 80; // Example: smaller paddles } else { console.log("Desktop device detected."); } // Initial setup: Show menu, hide game console.log("Game ready. Press Start.");