Throw them all! 200 balls are raining down on you! Players throw an unlimited number of paddles at the balls to destroy all the blocks!'s game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Throw them all! 200 balls are raining down on you! Players throw an unlimited number of paddles at the balls to destroy all the blocks!'s game | AI game creator

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

No:8845

4159

←

Prev Next

→

Throw them all! 200 balls are raining down on you!..ALL
Developer anonymous｜Date and time 70/1/1 9:59:12
Build time unknown sec｜Game capacity 3.552KB｜

Script

以下は、200のボールが降り注ぐブロック崩しゲームのHTMLとJavaScriptの実装例です。

このコードは、200のボールが降り注ぐブロック崩しゲームを実装しています。ゲーム画面の上部に得点が表示されます。マウスを動かすことでパドルを操作し、ボールを跳ね返して全てのブロックを破壊することが目標です。再生ボタンを押すとゲームが開始されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

以下は、200のボールが降り注ぐブロック崩しゲームのHTMLとJavaScriptの実装例です。

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>ブロック崩しゲーム</title>
    <style>
      #gameCanvas {
        width: 300px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
      .ball {
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
      }
      .paddle {
        width: 50px;
        height: 10px;
        background-color: blue;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .block {
        width: 50px;
        height: 20px;
        background-color: green;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="gameCanvas">
      <div class="paddle"></div>
    </div>

// パドルの移動
      gameCanvas.addEventListener("mousemove", function (event) {
        paddle.style.left = event.clientX - paddle.offsetWidth / 2 + "px";
      });

// ボールの作成と動き
      for (let i = 0; i < 200; i++) {
        setTimeout(() => {
          let ball = document.createElement("div");
          ball.classList.add("ball");
          gameCanvas.appendChild(ball);

let ballX = Math.random() * (gameCanvas.offsetWidth - ball.offsetWidth);
          let ballY = 0;
          let dx = 2;
          let dy = 2;

setInterval(() => {
            ballX += dx;
            ballY += dy;

if (ballX <= 0 || ballX >= gameCanvas.offsetWidth - ball.offsetWidth) {
              dx *= -1;
            }
            if (ballY <= 0 || ballY >= gameCanvas.offsetHeight - ball.offsetHeight) {
              dy *= -1;
            }

// パドルとの衝突判定
            if (isColliding(ball, paddle)) {
              dy *= -1;
              score++;
              document.title = "ブロック崩しゲーム - スコア: " + score;
            }

// ボールとブロックとの衝突判定
            let blocks = document.querySelectorAll(".block");
            for (let block of blocks) {
              if (isColliding(ball, block)) {
                dy *= -1;
                score++;
                document.title = "ブロック崩しゲーム - スコア: " + score;
                gameCanvas.removeChild(block);
              }
            }

ball.style.top = ballY + "px";
            ball.style.left = ballX + "px";
          }, 10);
        }, i * 500);
      }

// 衝突判定の関数
      function isColliding(ball, element) {
        let ballRect = ball.getBoundingClientRect();
        let elementRect = element.getBoundingClientRect();
        return (
          ballRect.top < elementRect.bottom &&
          ballRect.bottom > elementRect.top &&
          ballRect.left < elementRect.right &&
          ballRect.right > elementRect.left
        );
      }
    </script>
  </body>
</html>
```