3D Realistic Earth Destroyer Game

import { createApp } from 'vue'; import GameUI from './src/GameUI.vue'; import { initThreeGame, onGameEvent, resetGame } from './src/three-game.js'; // Mount Vue UI const app = createApp(GameUI); app.mount('#app'); // Start Three.js game initThreeGame(); // Listen for game events and update Vue state onGameEvent((event, payload) => { window.dispatchEvent(new CustomEvent('earth-game-event', { detail: { event, payload } })); }); // Listen for UI events from Vue window.addEventListener('earth-ui-event', e => { const { event } = e.detail; if (event === 'restart') { resetGame(); } }); import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import anime from 'animejs'; // Game state let health = 100; let score = 0; let gameOver = false; let eventCallback = () => {}; // Three.js globals let renderer, scene, camera, controls, earth, clouds, explosions = []; let raycaster, mouse; let animationId; let container; let meteorGroup; let meteorTimer; let earthMaterial, earthMesh, cloudMesh; // Textures const EARTH_TEXTURES = { map: 'https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/threejs/earthmap1k.jpg', bump: 'https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/threejs/earthbump1k.jpg', spec: 'https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/threejs/earthspec1k.jpg', clouds: 'https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/threejs/earthcloudmap.png', cloudsTrans: 'https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/threejs/earthcloudmaptrans.png' }; function emit(event, payload) { eventCallback(event, payload); } export function onGameEvent(cb) { eventCallback = cb; } export function resetGame() { health = 100; score = 0; gameOver = false; emit('restart'); clearMeteors(); clearExplosions(); if (earthMaterial) { earthMaterial.bumpScale = 0.3; earthMaterial.needsUpdate = true; } if (earthMesh) { earthMesh.material.opacity = 1; earthMesh.material.needsUpdate = true; } if (cloudMesh) { cloudMesh.material.opacity = 0.7; cloudMesh.material.needsUpdate = true; } startMeteorShower(); } export function initThreeGame() { // Container container = document.createElement('div'); container.style.position = 'fixed'; container.style.top = '0'; container.style.left = '0'; container.style.width = '100vw'; container.style.height = '100vh'; container.style.zIndex = '0'; document.body.appendChild(container); // Renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); // Scene scene = new THREE.Scene(); // Camera camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 6); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 4; controls.maxDistance = 12; // Lights const ambient = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambient); const dirLight = new THREE.DirectionalLight(0xffffff, 1.2); dirLight.position.set(5, 3, 5); scene.add(dirLight); // Earth const loader = new THREE.TextureLoader(); const earthGeo = new THREE.SphereGeometry(2, 64, 64); earthMaterial = new THREE.MeshPhongMaterial({ map: loader.load(EARTH_TEXTURES.map), bumpMap: loader.load(EARTH_TEXTURES.bump), bumpScale: 0.3, specularMap: loader.load(EARTH_TEXTURES.spec), specular: new THREE.Color('grey'), shininess: 20, transparent: false }); earthMesh = new THREE.Mesh(earthGeo, earthMaterial); scene.add(earthMesh); // Clouds const cloudGeo = new THREE.SphereGeometry(2.03, 64, 64); const cloudMat = new THREE.MeshPhongMaterial({ map: loader.load(EARTH_TEXTURES.cloudsTrans), transparent: true, opacity: 0.7, depthWrite: false }); cloudMesh = new THREE.Mesh(cloudGeo, cloudMat); scene.add(cloudMesh); // Meteors meteorGroup = new THREE.Group(); scene.add(meteorGroup); // Raycaster for click detection raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); // Events window.addEventListener('resize', onWindowResize); renderer.domElement.addEventListener('pointerdown', onPointerDown); // Start game health = 100; score = 0; gameOver = false; emit('update', { health, score }); startMeteorShower(); animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { animationId = requestAnimationFrame(animate); // Rotate earth and clouds earthMesh.rotation.y += 0.0008; cloudMesh.rotation.y += 0.0012; // Animate meteors updateMeteors(); // Animate explosions updateExplosions(); controls.update(); renderer.render(scene, camera); } function startMeteorShower() { clearInterval(meteorTimer); meteorTimer = setInterval(() => { if (!gameOver) spawnMeteor(); }, 1200); } function clearMeteors() { meteorGroup.children.forEach(m => meteorGroup.remove(m)); } function clearExplosions() { explosions.forEach(e => scene.remove(e.mesh)); explosions = []; } function spawnMeteor() { // Random position above earth const phi = Math.random() * Math.PI; const theta = Math.random() * Math.PI * 2; const r = 6 + Math.random() * 2; const x = r * Math.sin(phi) * Math.cos(theta); const y = r * Math.cos(phi); const z = r * Math.sin(phi) * Math.sin(theta); // Target: random point on earth const tPhi = Math.random() * Math.PI; const tTheta = Math.random() * Math.PI * 2; const tx = 2 * Math.sin(tPhi) * Math.cos(tTheta); const ty = 2 * Math.cos(tPhi); const tz = 2 * Math.sin(tPhi) * Math.sin(tTheta); // Meteor geometry const geo = new THREE.SphereGeometry(0.13 + Math.random() * 0.08, 12, 12); const mat = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5, metalness: 0.7, emissive: 0xff6600, emissiveIntensity: 0.7 }); const meteor = new THREE.Mesh(geo, mat); meteor.position.set(x, y, z); meteor.userData = { velocity: new THREE.Vector3((tx - x) * 0.012, (ty - y) * 0.012, (tz - z) * 0.012), target: new THREE.Vector3(tx, ty, tz), alive: true }; meteorGroup.add(meteor); } function updateMeteors() { for (let i = meteorGroup.children.length - 1; i >= 0; i--) { const meteor = meteorGroup.children[i]; if (!meteor.userData.alive) continue; meteor.position.add(meteor.userData.velocity); // Trail effect if (!meteor.userData.trail) { const trailGeo = new THREE.CylinderGeometry(0.04, 0.12, 0.7, 8, 1, true); const trailMat = new THREE.MeshBasicMaterial({ color: 0xffe066, transparent: true, opacity: 0.5, side: THREE.DoubleSide }); const trail = new THREE.Mesh(trailGeo, trailMat); trail.position.set(0, -0.35, 0); trail.rotation.x = Math.PI / 2; meteor.add(trail); meteor.userData.trail = trail; } // Check collision with earth if (meteor.position.distanceTo(new THREE.Vector3(0, 0, 0)) < 2.1) { meteor.userData.alive = false; meteorGroup.remove(meteor); createExplosion(meteor.position); damageEarth(); } } } function onPointerDown(event) { if (gameOver) return; // Convert mouse to normalized device coordinates const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(meteorGroup.children, false); if (intersects.length > 0) { const meteor = intersects[0].object; if (meteor.userData.alive) { meteor.userData.alive = false; meteorGroup.remove(meteor); createExplosion(meteor.position, true); score += 10; emit('update', { health, score }); } } } function createExplosion(pos, isPlayer = false) { // Simple expanding sphere with anime.js const geo = new THREE.SphereGeometry(0.2, 16, 16); const mat = new THREE.MeshBasicMaterial({ color: isPlayer ? 0x66ccff : 0xff3333, transparent: true, opacity: 0.7 }); const mesh = new THREE.Mesh(geo, mat); mesh.position.copy(pos); scene.add(mesh); const explosion = { mesh, t: 0 }; explosions.push(explosion); anime({ targets: mesh.scale, x: [1, 2.5], y: [1, 2.5], z: [1, 2.5], duration: 400, easing: 'easeOutCubic' }); anime({ targets: mat, opacity: [0.7, 0], duration: 600, easing: 'linear', complete: () => { scene.remove(mesh); explosions = explosions.filter(e => e.mesh !== mesh); } }); } function updateExplosions() { // No-op, handled by anime.js } function damageEarth() { health -= 15 + Math.floor(Math.random() * 8); if (health < 0) health = 0; emit('update', { health, score }); // Earth damage effect anime({ targets: earthMaterial, bumpScale: [0.3, 0.6, 0.3], duration: 400, easing: 'easeInOutSine' }); anime({ targets: earthMesh.material, opacity: [1, 0.7, 1], duration: 400, easing: 'easeInOutSine' }); anime({ targets: cloudMesh.material, opacity: [0.7, 0.3, 0.7], duration: 400, easing: 'easeInOutSine' }); if (health <= 0 && !gameOver) { endGame(); } } function endGame() { gameOver = true; emit('gameover'); clearInterval(meteorTimer); // Earth destruction animation anime({ targets: earthMesh.material, opacity: [1, 0], duration: 1200, easing: 'easeInCubic' }); anime({ targets: cloudMesh.material, opacity: [0.7, 0], duration: 900, easing: 'easeInCubic' }); }