junkerstock

vrx-test23A

<!DOCTYPE html>
<html>
<head>
<title>A-Frame - 3D巨大迷路 v23A</title>

<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>
<script src="./js/aframe-vrm.js"></script>

<script>
// --- SCRIPT BLOCK 1: Component Definitions ---
AFRAME.registerComponent('camera-relative-controls', {
schema: {
targetSpeed: { type: 'number', default: 5 },
acceleration: { type: 'number', default: 10 },
damping: { type: 'number', default: 8 },
brakingDeceleration: { type: 'number', default: 20 },
enabled: { type: 'boolean', default: true },
rotationSpeed: { type: 'number', default: 1.5 },
pitchLimit: { type: 'number', default: 85 },
verticalSpeed: { type: 'number', default: 30 },
groundY: { type: 'number', default: 0 },
ceilingY: { type: 'number', default: 6.4 }
},
init: function () {
this.keys = {};
this.leftThumbstickInput = { x: 0, y: 0 };
this.rightThumbstickInput = { x: 0, y: 0 };
this.currentVelocity = new THREE.Vector3();
this.ZERO_VECTOR = new THREE.Vector3();
this.cameraDirection = new THREE.Vector3();
this.cameraRight = new THREE.Vector3();
this.moveDirection = new THREE.Vector3();
this.desiredVelocity = new THREE.Vector3();
this.cameraWorldQuaternion = new THREE.Quaternion();
this.rigEl = this.el;
this.cameraEl = this.el.querySelector('[camera]');
this.isReady = false;
this.mazeData = null;
this.mazeGridSize = 0;
this.mazeCellSize = 0;
this.mazeOffset = 0;
this.goldenWallPositions = [];
this.goldenWallsScanned = false;
this.health = 100;
this.healthElementPC = document.getElementById('health-display-pc');
this.healthElementVR = null;
if (!this.cameraEl) { console.error('camera-relative-controls: カメラエンティティが見つかりません。'); }
this.el.sceneEl.addEventListener('loaded', () => {
this.leftHand = document.getElementById('leftHand');
if (this.leftHand) { this.leftHand.addEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); }
else { console.warn("camera-relative-controls: 左手コントローラー(#leftHand)が見つかりません。"); }
this.rightHand = document.getElementById('rightHand');
if (this.rightHand) { this.rightHand.addEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); }
else { console.warn("camera-relative-controls: 右手コントローラー(#rightHand)が見つかりません。"); }
});
this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
},
remove: function () {
window.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('keyup', this.onKeyUp);
if (this.leftHand) { try { this.leftHand.removeEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); } catch(e){} }
if (this.rightHand) { try { this.rightHand.removeEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); } catch(e){} }
},
resetHealth: function() {
this.health = 100;
},
worldToMazeCoords: function(worldX, worldZ) {
const i = Math.round(worldX / this.mazeCellSize + this.mazeOffset);
const j = Math.round(worldZ / this.mazeCellSize + this.mazeOffset);
return { i, j };
},
isNearGoldenWall: function() {
const playerPos = this.rigEl.object3D.position;
const detectionRange = (this.mazeCellSize / 2) + 1;
for (const wallPos of this.goldenWallPositions) {
const dx = Math.abs(playerPos.x - wallPos.x);
const dz = Math.abs(playerPos.z - wallPos.z);
if (dx <= detectionRange && dz <= detectionRange) {
return true;
}
}
return false;
},
onLeftThumbstickMoved: function (evt) { this.leftThumbstickInput.x = evt.detail.x; this.leftThumbstickInput.y = evt.detail.y; },
onRightThumbstickMoved: function (evt) { this.rightThumbstickInput.x = evt.detail.x; this.rightThumbstickInput.y = evt.detail.y; },
tick: function (time, timeDelta) {
if (!this.data.enabled) return;
if (!this.isReady) {
if (this.cameraEl && this.cameraEl.object3D && this.cameraEl.object3D.matrixWorld) { this.isReady = true; }
else { return; }
}
if (!this.cameraEl || !this.cameraEl.object3D || !this.rigEl || !this.rigEl.object3D) { return; }
if (this.isReady && !this.goldenWallsScanned) {
const allWalls = document.querySelectorAll('.maze-wall');
allWalls.forEach(wall => {
const material = wall.getAttribute('material');
if (material && material.color === '#FFD700') {
const wallPosition = new THREE.Vector3();
wall.object3D.getWorldPosition(wallPosition);
this.goldenWallPositions.push(wallPosition);
}
});
this.goldenWallsScanned = true;
console.log(`[Controls] Found ${this.goldenWallPositions.length} golden walls by scanning the scene.`);
}
if (!this.healthElementVR) {
this.healthElementVR = document.getElementById('health-display-vr');
}
const data = this.data;
const dt = timeDelta / 1000;
const position = this.rigEl.object3D.position;
if (this.rigEl.sceneEl.is('vr-mode')) {
if (Math.abs(this.rightThumbstickInput.x) > 0.1) { this.rigEl.object3D.rotation.y += -this.rightThumbstickInput.x * data.rotationSpeed * dt; }
}

const cameraObject = this.cameraEl.object3D;
cameraObject.getWorldQuaternion(this.cameraWorldQuaternion);
this.cameraDirection.set(0, 0, -1).applyQuaternion(this.cameraWorldQuaternion); this.cameraDirection.normalize();
this.cameraRight.set(1, 0, 0).applyQuaternion(this.cameraWorldQuaternion); this.cameraRight.y = 0; this.cameraRight.normalize();
this.moveDirection.set(0, 0, 0);
if (this.keys['KeyW'] || this.keys['ArrowUp']) { this.moveDirection.add(this.cameraDirection); }
if (this.keys['KeyS'] || this.keys['ArrowDown']) { this.moveDirection.sub(this.cameraDirection); }
if (this.keys['KeyA'] || this.keys['ArrowLeft']) { this.moveDirection.sub(this.cameraRight); }
if (this.keys['KeyD'] || this.keys['ArrowRight']) { this.moveDirection.add(this.cameraRight); }
if (Math.abs(this.leftThumbstickInput.y) > 0.1) { this.moveDirection.add(this.cameraDirection.clone().multiplyScalar(-this.leftThumbstickInput.y)); }
if (Math.abs(this.leftThumbstickInput.x) > 0.1) { this.moveDirection.add(this.cameraRight.clone().multiplyScalar(this.leftThumbstickInput.x)); }
const isInputting = this.moveDirection.lengthSq() > 0.0001;
if (isInputting) { this.moveDirection.normalize(); }
let lerpFactor = data.damping;
if (isInputting) {
if (this.currentVelocity.dot(this.moveDirection) < -0.1) { this.desiredVelocity.set(0,0,0); lerpFactor = data.brakingDeceleration;
} else { this.desiredVelocity.copy(this.moveDirection).multiplyScalar(data.targetSpeed); lerpFactor = data.acceleration; }
} else { this.desiredVelocity.set(0,0,0); lerpFactor = data.damping; }
const effectiveLerpFactor = 1.0 - Math.exp(-lerpFactor * dt);
this.currentVelocity.lerp(this.desiredVelocity, effectiveLerpFactor);
if (this.currentVelocity.lengthSq() < 0.0001) { this.currentVelocity.set(0,0,0); }
if (this.currentVelocity.lengthSq() > 0) {
const deltaPosition = this.currentVelocity.clone().multiplyScalar(dt);
if (this.mazeData) {
const margin = 0.2;
const nextX = position.x + deltaPosition.x;
const signX = Math.sign(deltaPosition.x);
const { i: nextI_X, j: nextJ_X } = this.worldToMazeCoords(nextX + (margin * signX), position.z);
if (this.mazeData[nextI_X] && this.mazeData[nextI_X][nextJ_X] === 1) {
deltaPosition.x = 0;
if (!isInputting) { this.currentVelocity.x = 0; }
}
const nextZ = position.z + deltaPosition.z;
const signZ = Math.sign(deltaPosition.z);
const { i: nextI_Z, j: nextJ_Z } = this.worldToMazeCoords(position.x, nextZ + (margin * signZ));
if (this.mazeData[nextI_Z] && this.mazeData[nextI_Z][nextJ_Z] === 1) {
deltaPosition.z = 0;
if (!isInputting) { this.currentVelocity.z = 0; }
}
}
position.add(deltaPosition);
}

let verticalMovement = 0;
if (this.rigEl.sceneEl.is('vr-mode') && Math.abs(this.rightThumbstickInput.y) > 0.1) {
verticalMovement = -this.rightThumbstickInput.y * data.verticalSpeed * dt;
}

const nextY = position.y + verticalMovement;
const isNearGold = this.isNearGoldenWall();

const ceiling = isNearGold ? Infinity : data.ceilingY;

if (nextY > ceiling) {
position.y = ceiling;
} else if (nextY < data.groundY) {
position.y = data.groundY;
} else {
position.y = nextY;
}

const enemies = document.querySelectorAll('.enemy');
const playerPos = this.rigEl.object3D.position;
const damageDistance = 4.0;
const damagePerSecond = 20;
let isTakingDamage = false;
const playerPos2D = new THREE.Vector2(playerPos.x, playerPos.z);

enemies.forEach(enemy => {
if (enemy.getAttribute('enemy-ai')?.enabled) {
const enemyPos = new THREE.Vector3();
enemy.object3D.getWorldPosition(enemyPos);
const enemyPos2D = new THREE.Vector2(enemyPos.x, enemyPos.z);
if (playerPos2D.distanceTo(enemyPos2D) < damageDistance) {
isTakingDamage = true;
this.health -= damagePerSecond * dt;
}
}
});

if (this.health < 0) {
this.health = 0;
}
if (this.healthElementPC) { this.healthElementPC.textContent = `体力: ${Math.floor(this.health)}`; }
if (this.healthElementVR) { this.healthElementVR.setAttribute('troika-text', 'value', `体力: ${Math.floor(this.health)}`); }
if (this.health <= 0) {
if (window.triggerGameOver) {
window.triggerGameOver("体力切れ");
}
}

if (this.mazeData) {
const playerCoords = this.worldToMazeCoords(position.x, position.z);
const goalI = this.mazeGridSize - 2;
const goalJ = this.mazeGridSize - 2;

if (playerCoords.i === goalI && playerCoords.j === goalJ) {
console.log("Goal Reached! Proceeding to the next level.");
this.el.sceneEl.emit('reached-goal');
}
}
},
onKeyDown: function (event) { if (!this.data.enabled) { return; } if (['KeyW', 'ArrowUp', 'KeyS', 'ArrowDown', 'KeyA', 'ArrowLeft', 'KeyD', 'ArrowRight'].includes(event.code)) { this.keys[event.code] = true; } },
onKeyUp: function (event) { if (this.keys[event.code] !== undefined) { delete this.keys[event.code]; } }
});

