virtual space (e.g. in computer graphics)'s game

Click here for free DL of the app version that can save data.

No:7753

1407

←

Prev Next

→

virtual space (e.g. in computer graphics)
Developer o2pi4｜Date and time 23/7/9 19:55:26
Build time 8.7 sec｜Game capacity 1.954KB｜

Script

了解しました。仮想空間まと当てというゲームを作成します。以下が実装例です。

🎯

Score: 0

このプログラムでは、クリックするとターゲットが新しい位置に移動し、スコアが加算されるというゲームが実行されます。マウス操作にも対応しており、クリック位置がターゲットに反映されます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

了解しました。仮想空間まと当てというゲームを作成します。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>仮想空間まと当て</title>
</head>
<body>
  <div id="gameContainer">
    <div id="target">🎯</div>
    <div id="score">Score: <span id="scoreValue">0</span></div>
  </div>

// スコアの初期値
    let score = 0;

// ゲームコンテナの要素
    const gameContainer = document.getElementById("gameContainer");

// ターゲットの要素
    const target = document.getElementById("target");

// スコアの要素
    const scoreValue = document.getElementById("scoreValue");

// ターゲットをクリックした時の処理
    target.addEventListener("click", () => {
      // スコアを加算
      score++;
      scoreValue.textContent = score;

// ターゲットを新しい位置に移動
      targetX = Math.random() * (gameContainer.offsetWidth - 50);
      targetY = Math.random() * (gameContainer.offsetHeight - 50);
      target.style.left = `${targetX}px`;
      target.style.top = `${targetY}px`;
    });

// ゲームコンテナのクリック位置をターゲットに反映する処理
    gameContainer.addEventListener("click", (event) => {
      const rect = gameContainer.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

target.style.left = `${clickX - 25}px`;
      target.style.top = `${clickY - 25}px`;
    });
  </script>
</body>
</html>
```