Javascript Shortcode Area
-----Version 110606-----
 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>



使用変数

) { 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