building block scrabble's game

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

No:11489

118

←

Prev Next

→

building block scrabble
Developer User4892｜Date and time 23/8/10 9:14:26
Build time 21.371 sec｜Game capacity 4.474KB｜

Script

了解です。以下にブロック崩しのゲームを実装したプログラムを示します。

上記のプログラムは、ブロック崩しのゲームを実装しています。スマートフォンでも遊ぶことができ、ゲームが実行開始されます。プログラムは1枚のHTMLファイルに含まれており、JavaScriptは`
`タグで囲まれています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。以下にブロック崩しのゲームを実装したプログラムを示します。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブロック崩し</title>
  <style>
    #gameCanvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// パドルの設定
    const paddleWidth = 80;
    const paddleHeight = 10;
    const paddleSpeed = 5;
    const paddle = {
      x: width / 2 - paddleWidth / 2,
      y: height - paddleHeight,
      width: paddleWidth,
      height: paddleHeight
    };

// ボールの設定
    const ballRadius = 8;
    let ball = {
      x: width / 2,
      y: height / 2,
      radius: ballRadius,
      speedX: 3,
      speedY: -3
    };

// ブロックの設定
    const blockSize = 50;
    const blockRows = 5;
    const blockCols = Math.floor(width / blockSize);
    const blocks = [];
    for (let r = 0; r < blockRows; r++) {
      for (let c = 0; c < blockCols; c++) {
        blocks.push({ x: c * blockSize, y: r * blockSize, width: blockSize, height: blockSize });
      }
    }

// ゲームのステータス
    let gameOver = false;
    let score = 0;

// キーの状態を記録するオブジェクト
    const keys = {};

function drawPaddle() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
    }

function drawBall() {
      ctx.fillStyle = 'red';
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }

function drawBlocks() {
      blocks.forEach(function (block) {
        ctx.fillStyle = 'green';
        ctx.fillRect(block.x, block.y, block.width, block.height);
      });
    }

function drawScore() {
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, 10, 25);
    }

function draw() {
      ctx.clearRect(0, 0, width, height);

drawPaddle();
      drawBall();
      drawBlocks();
      drawScore();
    }

function update() {
      if (keys.ArrowLeft && paddle.x > 0) {
        paddle.x -= paddleSpeed;
      }
      if (keys.ArrowRight && paddle.x < width - paddle.width) {
        paddle.x += paddleSpeed;
      }

ball.x += ball.speedX;
      ball.y += ball.speedY;

// ボールとパドルの衝突判定
      if (ball.y + ball.radius > paddle.y && ball.y - ball.radius < paddle.y + paddle.height &&
        ball.x + ball.radius > paddle.x && ball.x - ball.radius < paddle.x + paddle.width) {
        ball.speedY = -ball.speedY;
      }

// ボールとブロックの衝突判定
      blocks.forEach(function (block) {
        if (ball.y + ball.radius > block.y && ball.y - ball.radius < block.y + block.height &&
          ball.x + ball.radius > block.x && ball.x - ball.radius < block.x + block.width) {
          ball.speedY = -ball.speedY;
          blocks.splice(blocks.indexOf(block), 1);
          score += 10;
        }
      });

// 壁とボールの衝突判定
      if (ball.y <= ball.radius || ball.y >= height - ball.radius) {
        ball.speedY = -ball.speedY;
      }
      if (ball.x <= ball.radius || ball.x >= width - ball.radius) {
        ball.speedX = -ball.speedX;
      }

// ゲームオーバー判定
      if (ball.y >= height - ball.radius) {
        gameOver = true;
      }
    }

function loop() {
      if (!gameOver) {
        update();
        draw();
        requestAnimationFrame(loop);
      } else {
        alert('Game Over! Your score: ' + score);
      }
    }

// キーボードの入力を受け付ける
    document.addEventListener('keydown', function (event) {
      keys[event.key] = true;
    });
    document.addEventListener('keyup', function (event) {
      delete keys[event.key];
    });

loop();
  </script>
</body>
</html>
```

上記のプログラムは、ブロック崩しのゲームを実装しています。スマートフォンでも遊ぶことができ、ゲームが実行開始されます。プログラムは1枚のHTMLファイルに含まれており、JavaScriptは`<script>`タグで囲まれています。