ボールが壁に当たると真ん中同じ性質のボールが2つできるゲーム's game

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

No:36794

←

Prev Next

→

ボールが壁に当たると真ん中同じ性質のボールが2つできるゲーム
Developer User4403｜Date and time 24/1/18 11:17:39
Build time 13 sec｜Game capacity 2.55KB｜

Script

了解です。以下に、指定された条件に沿ったJavaScriptを含むHTMLファイルを示します。

🟡

このプログラムは、壁に当たると真ん中同じ性質のボールが2つ生成されるゲームです。実行すると、画面中央に黄色いボールが表示され、周期的に上下左右に移動していきます。壁に当たると、その位置に新しい同じ性質のボールが生成されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解です。以下に、指定された条件に沿ったJavaScriptを含むHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ボールゲーム</title>
  <style>
    #game-area {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #f1f1f1;
    }
    .ball {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ff7f50;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div class="ball">🟡</div>
  </div>

// ボールを移動させる関数
    function moveBall(ball, dx, dy) {
      const area = document.getElementById("game-area");
      const rect = area.getBoundingClientRect();
      const ballRect = ball.getBoundingClientRect();

// 左右の壁に当たった場合
      if (ballRect.left + dx <= rect.left || ballRect.right + dx >= rect.right) {
        area.appendChild(createBall(ball.style.top, ball.style.left));
      }
      // 上下の壁に当たった場合
      if (ballRect.top + dy <= rect.top || ballRect.bottom + dy >= rect.bottom) {
        area.appendChild(createBall(ball.style.top, ball.style.left));
      }

// ボールの座標を更新
      ball.style.top = ballRect.top + dy + "px";
      ball.style.left = ballRect.left + dx + "px";
    }

// ボールを移動させる処理を周期的に実行する関数
    function gameLoop() {
      const ball = document.querySelector(".ball");
      moveBall(ball, 5, 5);

// 10ミリ秒ごとにgameLoop関数を実行
      setTimeout(gameLoop, 10);
    }

// ゲームを開始
    gameLoop();
  </script>
</body>
</html>
```