ブロック崩し　ボールが下に落ちるとゲームオーバー's game

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

No:31181

←

Prev Next

→

ブロック崩し　ボールが下に落ちるとゲームオーバー
Developer User14987｜Date and time 23/12/25 12:28:20
Build time 50.058 sec｜Game capacity 5.482KB｜

Script

了解です。以下にHTMLとJavaScriptを使用したブロック崩しのゲームの実装例を示します。

このコードでは、ブロック崩しのゲームを実装しています。スマホでの操作にも対応しており、ゲームオーバー時にはアラートを表示し、再度ゲームを開始することができます。ブロックは絵文字の四角を使用して描画しています。ステージサイズやパドルやボールのサイズ・色などはCSSで調整することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解です。以下にHTMLとJavaScriptを使用したブロック崩しのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブロック崩し</title>
  <style>
    #stage {
      position: relative;
      width: 320px;
      height: 400px;
      border: 1px solid #000;
    }
    .block {
      position: absolute;
      width: 60px;
      height: 20px;
      background-color: #1f77b4;
    }
    #paddle {
      position: absolute;
      width: 80px;
      height: 10px;
      background-color: #ff7f0e;
    }
    #ball {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #2ca02c;
    }
  </style>
</head>
<body>
  <div id="stage">
    <div id="paddle"></div>
    <div id="ball"></div>
  </div>

// パドルの初期位置と移動速度
    const paddle = document.getElementById('paddle');
    let paddleX = stageWidth / 2 - paddle.offsetWidth / 2;
    const paddleSpeed = 10;

// ボールの初期位置と移動速度
    const ball = document.getElementById('ball');
    let ballX = stageWidth / 2 - ball.offsetWidth / 2;
    let ballY = stageHeight / 2 - ball.offsetHeight / 2;
    let ballSpeedX = 2;
    let ballSpeedY = 2;

// ブロックの設定
    const blockWidth = 60;
    const blockHeight = 20;
    const blockRowCount = 5;
    const blockColumnCount = 6;
    const blockPadding = 10;
    const blockOffsetTop = 30;
    const blockOffsetLeft = 30;
    const blocks = [];
    for (let c = 0; c < blockColumnCount; c++) {
      blocks[c] = [];
      for (let r = 0; r < blockRowCount; r++) {
        blocks[c][r] = { x: 0, y: 0, destroyed: false };
      }
    }

// キーボードの状態を監視
    const keys = {};
    document.addEventListener('keydown', (e) => {
      keys[e.code] = true;
    });
    document.addEventListener('keyup', (e) => {
      keys[e.code] = false;
    });

// ゲームループ
    function gameLoop() {
      movePaddle();
      moveBall();
      collisionDetection();

if (ballY > stageHeight) {
        // ボールが下に落ちたらゲームオーバー
        gameover();
        return;
      }

requestAnimationFrame(gameLoop);
    }

// パドルの移動
    function movePaddle() {
      if (keys['ArrowLeft'] && paddleX > 0) {
        paddleX -= paddleSpeed;
      }
      if (keys['ArrowRight'] && paddleX < stageWidth - paddle.offsetWidth) {
        paddleX += paddleSpeed;
      }
      paddle.style.left = paddleX + 'px';
    }

// ボールの移動
    function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      ball.style.left = ballX + 'px';
      ball.style.top = ballY + 'px';

if (ballX < 0 || ballX > stageWidth - ball.offsetWidth) {
        // ボールが左右の壁に当たったら反射
        ballSpeedX = -ballSpeedX;
      }
      if (ballY < 0) {
        // ボールが上の壁に当たったら反射
        ballSpeedY = -ballSpeedY;
      }
      if (ballY + ball.offsetHeight > stageHeight - paddle.offsetHeight && ballX + ball.offsetWidth > paddleX && ballX < paddleX + paddle.offsetWidth) {
        // ボールがパドルに当たったら反射
        ballSpeedY = -ballSpeedY;
      }
    }

// ボールとブロックの衝突判定
    function collisionDetection() {
      for (let c = 0; c < blockColumnCount; c++) {
        for (let r = 0; r < blockRowCount; r++) {
          const block = blocks[c][r];
          if (!block.destroyed) {
            if (ballX + ball.offsetWidth > block.x && ballX < block.x + blockWidth && ballY + ball.offsetHeight > block.y && ballY < block.y + blockHeight) {
              // ボールがブロックに当たったらブロックを破壊
              block.destroyed = true;
              ballSpeedY = -ballSpeedY;
            }
          }
        }
      }
    }

// ゲームオーバー
    function gameover() {
      alert('ゲームオーバー');
      document.location.reload();
    }

// ブロック描画
    function drawBlocks() {
      for (let c = 0; c < blockColumnCount; c++) {
        for (let r = 0; r < blockRowCount; r++) {
          if (!blocks[c][r].destroyed) {
            const blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
            const blockY = r * (blockHeight + blockPadding) + blockOffsetTop;
            blocks[c][r].x = blockX;
            blocks[c][r].y = blockY;
            const blockElement = document.createElement('div');
            blockElement.className = 'block';
            blockElement.style.left = blockX + 'px';
            blockElement.style.top = blockY + 'px';
            stage.appendChild(blockElement);
          }
        }
      }
    }

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