量子もつれ空間ゲーム

<!DOCTYPE html> <html lang="ja"> <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: #ffffff; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } #info { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #333; font-size: 14px; letter-spacing: 2px; text-align: center; pointer-events: none; z-index: 10; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); padding: 12px 24px; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } #status { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #555; font-size: 12px; letter-spacing: 1px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); padding: 8px 20px; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.05); pointer-events: none; z-index: 10; } #score { position: absolute; top: 20px; right: 30px; color: #444; font-size: 16px; font-weight: 300; letter-spacing: 1px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); padding: 10px 18px; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.05); z-index: 10; } #hint { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); color: #888; font-size: 11px; letter-spacing: 1px; pointer-events: none; z-index: 10; opacity: 0.8; } canvas { display: block; } </style> </head> <body> <div id="info">量子もつれ 、 空間整列パズル</div> <div id="score">融合: 0 / 3</div> <div id="status">クラスターをクリックして展開</div> <div id="hint">ドラッグで回転、クリックで展開</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // ===== シーン設定 ===== 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, 12); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // ===== 照明 ===== const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 8, 5); directionalLight.castShadow = true; scene.add(directionalLight); const pointLight = new THREE.PointLight(0x88ccff, 0.5); pointLight.position.set(-3, 2, 4); scene.add(pointLight); // ===== グリッド背景 ===== const gridHelper = new THREE.GridHelper(20, 20, 0xdddddd, 0xeeeeee); gridHelper.position.y = -3; scene.add(gridHelper); // ===== ゲーム状態 ===== let clusters = []; let selectedCluster = null; let isDragging = false; let previousMouse = { x: 0, y: 0 }; let fusedCount = 0; let isAnimating = false; let particles = []; // ===== クラスター生成 ===== const clusterPositions = [ [-3, 0, 0], [0, 0, 0], [3, 0, 0], [-3, 0, -3], [0, 0, -3], [3, 0, -3], [-3, 0, 3], [0, 0, 3], [3, 0, 3] ]; // 幾何学形状の定義 const geometryTypes = [ { type: 'octahedron', detail: 0, scale: 0.8 }, { type: 'icosahedron', detail: 0, scale: 0.7 }, { type: 'dodecahedron', detail: 0, scale: 0.6 }, { type: 'torusKnot', detail: 0, scale: 0.5 }, { type: 'box', detail: 0, scale: 0.8 }, { type: 'sphere', detail: 2, scale: 0.7 } ]; // マッチング用のID生成 function generateMatchId() { const types = ['A', 'B', 'C']; return types[Math.floor(Math.random() * types.length)]; } // クラスター作成 function createCluster(position, matchId) { const group = new THREE.Group(); // 外側のシェル（フロストガラス風） const shellGeom = new THREE.SphereGeometry(0.9, 32, 32); const shellMat = new THREE.MeshPhysicalMaterial({ color: 0xffffff, transparent: true, opacity: 0.25, roughness: 0.1, metalness: 0.1, transmission: 0.6, thickness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.1, envMapIntensity: 1.0 }); const shell = new THREE.Mesh(shellGeom, shellMat); shell.castShadow = true; group.add(shell); // 内部の幾何学形状 const geomDef = geometryTypes[Math.floor(Math.random() * geometryTypes.length)]; let innerGeom; switch(geomDef.type) { case 'octahedron': innerGeom = new THREE.OctahedronGeometry(0.5 * geomDef.scale); break; case 'icosahedron': innerGeom = new THREE.IcosahedronGeometry(0.5 * geomDef.scale); break; case 'dodecahedron': innerGeom = new THREE.DodecahedronGeometry(0.5 * geomDef.scale); break; case 'torusKnot': innerGeom = new THREE.TorusKnotGeometry(0.35, 0.12, 64, 8); break; case 'box': innerGeom = new THREE.BoxGeometry(0.7 * geomDef.scale, 0.7 * geomDef.scale, 0.7 * geomDef.scale); break; case 'sphere': innerGeom = new THREE.SphereGeometry(0.5 * geomDef.scale, 16, 16); break; default: innerGeom = new THREE.OctahedronGeometry(0.5); } const innerMat = new THREE.MeshPhysicalMaterial({ color: 0x88aaff, transparent: true, opacity: 0.7, roughness: 0.2, metalness: 0.3, transmission: 0.3, emissive: 0x112244, emissiveIntensity: 0.2 }); const innerMesh = new THREE.Mesh(innerGeom, innerMat); innerMesh.castShadow = true; group.add(innerMesh); // ワイヤーフレーム装飾 const wireGeom = new THREE.SphereGeometry(0.85, 16, 16); const wireMat = new THREE.MeshBasicMaterial({ color: 0xaaccee, wireframe: true, transparent: true, opacity: 0.15 }); const wire = new THREE.Mesh(wireGeom, wireMat); group.add(wire); // 光のトレイル（ボリュームライト風） const trailGeom = new THREE.CylinderGeometry(0.02, 0.02, 2, 8); const trailMat = new THREE.MeshBasicMaterial({ color: 0x88ccff, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending }); const trail = new THREE.Mesh(trailGeom, trailMat); trail.position.y = 1.5; trail.visible = false; group.add(trail); group.position.copy(position); group.userData = { matchId: matchId, isExpanded: false, isFused: false, originalPosition: position.clone(), rotationSpeed: new THREE.Vector3( (Math.random() - 0.5) * 0.01, (Math.random() - 0.5) * 0.01, (Math.random() - 0.5) * 0.01 ), innerMesh: innerMesh, trail: trail, shell: shell, wire: wire }; scene.add(group); return group; } // クラスター初期化 function initClusters() { // マッチングIDの割り当て（3ペア） const matchIds = ['A', 'A', 'B', 'B', 'C', 'C', 'X', 'Y', 'Z']; // シャッフル for (let i = matchIds.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [matchIds[i], matchIds[j]] = [matchIds[j], matchIds[i]]; } clusterPositions.forEach((pos, index) => { const cluster = createCluster(new THREE.Vector3(pos[0], pos[1], pos[2]), matchIds[index]); clusters.push(cluster); }); } // ===== パーティクルエフェクト ===== function createImplosionEffect(position, color) { const particleCount = 80; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = []; for (let i = 0; i < particleCount; i++) { positions[i * 3] = position.x; positions[i * 3 + 1] = position.y; positions[i * 3 + 2] = position.z; // ランダムな方向への速度ベクトル const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); const speed = 0.05 + Math.random() * 0.1; velocities.push({ x: Math.sin(phi) * Math.cos(theta) * speed, y: Math.sin(phi) * Math.sin(theta) * speed, z: Math.cos(phi) * speed }); } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ color: color || 0x88ccff, size: 0.08, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false }); const particleSystem = new THREE.Points(geometry, material); scene.add(particleSystem); particles.push({ system: particleSystem, velocities: velocities, life: 1.0, position: position.clone() }); } // ===== 融合処理 ===== function fuseClusters(clusterA, clusterB) { if (isAnimating) return; isAnimating = true; const midPoint = new THREE.Vector3().addVectors(clusterA.position, clusterB.position).multiplyScalar(0.5); // 重力崩壊エフェクト createImplosionEffect(clusterA.position, 0x88aaff); createImplosionEffect(clusterB.position, 0x88aaff); createImplosionEffect(midPoint, 0xffffff); // クラスターを中心に向かって移動 const targetA = midPoint.clone(); const targetB = midPoint.clone(); // アニメーション const startTime = Date.now(); const duration = 800; function animateFusion() { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic clusterA.position.lerp(targetA, eased * 0.1); clusterB.position.lerp(targetB, eased * 0.1); // スケール縮小 clusterA.scale.setScalar(1 - eased * 0.9); clusterB.scale.setScalar(1 - eased * 0.9); if (progress < 1) { requestAnimationFrame(animateFusion); } else { // 破壊 scene.remove(clusterA); scene.remove(clusterB); clusters = clusters.filter(c => c !== clusterA && c !== clusterB); fusedCount++; document.getElementById('score').textContent = `融合: ${fusedCount} / 3`; if (fusedCount >= 3) { document.getElementById('status').textContent = '✨ 完了！すべてのクラスターが融合しました ✨'; } else { document.getElementById('status').textContent = '融合成功！次のペアを探してください'; } isAnimating = false; } } animateFusion(); } // ===== インタラクション ===== const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseDown(event) { if (isAnimating) return; 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 cluster = intersects[0].object; while (cluster.parent && !clusters.includes(cluster)) { cluster = cluster.parent; } if (clusters.includes(cluster)) { selectedCluster = cluster; isDragging = true; previousMouse = { x: event.clientX, y: event.clientY }; // 展開処理 if (!cluster.userData.isExpanded) { cluster.userData.isExpanded = true; cluster.userData.trail.visible = true; document.getElementById('status').textContent = 'クラスター展開中...'; // 内部形状を表示 cluster.userData.innerMesh.visible = true; cluster.userData.wire.visible = true; } } } } function onMouseMove(event) { if (!isDragging || !selectedCluster) return; const deltaX = event.clientX - previousMouse.x; const deltaY = event.clientY - previousMouse.y; // クォータニオン回転 const quaternion = new THREE.Quaternion(); const euler = new THREE.Euler( deltaY * 0.005, deltaX * 0.005, 0, 'XYZ' ); quaternion.setFromEuler(euler); selectedCluster.quaternion.multiplyQuaternions(quaternion, selectedCluster.quaternion); previousMouse = { x: event.clientX, y: event.clientY }; } function onMouseUp(event) { if (!isDragging || !selectedCluster) return; isDragging = false; // マッチング判定 if (selectedCluster.userData.isExpanded) { // 他の展開済みクラスターと比較 const expandedClusters = clusters.filter(c => c.userData.isExpanded && c !== selectedCluster && !c.userData.isFused ); for (const other of expandedClusters) { if (other.userData.matchId === selectedCluster.userData.matchId) { // マッチ！ document.getElementById('status').textContent = '✨ マッチ！融合します ✨'; fuseClusters(selectedCluster, other); selectedCluster = null; return; } } document.getElementById('status').textContent = 'マッチしません。別のクラスターを試してください'; } selectedCluster = null; } // ===== アニメーションループ ===== function animate() { requestAnimationFrame(animate); // クラスターの自動回転 clusters.forEach(cluster => { if (!cluster.userData.isFused && !isDragging) { cluster.rotation.x += cluster.userData.rotationSpeed.x; cluster.rotation.y += cluster.userData.rotationSpeed.y; } // 光のトレイルのアニメーション if (cluster.userData.trail.visible) { cluster.userData.trail.rotation.y += 0.05; cluster.userData.trail.material.opacity = 0.2 + Math.sin(Date.now() * 0.003) * 0.1; } }); // パーティクル更新 particles = particles.filter(p => { p.life -= 0.02; if (p.life <= 0) { scene.remove(p.system); return false; } const positions = p.system.geometry.attributes.position.array; for (let i = 0; i < p.velocities.length; i++) { positions[i * 3] += p.velocities[i].x; positions[i * 3 + 1] += p.velocities[i].y; positions[i * 3 + 2] += p.velocities[i].z; // 中心に向かって引き寄せる const dx = p.position.x - positions[i * 3]; const dy = p.position.y - positions[i * 3 + 1]; const dz = p.position.z - positions[i * 3 + 2]; positions[i * 3] += dx * 0.02; positions[i * 3 + 1] += dy * 0.02; positions[i * 3 + 2] += dz * 0.02; } p.system.geometry.attributes.position.needsUpdate = true; p.system.material.opacity = p.life * 0.8; return true; }); renderer.render(scene, camera); } // ===== リサイズ ===== window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // ===== イベントリスナー ===== renderer.domElement.addEventListener('mousedown', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); // ===== 初期化 ===== initClusters(); animate(); // 初期状態のヒント setTimeout(() => { document.getElementById('status').textContent = 'クラスターをクリックして展開、回転して比較'; }, 3000); </script> </body> </html>