壁に当たるとボールが反射し、2秒後にボールが2つできて左右に分かれる's game

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

No:36799

134

←

Prev Next

→

壁に当たるとボールが反射し、2秒後にボールが2つできて左右に分かれる
Developer User4403｜Date and time 24/1/18 11:21:52
Build time 18.09 sec｜Game capacity 3.582KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>ボールゲーム</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    #ball {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="ball"></div>
  </div>

// ボールの反射処理
    function bounce() {
      var ballRect = ball.getBoundingClientRect(); // ボールの現在位置とサイズを取得
      var gameRect = game.getBoundingClientRect(); // ゲーム領域の位置とサイズを取得

if (ballRect.left <= gameRect.left || ballRect.right >= gameRect.right) {
        // 左右の壁に当たった場合は反射する
        directionX = -directionX;
      }

if (ballRect.top <= gameRect.top || ballRect.bottom >= gameRect.bottom) {
        // 上下の壁に当たった場合は反射する
        directionY = -directionY;
      }
    }

// ボールの更新処理
    function updateBall() {
      var ballRect = ball.getBoundingClientRect(); // ボールの現在位置とサイズを取得

// ボールの新しい位置を計算
      var newLeft = ballRect.left + (directionX * speed);
      var newTop = ballRect.top + (directionY * speed);

// ボールを移動
      ball.style.left = newLeft + "px";
      ball.style.top = newTop + "px";

// ボールの反射処理
      bounce();
    }

// ボールの分裂処理
    function splitBall() {
      // 新しいボールを作成
      var newBall1 = document.createElement("div");
      var newBall2 = document.createElement("div");

// ボールのスタイルを設定
      newBall1.style.position = "absolute";
      newBall1.style.borderRadius = "50%";
      newBall1.style.width = "20px";
      newBall1.style.height = "20px";
      newBall1.style.backgroundColor = "red";
      newBall2.style.position = "absolute";
      newBall2.style.borderRadius = "50%";
      newBall2.style.width = "20px";
      newBall2.style.height = "20px";
      newBall2.style.backgroundColor = "red";

// 新しいボールの位置を設定
      var ballRect = ball.getBoundingClientRect(); // ボールの現在位置とサイズを取得
      var newBall1Left = ballRect.left - 5; // 左側のボールの位置
      var newBall2Left = ballRect.right - 15; // 右側のボールの位置
      var newBallTop = ballRect.top; // 両ボールの高さは元のボールと同じ

newBall1.style.left = newBall1Left + "px";
      newBall1.style.top = newBallTop + "px";
      newBall2.style.left = newBall2Left + "px";
      newBall2.style.top = newBallTop + "px";

// 新しいボールをゲーム領域に追加
      game.appendChild(newBall1);
      game.appendChild(newBall2);
    }

// ゲームループ
    function gameLoop() {
      updateBall();

// 2秒後にボールを分裂させる
      setTimeout(function() {
        splitBall();
      }, 2000);

// 次のフレームを待ってゲームループを再実行
      requestAnimationFrame(gameLoop);
    }

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