A game in which 18 balls keep reflecting, and when a ball and a ball hit each other, they reflect.'s game | AI game creator

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

No:9645

130

A game in which 18 balls keep reflecting, and when..ALL
Developer User4403｜Date and time 23/7/26 18:30:27
Build time 29.026 sec｜Game capacity 2.876KB｜

了解しました。以下に18個の玉が反射し続けるゲームのコードを示します。

このコードは、18個の玉がランダムな位置から反射しながら移動します。プログラムが実行されると、HTMLの`<div id="container"></div>`要素内に18個の玉（div要素）が生成されます。各玉はランダムな色と位置で表示されます。玉が画面の上下または左右の端に到達すると、反射します。反射する方向はランダムですが、変更することも可能です。玉は5ピクセルずつ移動し、`requestAnimationFrame`を使用して連続的に移動します。この方法を使用すると、スムーズなアニメーションが実現できます。このゲームはスマートフォンでもプレイできるように設計されています。スマートフォンのブラウザで実行すると、触れた位置から玉が反射する様子を確認できます。上記のコードをHTMLファイルに保存し、ウェブブラウザで開くことで、実際にゲームとして遊ぶことができます。

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

了解しました。以下に18個の玉が反射し続けるゲームのコードを示します。

```html
<!DOCTYPE html>
<html>

<head>
  <title>反射ゲーム</title>
  <style>
    #container {
      width: 100%;
      height: 500px;
      position: relative;
      border: 1px solid black;
    }

.ball {
      width: 30px;
      height: 30px;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="container"></div>

<script>
    let container = document.getElementById('container');
    let balls = [];

function createBall() {
      let ball = document.createElement('div');
      ball.className = 'ball';
      ball.style.backgroundColor = getRandomColor();

let top = Math.floor(Math.random() * 470);
      let left = Math.floor(Math.random() * 970);
      ball.style.top = top + 'px';
      ball.style.left = left + 'px';

container.appendChild(ball);
      balls.push(ball);
    }

function getRandomColor() {
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

function moveBalls() {
      balls.forEach(function(ball) {
        let top = parseInt(ball.style.top);
        let left = parseInt(ball.style.left);

let directionX = 1;
        let directionY = 1;

if (top <= 0 || top >= 470) {
          directionY *= -1;
        }

if (left <= 0 || left >= 970) {
          directionX *= -1;
        }

top += directionY * 5;
        left += directionX * 5;

ball.style.top = top + 'px';
        ball.style.left = left + 'px';
      });

requestAnimationFrame(moveBalls);
    }

for (let i = 0; i < 18; i++) {
      createBall();
    }

moveBalls();
  </script>
</body>

</html>
```

このコードは、18個の玉がランダムな位置から反射しながら移動します。プログラムが実行されると、HTMLの`<div id="container"></div>`要素内に18個の玉（div要素）が生成されます。各玉はランダムな色と位置で表示されます。

玉が画面の上下または左右の端に到達すると、反射します。反射する方向はランダムですが、変更することも可能です。

玉は5ピクセルずつ移動し、`requestAnimationFrame`を使用して連続的に移動します。この方法を使用すると、スムーズなアニメーションが実現できます。

このゲームはスマートフォンでもプレイできるように設計されています。スマートフォンのブラウザで実行すると、触れた位置から玉が反射する様子を確認できます。

上記のコードをHTMLファイルに保存し、ウェブブラウザで開くことで、実際にゲームとして遊ぶことができます。