// enemy-ai コンポーネント (変更なし)
AFRAME.registerComponent('enemy-ai', {
schema: {
type: { type: 'int', default: 1 },
speed: { type: 'number', default: 3 },
target: { type: 'selector', default: '#player' },
changeDirectionInterval: { type: 'number', default: 3000 },
enabled: { type: 'boolean', default: true }
},
init: function () {
this.direction = new THREE.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
this.timeUntilChange = this.data.changeDirectionInterval;
this.hasMazeData = false;
},
setMazeData: function (mazeData, mazeCellSize, offset) {
this.mazeData = mazeData;
this.mazeCellSize = mazeCellSize;
this.mazeOffset = offset;
this.hasMazeData = true;
console.log(`Enemy ${this.el.id} received maze data.`);
},
worldToMazeCoords: function(worldX, worldZ) {
const i = Math.round(worldX / this.mazeCellSize + this.mazeOffset);
const j = Math.round(worldZ / this.mazeCellSize + this.mazeOffset);
return { i, j };
},
tick: function(time, timeDelta) {
if (!this.data.enabled) return;
if (!this.hasMazeData) return;
const dt = timeDelta / 1000;
const position = this.el.object3D.position;
if (this.data.type === 1) {
if (this.data.target) {
const targetPosition = this.data.target.object3D.position;
const targetPos2D = new THREE.Vector2(targetPosition.x, targetPosition.z);
const myPos2D = new THREE.Vector2(position.x, position.z);
const direction2D = new THREE.Vector2().subVectors(targetPos2D, myPos2D).normalize();
this.direction.set(direction2D.x, 0, direction2D.y);
}
} else {
this.timeUntilChange -= timeDelta;
if (this.timeUntilChange <= 0) {
this.direction.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
this.timeUntilChange = this.data.changeDirectionInterval;
}
}
const speed = this.data.speed;
let deltaPosition = this.direction.clone().multiplyScalar(speed * dt);
const margin = 0.5;
const nextX = position.x + deltaPosition.x;
const signX = Math.sign(deltaPosition.x);
const { i: nextI_X, j: nextJ_X } = this.worldToMazeCoords(nextX + (margin * signX), position.z);
if (this.mazeData[nextI_X] && this.mazeData[nextI_X][nextJ_X] === 1) {
deltaPosition.x = 0;
}
const nextZ = position.z + deltaPosition.z;
const signZ = Math.sign(deltaPosition.z);
const { i: nextI_Z, j: nextJ_Z } = this.worldToMazeCoords(position.x, nextZ + (margin * signZ));
if (this.mazeData[nextI_Z] && this.mazeData[nextI_Z][nextJ_Z] === 1) {
deltaPosition.z = 0;
}
if (deltaPosition.x === 0 && deltaPosition.z === 0 && (Math.abs(this.direction.x) > 0.01 || Math.abs(this.direction.z) > 0.01)) {
this.direction.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
}
position.add(deltaPosition);
}
});
</script>
<style>
#hud-pc {
position: fixed;
bottom: 20px;
left: 20px;
color: white;
background-color: rgba(0, 0, 0, 0.4);
padding: 15px;
border-radius: 10px;
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
z-index: 10;
}
#hud-pc > div:not(:last-child) {
margin-bottom: 10px;
}
#replay-button-pc {
cursor: pointer;
background-color: #C0392B;
padding: 10px;
text-align: center;
border-radius: 5px;
margin-top: 15px;
}
#replay-button-pc:hover {
background-color: #A93226;
}
</style>
</head>
<body>
<div id="hud-pc">
<div id="floor-display-pc">1階</div>
<div id="time-display-pc">残り時間: 150</div>
<div id="health-display-pc">体力: 100</div>
<div id="replay-button-pc" onclick="window.replayGame()">リプレイ</div>
</div>
<a-scene id="myScene" vr-mode-ui="enabled: true" background="color: #87CEEB">

