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 |