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

No:5214

1667

←

Prev Next

→

Exhaustion of ideas!
Developer User3589｜Date and time 23/6/29 20:19:53
Build time 41.39 sec｜Game capacity 4.19KB｜

Script

了解しました！ありがとうございます。以下は、絵文字を使ったシンプルなブロック崩しゲームの実装例です。

ブロック崩しゲーム

このコードは、指定された要件を満たすシンプルなブロック崩しゲームです。パドルをマウスで操作し、ボールを跳ね返してブロックを壊していきます。ボールが画面下に落ちるとゲームオーバーになり、ページがリロードされます。ご参考までに、上記のコードを単体のHTMLファイルとして保存し、ブラウザで開くことでゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました！ありがとうございます。以下は、絵文字を使ったシンプルなブロック崩しゲームの実装例です。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ブロック崩しゲーム</title>
  <style>
    #game-board {
      width: 300px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }
    #paddle {
      width: 60px;
      height: 10px;
      background-color: black;
      position: absolute;
      bottom: 0;
    }
    .brick {
      width: 60px;
      height: 20px;
      background-color: orange;
      position: absolute;
      top: 0;
    }
    #ball {
      width: 15px;
      height: 15px;
      background-color: red;
      position: absolute;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>ブロック崩しゲーム</h1>
  <div id="game-board">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="brick" style="left: 10px;"></div>
    <div class="brick" style="left: 80px;"></div>
    <div class="brick" style="left: 150px;"></div>
    <div class="brick" style="left: 220px;"></div>
  </div>

// 初期位置の設定
      let paddleX = gameBoard.offsetWidth / 2 - paddle.offsetWidth / 2;
      let ballX = gameBoard.offsetWidth / 2 - ball.offsetWidth / 2;
      let ballY = gameBoard.offsetHeight / 2 - ball.offsetHeight / 2;
      let ballSpeedX = 2;
      let ballSpeedY = 2;

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

// ゲームのメインループ
      function gameLoop() {
        // ボールの移動
        ballX += ballSpeedX;
        ballY += ballSpeedY;
        ball.style.left = ballX + 'px';
        ball.style.top = ballY + 'px';

// ボールとパドルの衝突判定
        if (
          ballY + ball.offsetHeight >= paddle.offsetTop &&
          ballY <= paddle.offsetTop + paddle.offsetHeight &&
          ballX + ball.offsetWidth >= paddle.offsetLeft &&
          ballX <= paddle.offsetLeft + paddle.offsetWidth
        ) {
          ballSpeedY = -ballSpeedY;
        }

// ボールとブロックの衝突判定
        for (let i = 0; i < bricks.length; i++) {
          const brick = bricks[i];
          if (
            ballY + ball.offsetHeight >= brick.offsetTop &&
            ballY <= brick.offsetTop + brick.offsetHeight &&
            ballX + ball.offsetWidth >= brick.offsetLeft &&
            ballX <= brick.offsetLeft + brick.offsetWidth
          ) {
            brick.style.display = 'none';
            ballSpeedY = -ballSpeedY;
          }
        }

// 画面外に出た場合の処理
        if (ballX <= 0 || ballX + ball.offsetWidth >= gameBoard.offsetWidth) {
          ballSpeedX = -ballSpeedX;
        }
        if (ballY <= 0) {
          ballSpeedY = -ballSpeedY;
        }
        if (ballY + ball.offsetHeight >= gameBoard.offsetHeight) {
          alert('ゲームオーバー');
          location.reload(); // ゲームリセット
        }

// メインループの再呼び出し
        requestAnimationFrame(gameLoop);
      }

// ゲームスタート
      gameLoop();
    });
  </script>
</body>
</html>
```

このコードは、指定された要件を満たすシンプルなブロック崩しゲームです。パドルをマウスで操作し、ボールを跳ね返してブロックを壊していきます。ボールが画面下に落ちるとゲームオーバーになり、ページがリロードされます。

ご参考までに、上記のコードを単体のHTMLファイルとして保存し、ブラウザで開くことでゲームをプレイすることができます。