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

4084

←

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>
```