घूमते हेक्सागन में उछलती गेंद

यहाँ HTML, CSS, और JavaScript कोड है जिसमें एक गेंद घूमते हुए षट्भुज के अंदर उछलती है। गेंद गुरुत्वाकर्षण और घर्षण से प्रभावित होती है, और घूमती दीवारों से यथार्थवादी रूप से टकराती है। ```html <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>घूमता षट्भुज और उछलती गेंद</title> <style> body { margin: 0; overflow: hidden; background-color: #111; font-family: Arial, sans-serif; } canvas { display: block; margin: 0 auto; background-color: #1a1a2e; border-radius: 12px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); } .info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #ccc; background: rgba(0, 0, 0, 0.6); padding: 8px 16px; border-radius: 20px; font-size: 14px; pointer-events: none; border: 1px solid #444; } </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <div class="info">गेंद गुरुत्वाकर्षण और घर्षण के साथ घूमते षट्भुज में उछलती है</div> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // षट्भुज के गुण const hexRadius = 200; const hexCenterX = canvas.width / 2; const hexCenterY = canvas.height / 2; let hexAngle = 0; const hexRotationSpeed = 0.005; // रेडियन प्रति फ्रेम // गेंद के गुण const ballRadius = 12; let ball = { x: hexCenterX + 50, y: hexCenterY - 100, vx: 3, vy: 0, restitution: 0.75, // उछाल गुणांक friction: 0.98, // घर्षण (वायु प्रतिरोध) groundFriction: 0.8 // दीवार से टकराने पर स्पर्शरेखा घर्षण }; // गुरुत्वाकर्षण const gravity = 0.35; // षट्भुज के कोने (विश्व निर्देशांक में) function getHexVertices(angle) { const vertices = []; for (let i = 0; i < 6; i++) { const theta = angle + (i * Math.PI) / 3; const x = hexCenterX + hexRadius * Math.cos(theta); const y = hexCenterY + hexRadius * Math.sin(theta); vertices.push({ x, y }); } return vertices; } // दो बिंदुओं के बीच की दूरी function distance(p1, p2) { return Math.hypot(p1.x - p2.x, p1.y - p2.y); } // बिंदु से रेखा खंड की न्यूनतम दूरी और निकटतम बिंदु function pointToSegmentDist(p, a, b) { const abx = b.x - a.x; const aby = b.y - a.y; const apx = p.x - a.x; const apy = p.y - a.y; const ab2 = abx * abx + aby * aby; let t = (apx * abx + apy * aby) / ab2; t = Math.max(0, Math.min(1, t)); const closest = { x: a.x + t * abx, y: a.y + t * aby }; const dist = distance(p, closest); return { dist, closest, t }; } // गेंद को षट्भुज की दीवारों से टकराने पर संभालना function handleCollisions() { const vertices = getHexVertices(hexAngle); const edges = []; for (let i = 0; i < 6; i++) { const a = vertices[i]; const b = vertices[(i + 1) % 6]; edges.push({ a, b }); } // हर किनारे के लिए जाँच for (let edge of edges) { const { dist, closest, t } = pointToSegmentDist(ball, edge.a, edge.b); if (dist < ballRadius) { // सामान्य वेक्टर (दीवार से बाहर की ओर) let normal = { x: ball.x - closest.x, y: ball.y - closest.y }; const len = Math.hypot(normal.x, normal.y); if (len === 0) { // अगर गेंद का केंद्र किनारे पर है, तो किनारे के लंबवत दिशा लें const edgeVec = { x: edge.b.x - edge.a.x, y: edge.b.y - edge.a.y }; normal = { x: -edgeVec.y, y: edgeVec.x }; } else { normal.x /= len; normal.y /= len; } // गेंद को दीवार से बाहर धकेलें ball.x = closest.x + normal.x * ballRadius; ball.y = closest.y + normal.y * ballRadius; // वेग को सामान्य और स्पर्शरेखा घटकों में विभाजित करें const velDotNormal = ball.vx * normal.x + ball.vy * normal.y; // केवल तभी टकराव संभालें जब गेंद दीवार की ओर बढ़ रही हो if (velDotNormal < 0) { // सामान्य घटक को उछालें const newVelNormal = -velDotNormal * ball.restitution; // स्पर्शरेखा घटक (दीवार के साथ) const tangent = { x: -normal.y, y: normal.x }; const velDotTangent = ball.vx * tangent.x + ball.vy * tangent.y; // स्पर्शरेखा घर्षण लागू करें const newVelTangent = velDotTangent * ball.groundFriction; // नया वेग बनाएं ball.vx = newVelNormal * normal.x + newVelTangent * tangent.x; ball.vy = newVelNormal * normal.y + newVelTangent * tangent.y; } } } } // गेंद को षट्भुज के अंदर रखने के लिए अतिरिक्त सुरक्षा (यदि बाहर चला जाए) function keepInside() { const vertices = getHexVertices(hexAngle); // केंद्र से दूरी जाँचें const distFromCenter = Math.hypot(ball.x - hexCenterX, ball.y - hexCenterY); if (distFromCenter > hexRadius - ballRadius) { // गेंद को केंद्र की ओर धकेलें const angle = Math.atan2(ball.y - hexCenterY, ball.x - hexCenterX); ball.x = hexCenterX + (hexRadius - ballRadius) * Math.cos(angle); ball.y = hexCenterY + (hexRadius - ballRadius) * Math.sin(angle); // वेग को अंदर की ओर मोड़ें const velAngle = Math.atan2(ball.vy, ball.vx); const newAngle = angle + Math.PI; // विपरीत दिशा const speed = Math.hypot(ball.vx, ball.vy); ball.vx = speed * Math.cos(newAngle); ball.vy = speed * Math.sin(newAngle); } } // भौतिकी अद्यतन function update() { // गुरुत्वाकर्षण लागू करें ball.vy += gravity; // वायु घर्षण (वेग को थोड़ा कम करें) ball.vx *= ball.friction; ball.vy *= ball.friction; // स्थिति अद्यतन करें ball.x += ball.vx; ball.y += ball.vy; // टकराव संभालें handleCollisions(); // सुरक्षा जाँच keepInside(); // षट्भुज को घुमाएँ hexAngle += hexRotationSpeed; } // ड्राइंग फ़ंक्शन function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // षट्भुज बनाएं const vertices = getHexVertices(hexAngle); ctx.beginPath(); ctx.moveTo(vertices[0].x, vertices[0].y); for (let i = 1; i < 6; i++) { ctx.lineTo(vertices[i].x, vertices[i].y); } ctx.closePath(); ctx.strokeStyle = '#00d4ff'; ctx.lineWidth = 3; ctx.shadowColor = '#00d4ff'; ctx.shadowBlur = 15; ctx.stroke(); ctx.shadowBlur = 0; // षट्भुज के कोनों पर छोटे बिंदु ctx.fillStyle = '#ff6b6b'; for (let v of vertices) { ctx.beginPath(); ctx.arc(v.x, v.y, 5, 0, Math.PI * 2); ctx.fill(); } // गेंद बनाएं ctx.beginPath(); ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2); const gradient = ctx.createRadialGradient(ball.x - 3, ball.y - 3, 2, ball.x, ball.y, ballRadius); gradient.addColorStop(0, '#fff'); gradient.addColorStop(0.5, '#ff9f43'); gradient.addColorStop(1, '#e17055'); ctx.fillStyle = gradient; ctx.shadowColor = '#ff9f43'; ctx.shadowBlur = 20; ctx.fill(); ctx.shadowBlur = 0; // गेंद की चमक ctx.beginPath(); ctx.arc(ball.x - 3, ball.y - 3, 3, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.fill(); } // एनीमेशन लूप function animate() { update(); draw(); requestAnimationFrame(animate); } // शुरू करें animate(); </script> </body> </html> ``` **कोड की व्याख्या:** 1. **षट्भुज (Hexagon):** यह केंद्र के चारों ओर घूमता है। इसके 6 कोने हैं, और यह `hexRotationSpeed` की दर से घूमता है। 2. **गेंद (Ball):** इसमें स्थिति (`x`, `y`), वेग (`vx`, `vy`), उछाल गुणांक (`restitution`), और घर्षण गुणांक (`friction`) होते हैं। 3. **गुरुत्वाकर्षण (Gravity):** हर फ्रेम में `vy` में जुड़ता है, जिससे गेंद नीचे गिरती है। 4. **घर्षण (Friction):** - वायु घर्षण (`friction`) वेग को धीरे-धीरे कम करता है। - दीवार से टकराने पर स्पर्शरेखा घर्षण (`groundFriction`) लागू होता है। 5. **टकराव (Collision):** - हर किनारे के लिए, गेंद के केंद्र से निकटतम बिंदु की दूरी निकाली जाती है। - यदि दूरी गेंद की त्रिज्या से कम है, तो गेंद को बाहर धकेला जाता है और वेग को सामान्य (normal) और स्पर्शरेखा (tangent) घटकों में विभाजित करके उछाल और घर्षण लागू किया जाता है। 6. **सुरक्षा जाँच:** यदि गेंद किसी कारण से षट्भुज से बाहर चली जाए, तो उसे वापस अंदर धकेल दिया जाता है। **विज़ुअल प्रभाव:** षट्भुज नीली चमक के साथ, गेंद नारंगी-लाल ग्रेडिएंट के साथ दिखती है, और कोनों पर लाल बिंदु हैं। आप कोड को कॉपी करके अपने ब्राउज़र में चला सकते हैं। गेंद घूमते षट्भुज के अंदर गुरुत्वाकर्षण और घर्षण के साथ यथार्थवादी रूप से उछलती है।