<a-entity id="vrm-start" vrm="src:./vrm/tesA1_V0a.vrm" vrm-anim rotation="0 180 0"></a-entity>
<a-entity id="vrm-goal" vrm="src:./vrm/tesA1_V0a.vrm" vrm-anim rotation="0 45 0"></a-entity>
<a-entity id="rig" camera-relative-controls="targetSpeed: 10; acceleration: 12; damping: 10; groundY: 0; ceilingY: 6.4;">
<a-entity id="player" position="0 0 0">
<a-entity id="camera" camera="far: 20000;" look-controls="pointerLockEnabled: false; touchEnabled: false" position="0 1.6 0">
<a-entity id="mouseCursor" cursor="rayOrigin: mouse; fuse: false;" raycaster="objects: .maze-wall, a-sphere, .enemy;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7;"></a-entity>
</a-entity>
<a-entity id="leftHand" oculus-touch-controls="hand: left; model: true;">
<a-entity id="vr-hud" position="0 0.05 -0.25" rotation="-60 0 0">
<a-plane id="hud-background" width="0.22" height="0.15" color="#FAFAFA" opacity="0.8" side="double"></a-plane>
<a-entity id="floor-display-vr"
troika-text="value: 1階; color: black; fontSize: 0.012; align: center; anchorX: center;"
position="0 0.04 0.01"></a-entity>
<a-entity id="time-display-vr"
troika-text="value: 残り時間: 150; color: black; fontSize: 0.012; align: center; anchorX: center;"
position="0 0.00 0.01"></a-entity>
<a-entity id="health-display-vr"
troika-text="value: 体力: 100; color: black; fontSize: 0.012; align: center; anchorX: center;"
position="0 -0.04 0.01"></a-entity>
<a-sphere
id="replay-sphere-vr"
class="clickable"
radius="0.02"
position="0.08 -0.05 0.01"
material="color: red; shader: flat">
<a-entity
troika-text="value: リプレイ; color: white; fontSize: 0.01; align: center; anchor: center;"
position="0 0.03 0">
</a-entity>
</a-sphere>
</a-entity>
</a-entity>
<a-entity id="rightHand" oculus-touch-controls="hand: right; model: true;" raycaster="objects: .maze-wall, a-sphere, .enemy, .clickable;" laser-controls="hand: right; model: false; lineColor: white; lineOpacity: 0.75" ></a-entity>
</a-entity>
</a-entity>
<a-entity light="type: ambient; color: #888"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.8; castShadow: true" position="-100 200 100"></a-entity>
<a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="500" height="500" color="#7BC8A4" shadow="receive: true"></a-plane>
<a-entity id="maze-container"></a-entity>
<a-entity id="enemy-container"></a-entity>
<script>
// --- SCRIPT BLOCK 2: Main Scene Logic ---
document.addEventListener('DOMContentLoaded', function () {
// ▼▼▼【v23A 調整】参考例に基づき、VRMモデルにカスタムの待機モーション（手を振る動き）を設定します ▼▼▼
// 1. 手を振るモーションのデータ定義
const wavingMotion = {
spine: { keys: [ { rot: [3, 5, 0], time: 0 }, { rot: [3, 5, 0], time: 1 }, { rot: [3, 5, 0], time: 3.5 }, { rot: [0, 0, 0], time: 4.5 } ] },
rightUpperArm: { keys: [ { rot: [0, 0, -65], time: 0 }, { rot: [0, 0, -40], time: 1 }, { rot: [0, 0, -65], time: 2 } ] },
leftUpperArm: { keys: [ { rot: [0, 0, 65], time: 0 }, { rot: [80, -20, -15], time: 1 }, { rot: [80, -20, -15], time: 3.5 }, { rot: [0, 0, 65], time: 4.5 } ] },
leftLowerArm: { keys: [ { rot: [0, 0, 0], time: 0 }, { rot: [0, -90, 0], time: 1 }, { rot: [0, -100, 0], time: 1.5 }, { rot: [0, -70, 0], time: 2.0 }, { rot: [0, -100, 0], time: 2.5 }, { rot: [0, -70, 0], time: 3.0 }, { rot: [0, -90, 0], time: 3.5 }, { rot: [0, 0, 0], time: 4.5 } ] }
};

// 2. VRMモデルの要素を取得し、モーションを適用
const vrmStartEl = document.querySelector('#vrm-start');
const vrmGoalEl = document.querySelector('#vrm-goal');
if (vrmStartEl) {
vrmStartEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion);
}
if (vrmGoalEl) {
vrmGoalEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion);
}
// ▲▲▲【v23A 調整】ここまで ▲▲▲

const sceneEl = document.querySelector('a-scene');
let isGameOver = false;
let gameTimer = null;
let currentMazeSize = 39;
let numberOfEnemiesPerType = 30;
let currentFloor = 0;

const rightHand = document.getElementById('rightHand');
const replayButtonPC = document.getElementById('replay-button-pc');
const ground = document.getElementById('ground');
const rigEl = document.getElementById('rig');

