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

No:6136

1971

←

Prev Next

→

articulated robot
Developer User3860｜Date and time 23/7/1 17:25:22
Build time 33.003 sec｜Game capacity 3.149KB｜

Script

ットアームを操作するゲームを作ります。以下のような仕様で実装します。 - プログラムは1枚のHTMLファイルとして実装します。 - HTMLファイル内には必ずJavaScriptを含めます。JavaScriptはscriptタグで囲みます。 - プログラムの処理は実行開始されます。 - ゲームはスマホ操作を前提とします。 - ロボットアームは絵文字で表現します（例: 🤖）。 - ゲームの内容は、指定したターゲット位置までロボットアームを操作して到達することです。以下にサンプルのコードを示します。

多関節ロボットアームゲーム

🤖

これは単純なロボットアームゲームの実装例です。ターゲット位置にロボットアームを操作して到達すると、アラートが表示され、ゲームがリセットされます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

ットアームを操作するゲームを作ります。以下のような仕様で実装します。

- プログラムは1枚のHTMLファイルとして実装します。
- HTMLファイル内には必ずJavaScriptを含めます。JavaScriptはscriptタグで囲みます。
- プログラムの処理は実行開始されます。
- ゲームはスマホ操作を前提とします。
- ロボットアームは絵文字で表現します（例: 🤖）。
- ゲームの内容は、指定したターゲット位置までロボットアームを操作して到達することです。

以下にサンプルのコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>多関節ロボットアームゲーム</title>
  <style>
    #robot-arm {
      font-size: 40px;
    }
  </style>
</head>
<body>
  <h1>多関節ロボットアームゲーム</h1>
  
  <div id="target"></div>
  <div id="robot-arm">🤖</div>
  
  <script>
    // ゲームの初期ターゲット位置
    var targetPosition = {
      x: Math.floor(Math.random() * 500),
      y: Math.floor(Math.random() * 500)
    };
    
    // ロボットアームの初期位置
    var armPosition = {
      x: 0,
      y: 0
    };
    
    // ロボットアームの移動処理
    function moveArm(x, y) {
      armPosition.x += x;
      armPosition.y += y;
      
      // ロボットアームの位置を更新
      document.getElementById('robot-arm').style.transform = `translate(${armPosition.x}px, ${armPosition.y}px)`;
      
      // ターゲット到達判定
      if (armPosition.x == targetPosition.x && armPosition.y == targetPosition.y) {
        alert('ターゲットに到達しました！');
        resetGame();
      }
    }
    
    // ゲームのリセット処理
    function resetGame() {
      targetPosition = {
        x: Math.floor(Math.random() * 500),
        y: Math.floor(Math.random() * 500)
      };
      armPosition = {
        x: 0,
        y: 0
      };
      
      // ターゲット位置とロボットアーム位置を更新
      document.getElementById('target').style.transform = `translate(${targetPosition.x}px, ${targetPosition.y}px)`;
      document.getElementById('robot-arm').style.transform = 'translate(0px, 0px)';
    }
    
    // タッチイベントのリスナーを設定
    document.addEventListener('touchstart', handleTouch);
    document.addEventListener('touchmove', handleTouch);
    
    // タッチ位置に応じてロボットアームを移動
    function handleTouch(event) {
      var touchX = event.touches[0].clientX;
      var touchY = event.touches[0].clientY;
      
      // 移動差分を計算
      var deltaX = touchX - armPosition.x;
      var deltaY = touchY - armPosition.y;
      
      // ロボットアームを移動
      moveArm(deltaX, deltaY);
    }
    
    // ゲームをリセット
    resetGame();
  </script>
</body>
</html>
```