test5-meiro-cgpt 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VR 迷路ゲーム</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe-ar.js"></script>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<a-scene embedded>
<!-- 床 -->
<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
        
<!-- 迷路の壁 -->
<a-box position="0 1 -2" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="4 1 -4" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="0 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="2 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
        
<!-- スタート -->
<a-sphere position="0 0.5 -2" radius="0.3" color="#FF0000" id="start"></a-sphere>
<!-- ゴール -->
<a-sphere position="2 0.5 -6" radius="0.3" color="#00FF00" id="goal"></a-sphere>
<!-- カメラ -->
<a-camera position="0 1.6 0" look-controls="pointerLockEnabled: true"></a-camera>
</a-scene>
<script>
// スタートからゴールにカーソルで動く機能
document.querySelector('#start').addEventListener('click', function() {
const camera = document.querySelector('a-camera');
const startPosition = new THREE.Vector3(0, 1.6, 0);
const goalPosition = new THREE.Vector3(2, 1.6, -6);
            
let moveInterval = setInterval(() => {
const currentPosition = camera.getAttribute('position');
let direction = goalPosition.clone().sub(new THREE.Vector3(currentPosition.x, 0, currentPosition.z)).normalize();
                
// カメラを目標に向かって動かす
camera.setAttribute('position', {
x: currentPosition.x + direction.x * 0.05,
y: currentPosition.y,
z: currentPosition.z + direction.z * 0.05
});
// ゴールに到達したら止める
if (currentPosition.distanceTo(goalPosition) < 0.5) {
clearInterval(moveInterval);
alert('ゴールに到達しました!');
}
}, 50);
});
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VR 迷路ゲーム</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe-ar.js"></script>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<a-scene embedded>
<!-- 床 -->
<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
<!-- 迷路の壁 -->
<a-box position="0 1 -2" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="4 1 -4" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="0 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="2 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<!-- スタート -->
<a-sphere position="0 0.5 -2" radius="0.3" color="#FF0000" id="start"></a-sphere>
<!-- ゴール -->
<a-sphere position="2 0.5 -6" radius="0.3" color="#00FF00" id="goal"></a-sphere>
<!-- カメラ -->
<a-camera position="0 1.6 0" look-controls="pointerLockEnabled: true"></a-camera>
</a-scene>
<script>
// スタートからゴールにカーソルで動く機能
document.querySelector('#start').addEventListener('click', function() {
const camera = document.querySelector('a-camera');
const startPosition = new THREE.Vector3(0, 1.6, 0);
const goalPosition = new THREE.Vector3(2, 1.6, -6);
let moveInterval = setInterval(() => {
const currentPosition = camera.getAttribute('position');
let direction = goalPosition.clone().sub(new THREE.Vector3(currentPosition.x, 0, currentPosition.z)).normalize();
// カメラを目標に向かって動かす
camera.setAttribute('position', {
x: currentPosition.x + direction.x * 0.05,
y: currentPosition.y,
z: currentPosition.z + direction.z * 0.05
});
// ゴールに到達したら止める
if (currentPosition.distanceTo(goalPosition) < 0.5) {
clearInterval(moveInterval);
alert('ゴールに到達しました!');
}
}, 50);
});
</script>
</body>
</html>
使用変数
| ) {            const camera = document.querySelector -------( Function ) | |
| camera | |
| charset | |
| color | |
| content | |
| controls | |
| currentPosition | |
| depth | |
| direction | |
| goalPosition | |
| height | |
| id | |
| lang | |
| moveInterval | |
| name | |
| position | |
| radius | |
| rotation | |
| scale | |
| src | |
| startPosition | |
| width |