function setupGame() {
sceneEl.addEventListener('reached-goal', goToNextLevel);
startNewLevel();
}
function goToNextLevel() {
console.log("--- ADVANCING TO NEXT LEVEL ---");
currentMazeSize += 10;
numberOfEnemiesPerType += 8;
startNewLevel();
}
function startNewLevel() {
currentFloor++;
console.log(`Starting Level (Floor ${currentFloor}) with Size: ${currentMazeSize}, Enemies per Type: ${numberOfEnemiesPerType}`);
const mazeContainer = document.getElementById('maze-container');
const enemyContainer = document.getElementById('enemy-container');
if (mazeContainer) mazeContainer.innerHTML = '';
if (enemyContainer) enemyContainer.innerHTML = '';
const controls = rigEl.components['camera-relative-controls'];
if (controls) {
controls.resetHealth();
}
const mazeData = generateMazeData(currentMazeSize);
const goldenWallPositions = [];
create3DMaze(mazeData, goldenWallPositions);
if (controls) {
controls.mazeData = mazeData;
controls.mazeGridSize = currentMazeSize;
controls.mazeCellSize = MAZE_CELL_SIZE;
controls.mazeOffset = (currentMazeSize - 1) / 2;
controls.goldenWallPositions = [];
controls.goldenWallsScanned = false;
console.log("New maze data set to control component.");
}
setPlayerStartPosition(mazeData);

const gridSize = mazeData.length;
const offset = (gridSize - 1) / 2;

const startGridX = 1;
const startGridZ = 1;
const startWorldX = (startGridX - offset) * MAZE_CELL_SIZE;
const startWorldZ = (startGridZ - offset) * MAZE_CELL_SIZE;

const goalI = gridSize - 2;
const goalJ = gridSize - 2;
const goalWorldX = (goalI - offset) * MAZE_CELL_SIZE;
const goalWorldZ = (goalJ - offset) * MAZE_CELL_SIZE;

if (vrmStartEl) {
// ▼▼▼【v23A 調整】スタート地点のVRMモデルがプレイヤーと重ならないよう、Z軸のオフセットを-1に調整します ▼▼▼
vrmStartEl.setAttribute('position', { x: startWorldX, y: 0, z: startWorldZ - 1 });
// ▲▲▲【v23A 調整】ここまで ▲▲▲
}
if (vrmGoalEl) {
vrmGoalEl.setAttribute('position', { x: goalWorldX, y: 0, z: goalWorldZ });
}

if(!document.getElementById('spheres-container')) {
createSpheres();
}
spawnEnemies(mazeData);
initializeHUD();
}
if (sceneEl.hasLoaded) { setupGame(); } else { sceneEl.addEventListener('loaded', setupGame, {once: true}); }

const MAZE_CELL_SIZE = 4;
const WALL_HEIGHT = 8;

function generateMazeData(gridSize) {
let ary = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
for (let i = 0; i < gridSize; i++) { ary[i][0] = 1; ary[i][gridSize - 1] = 1; ary[0][i] = 1; ary[gridSize - 1][i] = 1; }
for (let i = 1; i < (gridSize - 1) / 2; i++) {
for (let j = 1; j < (gridSize - 1) / 2; j++) {
const x = i * 2; const y = j * 2; ary[x][y] = 1;
const isStartArea = (i === 1 && j === 1);
let ranten;
if (isStartArea) { ranten = Math.random() < 0.5 ? 0 : 2; } else { ranten = Math.floor(Math.random() * 4); }
if (ranten === 0) { ary[x + 1][y] = 1; } else if (ranten === 1) { ary[x - 1][y] = 1; } else if (ranten === 2) { ary[x][y + 1] = 1; } else if (ranten === 3) { ary[x][y - 1] = 1; }
}
}
return ary;
}
function create3DMaze(mazeData, goldenWallPositions) {
const container = document.getElementById('maze-container');
if (!container) { return; }
const gridSize = mazeData.length;
const offset = (gridSize - 1) / 2;
const goalI = gridSize - 2;
const goalJ = gridSize - 2;
const maxDist = Math.sqrt(Math.pow(goalI - 1, 2) + Math.pow(goalJ - 1, 2));
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (mazeData[i][j] === 1) {
const wall = document.createElement('a-box');
const x = (i - offset) * MAZE_CELL_SIZE;
const y = WALL_HEIGHT / 2;
const z = (j - offset) * MAZE_CELL_SIZE;
wall.setAttribute('position', {x, y, z});
wall.setAttribute('width', MAZE_CELL_SIZE);
wall.setAttribute('height', WALL_HEIGHT);
wall.setAttribute('depth', MAZE_CELL_SIZE);
wall.setAttribute('shadow', 'cast: true; receive: false');
wall.classList.add('maze-wall');
if (Math.random() < 0.05) {
wall.setAttribute('material', { color: '#FFD700', metalness: 0.8, roughness: 0.2 });
if(goldenWallPositions) goldenWallPositions.push({x, y, z});
} else {
const dist = Math.sqrt(Math.pow(goalI - i, 2) + Math.pow(goalJ - j, 2));
const normalizedDist = dist / maxDist;
const hue = 240 * (1 - normalizedDist);
wall.setAttribute('material', { color: `hsl(${hue}, 70%, 50%)`, roughness: 0.8 });
}
container.appendChild(wall);
}
}
}
const goalMarker = document.createElement('a-plane');
const goalWorldX = (goalI - offset) * MAZE_CELL_SIZE;
const goalWorldZ = (goalJ - offset) * MAZE_CELL_SIZE;
goalMarker.setAttribute('position', {x: goalWorldX, y: 0.01, z: goalWorldZ});
goalMarker.setAttribute('width', MAZE_CELL_SIZE);
goalMarker.setAttribute('height', MAZE_CELL_SIZE);
goalMarker.setAttribute('rotation', '-90 0 0');
goalMarker.setAttribute('material', {color: 'red', opacity: 0.7});
container.appendChild(goalMarker);
console.log(`3D maze with colored walls created. Found ${goldenWallPositions ? goldenWallPositions.length : 0} golden walls.`);
}
function setPlayerStartPosition(mazeData) {
const rigEl = document.getElementById('rig');
const gridSize = mazeData.length;
const offset = (gridSize - 1) / 2;
const startGridX = 1;
const startGridZ = 1;
const startWorldX = (startGridX - offset) * MAZE_CELL_SIZE;
const startWorldZ = (startGridZ - offset) * MAZE_CELL_SIZE;
rigEl.setAttribute('position', `${startWorldX} 0 ${startWorldZ}`);
}
function createSpheres() {
const container = document.createElement('a-entity');
container.id = 'spheres-container';
const numberOfSpheres = 30;
const spawnRadius = currentMazeSize / 2 * MAZE_CELL_SIZE * 1.1;
for (let i = 0; i < numberOfSpheres; i++) {
const sphereEl = document.createElement('a-sphere');
const radius = Math.random() * 3 + 0.5;
const angle = Math.random() * Math.PI * 2;
const distance = spawnRadius + Math.random() * 50;
const x = Math.cos(angle) * distance;
const z = Math.sin(angle) * distance;
const y = radius;
const color = `hsl(${Math.random() * 360}, 70%, 50%)`;
sphereEl.setAttribute('position', {x: x, y: y, z: z});
sphereEl.setAttribute('radius', radius);
sphereEl.setAttribute('color', color);
sphereEl.setAttribute('shadow', 'cast: true');
container.appendChild(sphereEl);
}
sceneEl.appendChild(container);
}
function spawnEnemies(mazeData) {
const enemyContainer = document.getElementById('enemy-container');
const validSpawnPoints = [];
const gridSize = mazeData.length;
const startI = 1, startJ = 1;
const safeRadius = 3;

for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (mazeData[i][j] === 0) {
const distFromStart = Math.sqrt(Math.pow(i - startI, 2) + Math.pow(j - startJ, 2));
if (distFromStart > safeRadius) {
validSpawnPoints.push({i, j});
}
}
}
}
for (let type = 1; type <= 2; type++) {
for (let i = 0; i < numberOfEnemiesPerType; i++) {
if (validSpawnPoints.length === 0) { break; }
const spawnIndex = Math.floor(Math.random() * validSpawnPoints.length);
const spawnPoint = validSpawnPoints.splice(spawnIndex, 1)[0];
const offset = (gridSize - 1) / 2;
const x = (spawnPoint.i - offset) * MAZE_CELL_SIZE;
const z = (spawnPoint.j - offset) * MAZE_CELL_SIZE;
const enemyEl = document.createElement('a-sphere');
enemyEl.id = `enemy-${type}-${i}`;
enemyEl.setAttribute('position', {x: x, y: 1, z: z});
enemyEl.setAttribute('radius', '0.5');
enemyEl.setAttribute('color', 'black');
enemyEl.classList.add('enemy');
enemyEl.addEventListener('componentinitialized', function (evt) {
if (evt.detail.name === 'enemy-ai') {
this.components['enemy-ai'].setMazeData(mazeData, MAZE_CELL_SIZE, offset);
}
});
enemyEl.setAttribute('enemy-ai', {
type: type,
target: '#player'
});
enemyContainer.appendChild(enemyEl);
}
}
console.log(`Spawned ${enemyContainer.children.length} enemies.`);
}
function initializeHUD() {
if (gameTimer) { clearInterval(gameTimer); }

const floorElementPC = document.getElementById('floor-display-pc');
const floorElementVR = document.getElementById('floor-display-vr');
const timeElementPC = document.getElementById('time-display-pc');
const timeElementVR = document.getElementById('time-display-vr');
const healthElementPC = document.getElementById('health-display-pc');
const healthElementVR = document.getElementById('health-display-vr');

const floorText = `${currentFloor}階`;
if (floorElementPC) floorElementPC.textContent = floorText;
if (floorElementVR) floorElementVR.setAttribute('troika-text', 'value', floorText);

let remainingTime = 150;
const timeText = `残り時間: ${remainingTime}`;
if (timeElementPC) timeElementPC.textContent = timeText;
if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', timeText);

if (healthElementPC) healthElementPC.textContent = `体力: 100`;
if (healthElementVR) healthElementVR.setAttribute('troika-text', 'value', `体力: 100`);

gameTimer = setInterval(() => {
if (isGameOver) {
clearInterval(gameTimer);
return;
}
if (remainingTime > 0) {
remainingTime--;
const newTimeText = `残り時間: ${remainingTime}`;
if (timeElementPC) timeElementPC.textContent = newTimeText;
if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', newTimeText);
} else {
const newTimeText = '残り時間: 0';
if (timeElementPC) timeElementPC.textContent = newTimeText;
if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', newTimeText);
clearInterval(gameTimer);
triggerGameOver("時間切れ");
}
}, 1000);
}

