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

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

No:8845

1737

←

Prev Next

→

Throw them all! 200 balls are raining down on you!..ALL
Developer User3589｜Date and time 23/7/18 22:49:43
Build time 31.891 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>
```