पोंग गेम विद एआई ऑपोनेंट

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>पोंग गेम</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2c3e50; font-family: 'Arial', sans-serif; } .game-container { background: #1a1a2e; padding: 25px 25px 20px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } canvas { display: block; background: #0f1923; border-radius: 12px; border: 2px solid #00d4ff; box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.3); } .score-panel { display: flex; justify-content: space-between; align-items: center; color: #e0f7fa; padding: 10px 10px 0; font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; } .player-score, .ai-score { background: black; padding: 4px 24px; border-radius: 30px; color: #00e5ff; text-shadow: 0 0 12px #00e5ff; } .message { text-align: center; color: #b0bec5; font-size: 0.9rem; margin: 10px 0 0; background: #16213e; padding: 6px; border-radius: 30px; } .controls { display: flex; justify-content: center; gap: 30px; color: #b0bec5; font-size: 0.9rem; margin-top: 10px; } .controls span { background: #0d1b2a; padding: 5px 15px; border-radius: 20px; } </style> </head> <body> <div class="game-container"> <div class="score-panel"> <div class="player-score" id="playerScore">0</div> <div class="ai-score" id="aiScore">0</div> </div> <canvas id="pongCanvas" width="800" height="450"></canvas> <div class="message">←/→ (ऊपर / नीचे) तीर कुंजियों से पैडल चलाएं</div> <div class="controls"> <span>↑ ऊपर</span> <span>↓ नीचे</span> <span>रोकने के लिए स्पेस</span> </div> </div> <script> (function() { // कैनवास सेटअप const canvas = document.getElementById('pongCanvas'); const ctx = canvas.getContext('2d'); // पैडल और गेंद के आयाम const PADDLE_WIDTH = 14; const PADDLE_HEIGHT = 90; const BALL_SIZE = 14; // खेल की स्थिति let leftPaddleY = canvas.height / 2 - PADDLE_HEIGHT / 2; let rightPaddleY = canvas.height / 2 - PADDLE_HEIGHT / 2; // बॉल की प्रारंभिक स्थिति और वेग let ballX = canvas.width / 2; let ballY = canvas.height / 2; let ballSpeedX = 5.2; let ballSpeedY = 3.8; // स्कोर let playerScore = 0; let aiScore = 0; // की-प्रेस फ्लैग्स let upPressed = false; let downPressed = false; let gamePaused = false; // AI गति (धीमी, खेलने योग्य) const AI_SPEED = 4.2; // संदर्भ के लिए स्कोर एलिमेंट्स const playerScoreEl = document.getElementById('playerScore'); const aiScoreEl = document.getElementById('aiScore'); // खेल रीसेट (स्कोर के बाद) function resetBall() { ballX = canvas.width / 2; ballY = canvas.height / 2; // रैंडम दिशा (बाएँ या दाएँ) - जो स्कोर किया उसके विपरीत थोड़ा संतुलन const direction = (Math.random() < 0.5) ? 1 : -1; ballSpeedX = 5.5 * direction; ballSpeedY = (Math.random() * 4 + 2) * (Math.random() < 0.5 ? -1 : 1); } // स्कोर बोर्ड अपडेट function updateScoreUI() { playerScoreEl.textContent = playerScore; aiScoreEl.textContent = aiScore; } // कीबोर्ड इवेंट function handleKeyDown(e) { // स्पेस (कोड 32) से पॉज़/अनपॉज़ if (e.key === ' ' || e.code === 'Space') { e.preventDefault(); gamePaused = !gamePaused; return; } // केवल तीर कुंजी (ऊपर/नीचे) if (e.key === 'ArrowUp' || e.code === 'ArrowUp') { e.preventDefault(); upPressed = true; } else if (e.key === 'ArrowDown' || e.code === 'ArrowDown') { e.preventDefault(); downPressed = true; } } function handleKeyUp(e) { if (e.key === 'ArrowUp' || e.code === 'ArrowUp') { e.preventDefault(); upPressed = false; } else if (e.key === 'ArrowDown' || e.code === 'ArrowDown') { e.preventDefault(); downPressed = false; } } // विंडो फोकस खोने पर रीसेट (अटकी हुई कुंजी रोकें) function resetKeys() { upPressed = false; downPressed = false; } window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); window.addEventListener('blur', resetKeys); // AI नियंत्रण - सरल अनुसरण function aiMove() { // गेंद दाएँ की ओर आ रही है या बाएँ, लेकिन AI हमेशा गेंद का पीछा करता है // गेंद ऊपर की ओर जा रही है const ballCenter = ballY + BALL_SIZE / 2; const paddleCenter = rightPaddleY + PADDLE_HEIGHT / 2; // गति को सीमित करें, इतना तेज़ नहीं कि अजेय हो if (paddleCenter < ballCenter - 6) { rightPaddleY += AI_SPEED; } else if (paddleCenter > ballCenter + 6) { rightPaddleY -= AI_SPEED; } // पैडल को सीमा में रखें rightPaddleY = Math.max(0, Math.min(canvas.height - PADDLE_HEIGHT, rightPaddleY)); } // टकराव और गति function updateGame() { if (gamePaused) return; // 1. प्लेयर पैडल मूवमेंट (तीर कुंजी) const PLAYER_SPEED = 6.8; if (upPressed && leftPaddleY > 0) { leftPaddleY -= PLAYER_SPEED; } if (downPressed && leftPaddleY < canvas.height - PADDLE_HEIGHT) { leftPaddleY += PLAYER_SPEED; } // 2. AI पैडल अपडेट aiMove(); // 3. बॉल मूवमेंट ballX += ballSpeedX; ballY += ballSpeedY; // 4. ऊपर/नीचे दीवार से टक्कर if (ballY <= 0) { ballY = 0; ballSpeedY = Math.abs(ballSpeedY); // नीचे की ओर } else if (ballY >= canvas.height - BALL_SIZE) { ballY = canvas.height - BALL_SIZE; ballSpeedY = -Math.abs(ballSpeedY); // ऊपर की ओर } // 5. बाएँ पैडल (प्लेयर) से टक्कर if (ballX <= PADDLE_WIDTH && ballX > 0) { // बॉल पैडल की ऊँचाई के भीतर है? if (ballY + BALL_SIZE > leftPaddleY && ballY < leftPaddleY + PADDLE_HEIGHT) { ballX = PADDLE_WIDTH; // बॉल को पैडल के किनारे पर रखें // गति की दिशा को दाएँ तरफ़ मोड़ें, इम्पैक्ट बिंदु के अनुसार कोण बदलें const relativeIntersect = (ballY + BALL_SIZE / 2) - (leftPaddleY + PADDLE_HEIGHT / 2); const normalized = relativeIntersect / (PADDLE_HEIGHT / 2); // -1 से 1 के बीच // अधिकतम कोण लगभग 60° (1.2 रेडियन) const bounceAngle = normalized * 1.2; ballSpeedX = Math.abs(ballSpeedX) * Math.cos(bounceAngle); ballSpeedY = ballSpeedY * 0.8 + (ballSpeedX * Math.sin(bounceAngle)) * 0.5; // सुनिश्चित करें कि गेंद आगे की ओर बढ़े (दाएँ) if (ballSpeedX < 0) ballSpeedX = Math.abs(ballSpeedX) + 0.15; // नियंत्रण के लिए न्यूनतम गति सुनिश्चित करें if (Math.abs(ballSpeedX) < 2.5) ballSpeedX *= 1.1; if (Math.abs(ballSpeedY) < 1.8) ballSpeedY = ballSpeedY > 0 ? 2.0 : -2.0; // पैडल से बाहर नहीं जाने देना ballX = PADDLE_WIDTH + 0.1; } } // 6. दाएँ पैडल (AI) से टक्कर else if (ballX >= canvas.width - PADDLE_WIDTH - BALL_SIZE && ballX < canvas.width - BALL_SIZE) { if (ballY + BALL_SIZE > rightPaddleY && ballY < rightPaddleY + PADDLE_HEIGHT) { ballX = canvas.width - PADDLE_WIDTH - BALL_SIZE - 0.1; // थोड़ा सा पहले const relativeIntersect = (ballY + BALL_SIZE / 2) - (rightPaddleY + PADDLE_HEIGHT / 2); const normalized = relativeIntersect / (PADDLE_HEIGHT / 2); const bounceAngle = normalized * 1.2; ballSpeedX = -Math.abs(ballSpeedX) * Math.cos(bounceAngle); ballSpeedY = ballSpeedY * 0.8 + (Math.abs(ballSpeedX) * Math.sin(bounceAngle)) * 0.5; if (ballSpeedX > 0) ballSpeedX = -Math.abs(ballSpeedX) - 0.15; if (Math.abs(ballSpeedX) < 2.5) ballSpeedX *= 1.1; if (Math.abs(ballSpeedY) < 1.8) ballSpeedY = ballSpeedY > 0 ? 2.0 : -2.0; ballX = canvas.width - PADDLE_WIDTH - BALL_SIZE - 0.1; } } // 7. बाएँ या दाएँ गोल (स्कोर) if (ballX < -10) { // AI स्कोर करता है aiScore++; updateScoreUI(); resetBall(); // दिशा को प्लेयर की ओर घुमाएँ (बाएँ से निकला था) ballSpeedX = Math.abs(ballSpeedX); // दाएँ से बाएँ की ओर? // ताकि खेल जल्दी न उलटे, गति बढ़ाएँ: if (Math.abs(ballSpeedX) < 5) ballSpeedX = 5.0; ballX = canvas.width / 2; ballY = canvas.height / 2; } else if (ballX > canvas.width + 10) { // प्लेयर स्कोर करता है playerScore++; updateScoreUI(); resetBall(); ballSpeedX = -Math.abs(ballSpeedX); // बाएँ की ओर if (Math.abs(ballSpeedX) < 5) ballSpeedX = -5.0; ballX = canvas.width / 2; ballY = canvas.height / 2; } // पैडल को सीमा में रखें (सुरक्षित) leftPaddleY = Math.max(0, Math.min(canvas.height - PADDLE_HEIGHT, leftPaddleY)); rightPaddleY = Math.max(0, Math.min(canvas.height - PADDLE_HEIGHT, rightPaddleY)); } // ड्रा फ़ंक्शन function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // पृष्ठभूमि ctx.fillStyle = '#0f1923'; ctx.fillRect(0, 0, canvas.width, canvas.height); // मध्य रेखा (डैश) ctx.strokeStyle = '#445566'; ctx.lineWidth = 4; ctx.setLineDash([12, 16]); ctx.beginPath(); ctx.moveTo(canvas.width/2, 10); ctx.lineTo(canvas.width/2, canvas.height-10); ctx.stroke(); ctx.setLineDash([]); // बायाँ पैडल (प्लेयर) - हरा-नीला ctx.shadowColor = '#00e5ff'; ctx.shadowBlur = 16; ctx.fillStyle = '#22d3ee'; ctx.fillRect(0, leftPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT); // दायाँ पैडल (AI) - नारंगी ctx.shadowColor = '#ff8c42'; ctx.fillStyle = '#ff9f4a'; ctx.fillRect(canvas.width - PADDLE_WIDTH, rightPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT); // गेंद - चमकता हुआ सफ़ेद ctx.shadowColor = '#ffffff'; ctx.shadowBlur = 20; ctx.fillStyle = '#f1f5f9'; ctx.beginPath(); ctx.arc(ballX, ballY, BALL_SIZE/2, 0, Math.PI * 2); ctx.fill(); // रीसेट शैडो ctx.shadowBlur = 0; // यदि पॉज़ हो तो संदेश if (gamePaused) { ctx.font = 'bold 34px Arial'; ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.shadowColor = '#00bcd4'; ctx.shadowBlur = 10; ctx.fillText('⏸ रुका हुआ', canvas.width/2 - 110, canvas.height/2 - 15); ctx.shadowBlur = 0; } } // एनिमेशन लूप function gameLoop() { updateGame(); draw(); requestAnimationFrame(gameLoop); } // स्कोर को प्रारंभिक रूप से सेट करें updateScoreUI(); // खेल प्रारंभ करें gameLoop(); // सफाई (वैकल्पिक, हालांकि गेम लूप स्थायी है, लेकिन अच्छे अभ्यास के लिए) window.addEventListener('beforeunload', () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); window.removeEventListener('blur', resetKeys); }); })(); </script> </body> </html>