function replayGame() {
console.log("Replaying game...");
isGameOver = false;

const controls = rigEl.components['camera-relative-controls'];
if (controls) {
controls.goldenWallsScanned = false;
controls.goldenWallPositions = [];
}

currentFloor = 0;
currentMazeSize = 39;
numberOfEnemiesPerType = 30;

if (ground) {
ground.setAttribute('color', '#7BC8A4');
}
if (rigEl && rigEl.components['camera-relative-controls']) {
rigEl.setAttribute('camera-relative-controls', 'enabled', true);
}
startNewLevel();
}
window.replayGame = replayGame;

window.triggerGameOver = function(reason) {
if (isGameOver) return;
isGameOver = true;
console.log(`GAME OVER: ${reason}`);

const allWalls = document.querySelectorAll('.maze-wall');
allWalls.forEach(wall => {
wall.setAttribute('material', { color: 'darkred' });
});

if (ground) {
ground.setAttribute('color', '#550000');
}
if (rigEl && rigEl.components['camera-relative-controls']) {
rigEl.setAttribute('camera-relative-controls', 'enabled', false);
}
const enemies = document.querySelectorAll('.enemy');
enemies.forEach(enemy => {
if (enemy.components['enemy-ai']) {
enemy.setAttribute('enemy-ai', 'enabled', false);
}
});
}

if (rightHand) {
rightHand.addEventListener('triggerdown', function () {
const raycasterComponent = rightHand.components.raycaster;
if (raycasterComponent) {
const intersectedEls = raycasterComponent.intersectedEls;
if (intersectedEls.length > 0 && intersectedEls[0].id === 'replay-sphere-vr') {
console.log('Replay sphere clicked via triggerdown!');
replayGame();
}
}
});
}

const pcHud = document.getElementById('hud-pc');
if(pcHud) {
sceneEl.addEventListener('enter-vr', function () {
pcHud.style.display = 'none';
});
sceneEl.addEventListener('exit-vr', function () {
pcHud.style.display = 'block';
});
}
});
</script>
</body>
</html>

使用変数

