थ्री.जेएस प्लेन गेम

यहाँ एक Three.js गेम है जहाँ आप एक हवाई जहाज़ को नियंत्रित करते हैं: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three.js Plane Game</title> <style> body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; } #info { position: absolute; top: 20px; left: 20px; color: white; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 5px; font-size: 14px; pointer-events: none; z-index: 100; } #controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 5px; font-size: 12px; text-align: center; pointer-events: none; z-index: 100; } </style> </head> <body> <div id="info">🏆 Score: 0</div> <div id="controls">⬆️⬇️⬅️➡️ Arrow Keys to move | Space to boost</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // Game variables let score = 0; let gameOver = false; let speed = 0.5; let boostActive = false; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Sky blue scene.fog = new THREE.Fog(0x87CEEB, 100, 500); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 10, 20); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(50, 100, 50); directionalLight.castShadow = true; scene.add(directionalLight); // Create plane const plane = createPlane(); scene.add(plane); // Create ground const groundGeometry = new THREE.PlaneGeometry(1000, 1000); const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22 }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.position.y = -2; ground.receiveShadow = true; scene.add(ground); // Create obstacles const obstacles = []; const obstacleCount = 20; for (let i = 0; i < obstacleCount; i++) { const obstacle = createObstacle(); obstacle.position.set( Math.random() * 200 - 100, Math.random() * 20 + 2, Math.random() * -200 - 50 ); scene.add(obstacle); obstacles.push(obstacle); } // Create collectibles const collectibles = []; const collectibleCount = 30; for (let i = 0; i < collectibleCount; i++) { const collectible = createCollectible(); collectible.position.set( Math.random() * 200 - 100, Math.random() * 15 + 3, Math.random() * -200 - 50 ); scene.add(collectible); collectibles.push(collectible); } // Create clouds const clouds = []; for (let i = 0; i < 20; i++) { const cloud = createCloud(); cloud.position.set( Math.random() * 200 - 100, Math.random() * 30 + 10, Math.random() * -200 - 50 ); scene.add(cloud); clouds.push(cloud); } // Create plane function function createPlane() { const planeGroup = new THREE.Group(); // Fuselage const fuselageGeometry = new THREE.CylinderGeometry(0.5, 0.3, 3, 8); const fuselageMaterial = new THREE.MeshPhongMaterial({ color: 0xCC0000 }); const fuselage = new THREE.Mesh(fuselageGeometry, fuselageMaterial); fuselage.rotation.x = Math.PI / 2; planeGroup.add(fuselage); // Wings const wingGeometry = new THREE.BoxGeometry(4, 0.1, 1); const wingMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 }); const wings = new THREE.Mesh(wingGeometry, wingMaterial); wings.position.y = 0.2; planeGroup.add(wings); // Tail const tailGeometry = new THREE.BoxGeometry(0.1, 1, 0.5); const tailMaterial = new THREE.MeshPhongMaterial({ color: 0xCC0000 }); const tail = new THREE.Mesh(tailGeometry, tailMaterial); tail.position.set(0, 0.5, -1.5); planeGroup.add(tail); // Propeller const propellerGroup = new THREE.Group(); const propellerGeometry = new THREE.BoxGeometry(0.1, 2, 0.1); const propellerMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); const propeller = new THREE.Mesh(propellerGeometry, propellerMaterial); propellerGroup.add(propeller); propellerGroup.position.z = 1.5; planeGroup.add(propellerGroup); planeGroup.propeller = propellerGroup; return planeGroup; } // Create obstacle function function createObstacle() { const geometry = new THREE.BoxGeometry(3, 3, 3); const material = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const obstacle = new THREE.Mesh(geometry, material); obstacle.castShadow = true; return obstacle; } // Create collectible function function createCollectible() { const geometry = new THREE.SphereGeometry(0.5, 16, 16); const material = new THREE.MeshPhongMaterial({ color: 0xFFD700, emissive: 0xFFD700, emissiveIntensity: 0.3 }); const collectible = new THREE.Mesh(geometry, material); collectible.castShadow = true; return collectible; } // Create cloud function function createCloud() { const cloudGroup = new THREE.Group(); const cloudMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.8 }); for (let i = 0; i < 5; i++) { const sphereGeometry = new THREE.SphereGeometry(Math.random() * 2 + 1, 8, 8); const sphere = new THREE.Mesh(sphereGeometry, cloudMaterial); sphere.position.set( Math.random() * 4 - 2, Math.random() * 2, Math.random() * 4 - 2 ); cloudGroup.add(sphere); } return cloudGroup; } // Keyboard controls const keys = {}; document.addEventListener('keydown', (e) => { keys[e.code] = true; if (e.code === 'Space') boostActive = true; }); document.addEventListener('keyup', (e) => { keys[e.code] = false; if (e.code === 'Space') boostActive = false; }); // Collision detection function checkCollision(plane, obstacle) { const planeBox = new THREE.Box3().setFromObject(plane); const obstacleBox = new THREE.Box3().setFromObject(obstacle); return planeBox.intersectsBox(obstacleBox); } // Collectible collection function checkCollectible(plane, collectible) { const distance = plane.position.distanceTo(collectible.position); return distance < 2; } // Game loop function animate() { requestAnimationFrame(animate); if (!gameOver) { // Plane movement const moveSpeed = boostActive ? speed * 2 : speed; if (keys['ArrowUp']) plane.position.y += moveSpeed; if (keys['ArrowDown']) plane.position.y -= moveSpeed; if (keys['ArrowLeft']) plane.position.x -= moveSpeed; if (keys['ArrowRight']) plane.position.x += moveSpeed; // Keep plane in bounds plane.position.x = Math.max(-90, Math.min(90, plane.position.x)); plane.position.y = Math.max(0, Math.min(30, plane.position.y)); // Move world towards player const worldSpeed = boostActive ? 0.3 : 0.15; // Move obstacles obstacles.forEach((obstacle, index) => { obstacle.position.z += worldSpeed; if (obstacle.position.z > 20) { obstacle.position.z = -200; obstacle.position.x = Math.random() * 200 - 100; obstacle.position.y = Math.random() * 20 + 2; } // Check collision if (checkCollision(plane, obstacle)) { gameOver = true; document.getElementById('info').textContent = '💥 Game Over! Score: ' + score; document.getElementById('info').style.background = 'rgba(255,0,0,0.7)'; } }); // Move collectibles collectibles.forEach((collectible, index) => { collectible.position.z += worldSpeed; collectible.rotation.y += 0.02; if (collectible.position.z > 20) { collectible.position.z = -200; collectible.position.x = Math.random() * 200 - 100; collectible.position.y = Math.random() * 15 + 3; } // Check collection if (checkCollectible(plane, collectible)) { score += 10; document.getElementById('info').textContent = '🏆 Score: ' + score; collectible.position.z = -200; collectible.position.x = Math.random() * 200 - 100; collectible.position.y = Math.random() * 15 + 3; } }); // Move clouds clouds.forEach(cloud => { cloud.position.z += worldSpeed * 0.5; if (cloud.position.z > 20) { cloud.position.z = -200; cloud.position.x = Math.random() * 200 - 100; cloud.position.y = Math.random() * 30 + 10; } }); // Rotate propeller if (plane.propeller) { plane.propeller.rotation.z += 0.5; } // Camera follows plane camera.position.x = plane.position.x * 0.5; camera.position.y = plane.position.y * 0.5 + 10; camera.lookAt(plane.position.x, plane.position.y, plane.position.z - 10); } renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Start game animate(); </script> </body> </html> ``` ## गेम कैसे खेलें: 1. **तीर कुंजियाँ (Arrow Keys)**: हवाई जहाज़ को ऊपर/नीचे/बाएँ/दाएँ ले जाएँ 2. **स्पेस बार (Space)**: गति बढ़ाने के लिए बूस्ट करें 3. **स्कोर**: सुनहरे गोले (collectibles) इकट्ठा करके अंक प्राप्त करें 4. **बाधाएँ**: भूरे रंग के बक्सों से टकराने से बचें ## गेम की विशेषताएँ: - **3D पर्यावरण**: नीला आकाश, हरा मैदान, और बादल - **गतिशील बाधाएँ**: यादृच्छिक रूप से उत्पन्न होने वाली बाधाएँ - **स्कोरिंग सिस्टम**: सोने के गोले इकट्ठा करके अंक बढ़ाएँ - **बूस्ट मोड**: स्पेस बार दबाकर तेज़ उड़ान - **कैमरा फॉलो**: कैमरा हवाई जहाज़ का अनुसरण करता है - **गेम ओवर**: बाधा से टकराने पर गेम समाप्त इस गेम को चलाने के लिए, कोड को HTML फ़ाइल में सेव करें और ब्राउज़र में खोलें। आपको इंटरनेट कनेक्शन की आवश्यकता होगी क्योंकि यह Three.js लाइब्रेरी को CDN से लोड करता है।