AI game creator

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

No:5053

125

←

Prev Next

→

Achilles heel
Developer User3795｜Date and time 23/6/29 13:09:04
Build time 23.626 sec｜Game capacity 2.145KB｜

Script

は、プレイヤーが画面上の障害物を避けながらアキレス腱のように移動するゲームを作成します。まず、次のようなHTMLファイルを作成します。

このHTMLファイルは、スマートフォンの傾きに応じてプレイヤーを左右に移動させ、同時に障害物も左に移動させるという簡単なゲームです。プレイヤーと障害物が衝突した場合には「ゲームオーバー！」というアラートが表示され、ゲームが終了します。注意: このゲームは実際にスマートフォン上で動作しますが、デスクトップ上ではデバイスの傾きのイベントが発生せず、操作ができません。スマートフォン上で試してみてください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

は、プレイヤーが画面上の障害物を避けながらアキレス腱のように移動するゲームを作成します。

まず、次のようなHTMLファイルを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>アキレス腱</title>
  <style>
    #player {
      position: absolute;
      bottom: 10px;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }

#obstacle {
      position: absolute;
      bottom: 10px;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <div id="obstacle"></div>

// ゲームループを開始
    var gameLoop = setInterval(function() {
      // スマホの傾きを監視
      window.addEventListener('deviceorientation', function(event) {
        // アキレス腱を移動させる
        playerPosition += event.gamma / 10;
        document.getElementById('player').style.left = playerPosition + 'px';
      });

// 障害物を移動させる
      obstaclePosition -= 10;
      document.getElementById('obstacle').style.left = obstaclePosition + 'px';

// 当たり判定
      if (playerPosition <= obstaclePosition + 50 && playerPosition + 50 >= obstaclePosition) {
        alert('ゲームオーバー！');
        clearInterval(gameLoop);
      }
    }, 100);
  </script>
</body>
</html>
```

このHTMLファイルは、スマートフォンの傾きに応じてプレイヤーを左右に移動させ、同時に障害物も左に移動させるという簡単なゲームです。プレイヤーと障害物が衝突した場合には「ゲームオーバー！」というアラートが表示され、ゲームが終了します。

注意: このゲームは実際にスマートフォン上で動作しますが、デスクトップ上ではデバイスの傾きのイベントが発生せず、操作ができません。スマートフォン上で試してみてください。