-------( Function )
) { const playerPos = this.rigEl.object3D.position; const detectionRange = -------( Function )
) { this.health = 100; }, worldToMazeCoords: function -------( Function )
allWalls
angle
ary
background
camera
cameraDirection
cameraEl
cameraObject
cameraRight
ceiling
class
color
container
controls
create3DMaze -------( Function )
createSpheres -------( Function )
currentFloor
currentMazeSize
currentVelocity
cursor
damageDistance
damagePerSecond
data
deltaPosition
desiredVelocity
detectionRange
direction2D
direction
display
dist
distance
distFromStart
dt
dx
dz
eftThumbstickInput
enemies
enemy
enemyContainer
enemyEl
enemyPos2D
enemyPos
eraWorldQuaternion
erOfEnemiesPerType
ffectiveLerpFactor
floorElementPC
floorElementVR
floorText
gameTimer
generateMazeData -------( Function )
geometry
ghtThumbstickInput
goalI
goalJ
goalMarker
goalWorldX
goalWorldZ
goldenWallsScanned
goToNextLevel -------( Function )
gridSize
ground
hasMazeData
health
healthElementPC
healthElementVR
height
hue
i
id
initializeHUD -------( Function )
innerHTML
intersectedEls
isGameOver
isInputting
isNearGold
isReady
isStartArea
isTakingDamage
j
keys
leftHand
length
lerpFactor
light
margin
material
maxDist
mazeCellSize
mazeContainer
mazeData
mazeGridSize
mazeOffset
MAZE_CELL_SIZE
moveDirection
myPos2D
name
newTimeText
nextX
nextY
nextZ
normalizedDist
numberOfSpheres
offset
oldenWallPositions
onclick
onKeyDown
onKeyUp
opacity
pcHud
playerCoords
playerPos2D
playerPos
position
radius
ranten
raycaster
raycasterComponent
remainingTime
replayButtonPC
replayGame -------( Function )
replayGame
rigEl
rightHand
rotation
safeRadius
sceneEl
setPlayerStartPosition -------( Function )
setupGame -------( Function )
shadow
side
signX
signZ
spawnEnemies -------( Function )
spawnIndex
spawnPoint
spawnRadius
speed
sphereEl
src
startGridX
startGridZ
startI
startJ
startNewLevel -------( Function )
startWorldX
startWorldZ
targetPos2D
targetPosition
text
textContent
time, timeDelta) { if -------( Function )
timeElementPC
timeElementVR
timeText
timeUntilChange
triggerGameOver
type
ui
validSpawnPoints
verticalMovement
vrm
vrmGoalEl
vrmStartEl
wall
wallPosition
WALL_HEIGHT
wavingMotion
width
worldX, worldZ) { const i = Math.round -------( Function )
x
y
z
ZERO_VECTOR

<!DOCTYPE html>
<html>
<head>
<title>A-Frame - 3D巨大迷路 v23A</title>

const nextY = position.y + verticalMovement;
        const isNearGold = this.isNearGoldenWall();
        
        const ceiling = isNearGold ? Infinity : data.ceilingY;

if (nextY > ceiling) {
            position.y = ceiling;
        } else if (nextY < data.groundY) {
            position.y = data.groundY;
        } else {
            position.y = nextY;
        }

const enemies = document.querySelectorAll('.enemy');
        const playerPos = this.rigEl.object3D.position;
        const damageDistance = 4.0;
        const damagePerSecond = 20;
        let isTakingDamage = false;
        const playerPos2D = new THREE.Vector2(playerPos.x, playerPos.z);

enemies.forEach(enemy => {
            if (enemy.getAttribute('enemy-ai')?.enabled) {
                const enemyPos = new THREE.Vector3();
                enemy.object3D.getWorldPosition(enemyPos);
                const enemyPos2D = new THREE.Vector2(enemyPos.x, enemyPos.z);
                if (playerPos2D.distanceTo(enemyPos2D) < damageDistance) {
                    isTakingDamage = true;
                    this.health -= damagePerSecond * dt;
                }
            }
        });

if (this.health < 0) {
            this.health = 0;
        }
        if (this.healthElementPC) { this.healthElementPC.textContent = `体力: ${Math.floor(this.health)}`; }
        if (this.healthElementVR) { this.healthElementVR.setAttribute('troika-text', 'value', `体力: ${Math.floor(this.health)}`); }
        if (this.health <= 0) {
            if (window.triggerGameOver) {
                window.triggerGameOver("体力切れ");
            }
        }

if (this.mazeData) {
            const playerCoords = this.worldToMazeCoords(position.x, position.z);
            const goalI = this.mazeGridSize - 2;
            const goalJ = this.mazeGridSize - 2;

if (playerCoords.i === goalI && playerCoords.j === goalJ) {
                console.log("Goal Reached! Proceeding to the next level.");
                this.el.sceneEl.emit('reached-goal');
            }
        }
    },
    onKeyDown: function (event) { if (!this.data.enabled) { return; } if (['KeyW', 'ArrowUp', 'KeyS', 'ArrowDown', 'KeyA', 'ArrowLeft', 'KeyD', 'ArrowRight'].includes(event.code)) { this.keys[event.code] = true; } },
    onKeyUp: function (event) { if (this.keys[event.code] !== undefined) { delete this.keys[event.code]; } }
});

// enemy-ai コンポーネント (変更なし)
AFRAME.registerComponent('enemy-ai', {
    schema: {
        type: { type: 'int', default: 1 },
        speed: { type: 'number', default: 3 },
        target: { type: 'selector', default: '#player' },
        changeDirectionInterval: { type: 'number', default: 3000 },
        enabled: { type: 'boolean', default: true }
    },
    init: function () {
        this.direction = new THREE.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
        this.timeUntilChange = this.data.changeDirectionInterval;
        this.hasMazeData = false;
    },
    setMazeData: function (mazeData, mazeCellSize, offset) {
        this.mazeData = mazeData;
        this.mazeCellSize = mazeCellSize;
        this.mazeOffset = offset;
        this.hasMazeData = true;
        console.log(`Enemy ${this.el.id} received maze data.`);
    },
    worldToMazeCoords: function(worldX, worldZ) {
        const i = Math.round(worldX / this.mazeCellSize + this.mazeOffset);
        const j = Math.round(worldZ / this.mazeCellSize + this.mazeOffset);
        return { i, j };
    },
    tick: function(time, timeDelta) {
        if (!this.data.enabled) return;
        if (!this.hasMazeData) return;
        const dt = timeDelta / 1000;
        const position = this.el.object3D.position;
        if (this.data.type === 1) {
            if (this.data.target) {
                const targetPosition = this.data.target.object3D.position;
                const targetPos2D = new THREE.Vector2(targetPosition.x, targetPosition.z);
                const myPos2D = new THREE.Vector2(position.x, position.z);
                const direction2D = new THREE.Vector2().subVectors(targetPos2D, myPos2D).normalize();
                this.direction.set(direction2D.x, 0, direction2D.y);
            }
        } else {
            this.timeUntilChange -= timeDelta;
            if (this.timeUntilChange <= 0) {
                this.direction.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
                this.timeUntilChange = this.data.changeDirectionInterval;
            }
        }
        const speed = this.data.speed;
        let deltaPosition = this.direction.clone().multiplyScalar(speed * dt);
        const margin = 0.5;
        const nextX = position.x + deltaPosition.x;
        const signX = Math.sign(deltaPosition.x);
        const { i: nextI_X, j: nextJ_X } = this.worldToMazeCoords(nextX + (margin * signX), position.z);
        if (this.mazeData[nextI_X] && this.mazeData[nextI_X][nextJ_X] === 1) {
            deltaPosition.x = 0;
        }
        const nextZ = position.z + deltaPosition.z;
        const signZ = Math.sign(deltaPosition.z);
        const { i: nextI_Z, j: nextJ_Z } = this.worldToMazeCoords(position.x, nextZ + (margin * signZ));
        if (this.mazeData[nextI_Z] && this.mazeData[nextI_Z][nextJ_Z] === 1) {
            deltaPosition.z = 0;
        }
        if (deltaPosition.x === 0 && deltaPosition.z === 0 && (Math.abs(this.direction.x) > 0.01 || Math.abs(this.direction.z) > 0.01)) {
            this.direction.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize();
        }
        position.add(deltaPosition);
    }
});
</script>
<style>
    #hud-pc {
        position: fixed;
        bottom: 20px;
        left: 20px;
        color: white;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 15px;
        border-radius: 10px;
        font-family: sans-serif;
        font-size: 24px;
        font-weight: bold;
        z-index: 10;
    }
    #hud-pc > div:not(:last-child) {
        margin-bottom: 10px;
    }
    #replay-button-pc {
        cursor: pointer;
        background-color: #C0392B;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        margin-top: 15px;
    }
    #replay-button-pc:hover {
        background-color: #A93226;
    }
