課題提出
カシワザキ<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Simple A-Frame Game</title>
<script src=”https://aframe.io/releases/1.4.2/aframe.min.js”></script>
</head>
<body>
<a-scene>
<!– カメラとカーソル –>
<a-entity camera position=”0 1.6 0″>
<a-entity
cursor=”fuse: false; rayOrigin: mouse”
position=”0 0 -1″
metry=”primitive: ring; radiusInner: 0.02; radiusOuter: 0.03″
material=”color: black; shader: flat”></a-entity>
</a-entity>
<!– スコア表示 –>
<a-text id=”scoreText” value=”Score: 0″ position=”-1 2 -3″ color=”white”
width=”4″></a-text>
<!– ターゲット –>
<a-entity id=”target” geometry=”primitive: box; height: 0.5; width: 0.5; depth: 0.5″
material=”color: red” position=”0 1.5 -3″
class=”clickable”></a-entity>
<!– 環境 –>
<a-sky color=”#6EBAA7″></a-sky>
<a-plane rotation=”-90 0 0″ width=”10″ height=”10″ color=”#7BC8A4″></a-plane>
</a-scene>
<script>
let score = 0;
const scoreText = document.querySelector(‘#scoreText’);
const target = document.querySelector(‘#target’);
// ターゲットをクリックするとスコアアップ
target.addEventListener(‘click’, () => {
score++;
scoreText.setAttribute(‘value’, `Score: ${score}`);
// ターゲットの位置をランダムに移動
const randomX = (Math.random() * 6) – 3; // -3 to 3
const randomY = (Math.random() * 3) + 1; // 1 to 4
const randomZ = (Math.random() * -5) – 2; // -2 to -7
target.setAttribute(‘position’, `${randomX} ${randomY} ${randomZ}`);
});
</script>
</body>
</html>
