Quantenverschränkung Raumspiel

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quantum Entanglement</title> <style> body { margin: 0; overflow: hidden; background: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #info { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #333; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; background: rgba(255, 255, 255, 0.8); padding: 8px 20px; border-radius: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); pointer-events: none; z-index: 100; text-align: center; } #status { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #555; font-size: 12px; letter-spacing: 1px; background: rgba(255, 255, 255, 0.7); padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(8px); border: 1px solid rgba(0, 0, 0, 0.08); pointer-events: none; z-index: 100; } #score { position: absolute; top: 20px; right: 30px; color: #333; font-size: 16px; font-weight: 300; background: rgba(255, 255, 255, 0.8); padding: 8px 16px; border-radius: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); z-index: 100; pointer-events: none; } #hint { position: absolute; top: 20px; left: 30px; color: #666; font-size: 12px; background: rgba(255, 255, 255, 0.6); padding: 6px 12px; border-radius: 20px; backdrop-filter: blur(8px); border: 1px solid rgba(0, 0, 0, 0.06); z-index: 100; pointer-events: none; } canvas { display: block; } .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div id="info">Quantum Entanglement</div> <div id="status">Click a cluster to unfold its matrix</div> <div id="score">Pairs: 0 / 4</div> <div id="hint">Drag to rotate | Click to unfold</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // ====== GAME STATE ====== const TOTAL_PAIRS = 4; let matchedPairs = 0; let selectedCluster = null; let clusters = []; let isAnimating = false; // ====== SCENE SETUP ====== const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 2, 8); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; 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(5, 10, 7); directionalLight.castShadow = true; scene.add(directionalLight); const pointLight1 = new THREE.PointLight(0x88ccff, 0.5); pointLight1.position.set(-3, 3, 3); scene.add(pointLight1); const pointLight2 = new THREE.PointLight(0xff88cc, 0.5); pointLight2.position.set(3, -2, -3); scene.add(pointLight2); // ====== FROSTED GLASS MATERIAL ====== function createFrostedMaterial(color) { return new THREE.MeshPhysicalMaterial({ color: color, metalness: 0.1, roughness: 0.2, transmission: 0.9, transparent: true, opacity: 0.85, clearcoat: 0.3, clearcoatRoughness: 0.1, envMapIntensity: 1.0 }); } // ====== GEOMETRY GENERATORS ====== // Generate a unique 3D geometric matrix based on a seed function generateMatrixGeometry(seed) { const group = new THREE.Group(); const rng = mulberry32(seed); // Random number of shapes (3-6) const shapeCount = 3 + Math.floor(rng() * 4); for (let i = 0; i < shapeCount; i++) { const shapeType = Math.floor(rng() * 4); const size = 0.15 + rng() * 0.25; const posX = (rng() - 0.5) * 1.2; const posY = (rng() - 0.5) * 1.2; const posZ = (rng() - 0.5) * 1.2; let geometry; switch(shapeType) { case 0: geometry = new THREE.BoxGeometry(size, size, size); break; case 1: geometry = new THREE.TetrahedronGeometry(size); break; case 2: geometry = new THREE.OctahedronGeometry(size); break; case 3: geometry = new THREE.IcosahedronGeometry(size); break; } const material = createFrostedMaterial( new THREE.Color().setHSL(0.5 + rng() * 0.3, 0.3, 0.7) ); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(posX, posY, posZ); mesh.rotation.set(rng() * Math.PI, rng() * Math.PI, rng() * Math.PI); mesh.castShadow = true; mesh.receiveShadow = true; group.add(mesh); } // Add connecting lines for structure const lineMaterial = new THREE.LineBasicMaterial({ color: 0x888888, transparent: true, opacity: 0.3 }); const points = []; for (let i = 0; i < 8; i++) { points.push(new THREE.Vector3( (rng() - 0.5) * 1.5, (rng() - 0.5) * 1.5, (rng() - 0.5) * 1.5 )); } for (let i = 0; i < points.length; i++) { for (let j = i + 1; j < points.length; j++) { if (rng() > 0.6) { const lineGeometry = new THREE.BufferGeometry().setFromPoints([points[i], points[j]]); const line = new THREE.Line(lineGeometry, lineMaterial); group.add(line); } } } return group; } // Seeded random number generator function mulberry32(a) { return function() { let t = a += 0x6D2B79F5; t = Math.imul(t ^ t >>> 15, t | 1); t ^= t + Math.imul(t ^ t >>> 7, t | 61); return ((t ^ t >>> 14) >>> 0) / 4294967296; } } // ====== CLUSTER CREATION ====== function createCluster(position, seed, isCollapsed) { const cluster = new THREE.Group(); // Outer shell (collapsed state) const shellGeometry = new THREE.SphereGeometry(0.4, 16, 16); const shellMaterial = createFrostedMaterial(0xcccccc); const shell = new THREE.Mesh(shellGeometry, shellMaterial); shell.castShadow = true; cluster.add(shell); // Inner matrix (hidden when collapsed) const matrix = generateMatrixGeometry(seed); matrix.visible = false; cluster.add(matrix); cluster.position.copy(position); cluster.userData = { seed: seed, isCollapsed: isCollapsed, isUnfolded: false, isMatched: false, matrix: matrix, shell: shell, rotationVelocity: new THREE.Vector3(), isDragging: false }; scene.add(cluster); return cluster; } // ====== GENERATE PAIRS ====== function generateClusters() { const positions = [ new THREE.Vector3(-2.5, 1.5, 0), new THREE.Vector3(2.5, 1.5, 0), new THREE.Vector3(-2.5, -1.5, 0), new THREE.Vector3(2.5, -1.5, 0), new THREE.Vector3(-1.5, 0, -1.5), new THREE.Vector3(1.5, 0, -1.5), new THREE.Vector3(-1.5, 0, 1.5), new THREE.Vector3(1.5, 0, 1.5) ]; // Create 4 pairs with matching seeds for (let i = 0; i < TOTAL_PAIRS; i++) { const seed = Math.floor(Math.random() * 100000); clusters.push(createCluster(positions[i * 2], seed, true)); clusters.push(createCluster(positions[i * 2 + 1], seed, true)); } } // ====== INTERACTION ====== const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let isMouseDown = false; let dragStart = { x: 0, y: 0 }; let currentCluster = null; function onMouseDown(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(clusters, true); if (intersects.length > 0) { let obj = intersects[0].object; while (obj.parent && !clusters.includes(obj)) { obj = obj.parent; } if (clusters.includes(obj) && !obj.userData.isMatched) { currentCluster = obj; isMouseDown = true; dragStart = { x: event.clientX, y: event.clientY }; obj.userData.isDragging = true; } } } function onMouseMove(event) { if (isMouseDown && currentCluster) { const dx = event.clientX - dragStart.x; const dy = event.clientY - dragStart.y; // Apply rotation based on drag const rotationSpeed = 0.01; currentCluster.rotation.y += dx * rotationSpeed; currentCluster.rotation.x += dy * rotationSpeed; dragStart = { x: event.clientX, y: event.clientY }; } } function onMouseUp(event) { if (isMouseDown && currentCluster) { const dx = event.clientX - dragStart.x; const dy = event.clientY - dragStart.y; // Check if it was a click (not a drag) if (Math.abs(dx) < 5 && Math.abs(dy) < 5) { handleClick(currentCluster); } currentCluster.userData.isDragging = false; currentCluster = null; isMouseDown = false; } } function handleClick(cluster) { if (cluster.userData.isMatched) return; if (!cluster.userData.isUnfolded) { // Unfold the cluster cluster.userData.isUnfolded = true; cluster.userData.shell.visible = false; cluster.userData.matrix.visible = true; // Scale animation animateUnfold(cluster); // Check for match if (selectedCluster && selectedCluster !== cluster) { if (selectedCluster.userData.seed === cluster.userData.seed) { // MATCH FOUND! handleMatch(selectedCluster, cluster); } else { // No match - fold back setTimeout(() => { foldCluster(selectedCluster); foldCluster(cluster); selectedCluster = null; }, 800); } } else { selectedCluster = cluster; } } } function animateUnfold(cluster) { const targetScale = 1.5; const duration = 300; const startTime = Date.now(); function animate() { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); cluster.userData.matrix.scale.setScalar(eased * targetScale); if (progress < 1) { requestAnimationFrame(animate); } } animate(); } function foldCluster(cluster) { if (!cluster || cluster.userData.isMatched) return; cluster.userData.isUnfolded = false; cluster.userData.shell.visible = true; cluster.userData.matrix.visible = false; cluster.userData.matrix.scale.setScalar(1); } // ====== MATCH HANDLING ====== function handleMatch(cluster1, cluster2) { matchedPairs++; document.getElementById('score').textContent = `Pairs: ${matchedPairs} / ${TOTAL_PAIRS}`; cluster1.userData.isMatched = true; cluster2.userData.isMatched = true; // Implosion effect createImplosion(cluster1, cluster2); // Remove clusters after effect setTimeout(() => { scene.remove(cluster1); scene.remove(cluster2); clusters = clusters.filter(c => c !== cluster1 && c !== cluster2); if (matchedPairs === TOTAL_PAIRS) { document.getElementById('status').textContent = '✨ All pairs entangled! ✨'; } }, 1000); selectedCluster = null; } function createImplosion(cluster1, cluster2) { // Create particle explosion const particleCount = 100; const particles = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const center1 = cluster1.position.clone(); const center2 = cluster2.position.clone(); const midpoint = center1.clone().add(center2).multiplyScalar(0.5); for (let i = 0; i < particleCount; i++) { const t = i / particleCount; const point = center1.clone().lerp(center2, t); positions[i * 3] = point.x + (Math.random() - 0.5) * 0.3; positions[i * 3 + 1] = point.y + (Math.random() - 0.5) * 0.3; positions[i * 3 + 2] = point.z + (Math.random() - 0.5) * 0.3; const color = new THREE.Color().setHSL(0.6 + Math.random() * 0.2, 0.8, 0.6); colors[i * 3] = color.r; colors[i * 3 + 1] = color.g; colors[i * 3 + 2] = color.b; } particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particles.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const particleMaterial = new THREE.PointsMaterial({ size: 0.08, vertexColors: true, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending }); const particleSystem = new THREE.Points(particles, particleMaterial); scene.add(particleSystem); // Animate implosion const startTime = Date.now(); const duration = 800; function animateParticles() { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const pos = particleSystem.geometry.attributes.position; for (let i = 0; i < pos.count; i++) { const dx = pos.getX(i) - midpoint.x; const dy = pos.getY(i) - midpoint.y; const dz = pos.getZ(i) - midpoint.z; pos.setX(i, pos.getX(i) - dx * 0.05); pos.setY(i, pos.getY(i) - dy * 0.05); pos.setZ(i, pos.getZ(i) - dz * 0.05); } pos.needsUpdate = true; particleMaterial.opacity = 1 - progress; if (progress < 1) { requestAnimationFrame(animateParticles); } else { scene.remove(particleSystem); } } animateParticles(); // Light trail effect const trailMaterial = new THREE.LineBasicMaterial({ color: 0x88ccff, transparent: true, opacity: 0.6 }); const trailPoints = []; for (let i = 0; i <= 20; i++) { const t = i / 20; trailPoints.push(center1.clone().lerp(center2, t)); } const trailGeometry = new THREE.BufferGeometry().setFromPoints(trailPoints); const trail = new THREE.Line(trailGeometry, trailMaterial); scene.add(trail); setTimeout(() => { scene.remove(trail); }, 800); } // ====== BACKGROUND PARTICLES ====== function createBackgroundParticles() { const particleCount = 500; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 20; positions[i + 1] = (Math.random() - 0.5) * 20; positions[i + 2] = (Math.random() - 0.5) * 20; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ size: 0.02, color: 0xcccccc, transparent: true, opacity: 0.4 }); const particles = new THREE.Points(geometry, material); scene.add(particles); return particles; } // ====== ANIMATION LOOP ====== let backgroundParticles; function animate() { requestAnimationFrame(animate); // Rotate background particles slowly if (backgroundParticles) { backgroundParticles.rotation.y += 0.0005; } // Gentle floating animation for clusters clusters.forEach((cluster, index) => { if (!cluster.userData.isMatched) { const time = Date.now() * 0.001; cluster.position.y += Math.sin(time + index) * 0.001; // Auto-rotate when not being dragged if (!cluster.userData.isDragging && !cluster.userData.isUnfolded) { cluster.rotation.y += 0.003; } } }); renderer.render(scene, camera); } // ====== RESIZE ====== window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // ====== INIT ====== function init() { generateClusters(); backgroundParticles = createBackgroundParticles(); // Event listeners renderer.domElement.addEventListener('mousedown', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); // Touch support renderer.domElement.addEventListener('touchstart', (e) => { e.preventDefault(); const touch = e.touches[0]; onMouseDown({ clientX: touch.clientX, clientY: touch.clientY }); }); window.addEventListener('touchmove', (e) => { const touch = e.touches[0]; onMouseMove({ clientX: touch.clientX, clientY: touch.clientY }); }); window.addEventListener('touchend', (e) => { onMouseUp({ clientX: 0, clientY: 0 }); }); // Start animation animate(); } // Start the game init(); </script> </body> </html>