</style>
</head>
<body>
<div id="hud-pc">
    <div id="floor-display-pc">1階</div>
    <div id="time-display-pc">残り時間: 150</div>
    <div id="health-display-pc">体力: 100</div>
    <div id="replay-button-pc" onclick="window.replayGame()">リプレイ</div>
</div>
<a-scene id="myScene" vr-mode-ui="enabled: true" background="color: #87CEEB">

<a-entity id="vrm-start" vrm="src:./vrm/tesA1_V0a.vrm" vrm-anim rotation="0 180 0"></a-entity>
<a-entity id="vrm-goal" vrm="src:./vrm/tesA1_V0a.vrm" vrm-anim rotation="0 45 0"></a-entity>
<a-entity id="rig" camera-relative-controls="targetSpeed: 10; acceleration: 12; damping: 10; groundY: 0; ceilingY: 6.4;">
        <a-entity id="player" position="0 0 0">
            <a-entity id="camera" camera="far: 20000;" look-controls="pointerLockEnabled: false; touchEnabled: false" position="0 1.6 0">
                <a-entity id="mouseCursor" cursor="rayOrigin: mouse; fuse: false;" raycaster="objects: .maze-wall, a-sphere, .enemy;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7;"></a-entity>
            </a-entity>
            <a-entity id="leftHand" oculus-touch-controls="hand: left; model: true;">
                <a-entity id="vr-hud" position="0 0.05 -0.25" rotation="-60 0 0">
                    <a-plane id="hud-background" width="0.22" height="0.15" color="#FAFAFA" opacity="0.8" side="double"></a-plane>
                    <a-entity id="floor-display-vr"
                        troika-text="value: 1階; color: black; fontSize: 0.012; align: center; anchorX: center;"
                        position="0 0.04 0.01"></a-entity>
                    <a-entity id="time-display-vr"
                        troika-text="value: 残り時間: 150; color: black; fontSize: 0.012; align: center; anchorX: center;"
                        position="0 0.00 0.01"></a-entity>
                    <a-entity id="health-display-vr"
                        troika-text="value: 体力: 100; color: black; fontSize: 0.012; align: center; anchorX: center;"
                        position="0 -0.04 0.01"></a-entity>
                    <a-sphere
                        id="replay-sphere-vr"
                        class="clickable"
                        radius="0.02"
                        position="0.08 -0.05 0.01"
                        material="color: red; shader: flat">
                        <a-entity
                            troika-text="value: リプレイ; color: white; fontSize: 0.01; align: center; anchor: center;"
                            position="0 0.03 0">
                        </a-entity>
                        </a-sphere>
                </a-entity>
            </a-entity>
            <a-entity id="rightHand" oculus-touch-controls="hand: right; model: true;" raycaster="objects: .maze-wall, a-sphere, .enemy, .clickable;" laser-controls="hand: right; model: false; lineColor: white; lineOpacity: 0.75" ></a-entity>
        </a-entity>
    </a-entity>
    <a-entity light="type: ambient; color: #888"></a-entity>
    <a-entity light="type: directional; color: #FFF; intensity: 0.8; castShadow: true" position="-100 200 100"></a-entity>
    <a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="500" height="500" color="#7BC8A4" shadow="receive: true"></a-plane>
    <a-entity id="maze-container"></a-entity>
    <a-entity id="enemy-container"></a-entity>
<script>
// --- SCRIPT BLOCK 2: Main Scene Logic ---
document.addEventListener('DOMContentLoaded', function () {
    // ▼▼▼【v23A 調整】参考例に基づき、VRMモデルにカスタムの待機モーション（手を振る動き）を設定します ▼▼▼
    // 1. 手を振るモーションのデータ定義
    const wavingMotion = {
        spine: { keys: [ { rot: [3, 5, 0], time: 0 }, { rot: [3, 5, 0], time: 1 }, { rot: [3, 5, 0], time: 3.5 }, { rot: [0, 0, 0], time: 4.5 } ] },
        rightUpperArm: { keys: [ { rot: [0, 0, -65], time: 0 }, { rot: [0, 0, -40], time: 1 }, { rot: [0, 0, -65], time: 2 } ] },
        leftUpperArm: { keys: [ { rot: [0, 0, 65], time: 0 }, { rot: [80, -20, -15], time: 1 }, { rot: [80, -20, -15], time: 3.5 }, { rot: [0, 0, 65], time: 4.5 } ] },
        leftLowerArm: { keys: [ { rot: [0, 0, 0], time: 0 }, { rot: [0, -90, 0], time: 1 }, { rot: [0, -100, 0], time: 1.5 }, { rot: [0, -70, 0], time: 2.0 }, { rot: [0, -100, 0], time: 2.5 }, { rot: [0, -70, 0], time: 3.0 }, { rot: [0, -90, 0], time: 3.5 }, { rot: [0, 0, 0], time: 4.5 } ] }
    };

// 2. VRMモデルの要素を取得し、モーションを適用
    const vrmStartEl = document.querySelector('#vrm-start');
    const vrmGoalEl = document.querySelector('#vrm-goal');
    if (vrmStartEl) {
        vrmStartEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion);
    }
    if (vrmGoalEl) {
        vrmGoalEl.setAttribute('vrm-anim', 'idleMotion', wavingMotion);
    }
    // ▲▲▲【v23A 調整】ここまで ▲▲▲

const sceneEl = document.querySelector('a-scene');
    let isGameOver = false;
    let gameTimer = null;
    let currentMazeSize = 39;
    let numberOfEnemiesPerType = 30;
    let currentFloor = 0;

const rightHand = document.getElementById('rightHand');
    const replayButtonPC = document.getElementById('replay-button-pc');
    const ground = document.getElementById('ground');
    const rigEl = document.getElementById('rig');

const gridSize = mazeData.length;
        const offset = (gridSize - 1) / 2;

const startGridX = 1;
        const startGridZ = 1;
        const startWorldX = (startGridX - offset) * MAZE_CELL_SIZE;
        const startWorldZ = (startGridZ - offset) * MAZE_CELL_SIZE;

const goalI = gridSize - 2;
        const goalJ = gridSize - 2;
        const goalWorldX = (goalI - offset) * MAZE_CELL_SIZE;
        const goalWorldZ = (goalJ - offset) * MAZE_CELL_SIZE;

if (vrmStartEl) {
            // ▼▼▼【v23A 調整】スタート地点のVRMモデルがプレイヤーと重ならないよう、Z軸のオフセットを-1に調整します ▼▼▼
            vrmStartEl.setAttribute('position', { x: startWorldX, y: 0, z: startWorldZ - 1 });
            // ▲▲▲【v23A 調整】ここまで ▲▲▲
        }
        if (vrmGoalEl) {
            vrmGoalEl.setAttribute('position', { x: goalWorldX, y: 0, z: goalWorldZ });
        }

if(!document.getElementById('spheres-container')) {
            createSpheres();
        }
        spawnEnemies(mazeData);
        initializeHUD();
    }
    if (sceneEl.hasLoaded) { setupGame(); } else { sceneEl.addEventListener('loaded', setupGame, {once: true}); }

for (let i = 0; i < gridSize; i++) {
            for (let j = 0; j < gridSize; j++) {
                if (mazeData[i][j] === 0) {
                    const distFromStart = Math.sqrt(Math.pow(i - startI, 2) + Math.pow(j - startJ, 2));
                    if (distFromStart > safeRadius) {
                        validSpawnPoints.push({i, j});
                    }
                }
            }
        }
        for (let type = 1; type <= 2; type++) {
            for (let i = 0; i < numberOfEnemiesPerType; i++) {
                if (validSpawnPoints.length === 0) { break; }
                const spawnIndex = Math.floor(Math.random() * validSpawnPoints.length);
                const spawnPoint = validSpawnPoints.splice(spawnIndex, 1)[0];
                const offset = (gridSize - 1) / 2;
                const x = (spawnPoint.i - offset) * MAZE_CELL_SIZE;
                const z = (spawnPoint.j - offset) * MAZE_CELL_SIZE;
                const enemyEl = document.createElement('a-sphere');
                enemyEl.id = `enemy-${type}-${i}`;
                enemyEl.setAttribute('position', {x: x, y: 1, z: z});
                enemyEl.setAttribute('radius', '0.5');
                enemyEl.setAttribute('color', 'black');
                enemyEl.classList.add('enemy');
                enemyEl.addEventListener('componentinitialized', function (evt) {
                    if (evt.detail.name === 'enemy-ai') {
                        this.components['enemy-ai'].setMazeData(mazeData, MAZE_CELL_SIZE, offset);
                    }
                });
                enemyEl.setAttribute('enemy-ai', {
                    type: type,
                    target: '#player'
                });
                enemyContainer.appendChild(enemyEl);
            }
        }
        console.log(`Spawned ${enemyContainer.children.length} enemies.`);
    }
    function initializeHUD() {
        if (gameTimer) { clearInterval(gameTimer); }

const floorElementPC = document.getElementById('floor-display-pc');
        const floorElementVR = document.getElementById('floor-display-vr');
        const timeElementPC = document.getElementById('time-display-pc');
        const timeElementVR = document.getElementById('time-display-vr');
        const healthElementPC = document.getElementById('health-display-pc');
        const healthElementVR = document.getElementById('health-display-vr');

const floorText = `${currentFloor}階`;
        if (floorElementPC) floorElementPC.textContent = floorText;
        if (floorElementVR) floorElementVR.setAttribute('troika-text', 'value', floorText);

let remainingTime = 150;
        const timeText = `残り時間: ${remainingTime}`;
        if (timeElementPC) timeElementPC.textContent = timeText;
        if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', timeText);

if (healthElementPC) healthElementPC.textContent = `体力: 100`;
        if (healthElementVR) healthElementVR.setAttribute('troika-text', 'value', `体力: 100`);

gameTimer = setInterval(() => {
            if (isGameOver) {
                clearInterval(gameTimer);
                return;
            }
            if (remainingTime > 0) {
                remainingTime--;
                const newTimeText = `残り時間: ${remainingTime}`;
                if (timeElementPC) timeElementPC.textContent = newTimeText;
                if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', newTimeText);
            } else {
                const newTimeText = '残り時間: 0';
                if (timeElementPC) timeElementPC.textContent = newTimeText;
                if (timeElementVR) timeElementVR.setAttribute('troika-text', 'value', newTimeText);
                clearInterval(gameTimer);
                triggerGameOver("時間切れ");
            }
        }, 1000);
    }

function replayGame() {
        console.log("Replaying game...");
        isGameOver = false;

const controls = rigEl.components['camera-relative-controls'];
        if (controls) {
            controls.goldenWallsScanned = false;
            controls.goldenWallPositions = [];
        }

currentFloor = 0;
        currentMazeSize = 39;
        numberOfEnemiesPerType = 30;

if (ground) {
            ground.setAttribute('color', '#7BC8A4');
        }
        if (rigEl && rigEl.components['camera-relative-controls']) {
            rigEl.setAttribute('camera-relative-controls', 'enabled', true);
        }
        startNewLevel();
    }
    window.replayGame = replayGame;

if (ground) {
            ground.setAttribute('color', '#550000');
        }
        if (rigEl && rigEl.components['camera-relative-controls']) {
            rigEl.setAttribute('camera-relative-controls', 'enabled', false);
        }
        const enemies = document.querySelectorAll('.enemy');
        enemies.forEach(enemy => {
            if (enemy.components['enemy-ai']) {
                enemy.setAttribute('enemy-ai', 'enabled', false);
            }
        });
    }

if (rightHand) {
        rightHand.addEventListener('triggerdown', function () {
            const raycasterComponent = rightHand.components.raycaster;
            if (raycasterComponent) {
                const intersectedEls = raycasterComponent.intersectedEls;
                if (intersectedEls.length > 0 && intersectedEls[0].id === 'replay-sphere-vr') {
                    console.log('Replay sphere clicked via triggerdown!');
                    replayGame();
                }
            }
        });
    }