十字キーで操作できるブロッククズシ←↓→↑●'s game

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

No:16028

←

Prev Next

→

十字キーで操作できるブロッククズシ←↓→↑●
Developer はにわ｜Date and time 23/9/15 7:43:46
Build time 49.462 sec｜Game capacity 5.232KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>ブロックくずし</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #gameCanvas {
      background: #efefef;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    window.addEventListener('load', function() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      // ブロックくずしの各種設定
      const paddleWidth = 80;
      const paddleHeight = 10;
      const paddleSpeed = 20;
      const ballRadius = 10;
      const ballSpeed = 3;
      const brickRowCount = 4;
      const brickColumnCount = 6;
      const brickWidth = 60;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      
      // パドルの初期位置
      let paddleX = canvas.width / 2 - paddleWidth / 2;
      
      // ボールの初期位置と移動量
      let ballX = canvas.width / 2;
      let ballY = canvas.height - paddleHeight - ballRadius - 5;
      let ballDX = ballSpeed;
      let ballDY = -ballSpeed;
      
      // ブロックの状態を保持する2次元配列
      const bricks = [];
      for (let column = 0; column < brickColumnCount; column++) {
        bricks[column] = [];
        for (let row = 0; row < brickRowCount; row++) {
          bricks[column][row] = { x: 0, y: 0, visible: true };
        }
      }

// パドルを描画
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = '#0095dd';
        ctx.fill();
        ctx.closePath();
      }

// ボールを描画
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = '#0095dd';
        ctx.fill();
        ctx.closePath();
      }

// ブロックを描画
      function drawBricks() {
        for (let column = 0; column < brickColumnCount; column++) {
          for (let row = 0; row < brickRowCount; row++) {
            if (bricks[column][row].visible) {
              const brickX = column * (brickWidth + brickPadding) + brickOffsetLeft;
              const brickY = row * (brickHeight + brickPadding) + brickOffsetTop;
              bricks[column][row].x = brickX;
              bricks[column][row].y = brickY;
              ctx.beginPath();
              ctx.rect(brickX, brickY, brickWidth, brickHeight);
              ctx.fillStyle = '#0095dd';
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }
      
      // パドルが壁に当たったかの判定
      function checkWallCollision() {
        if (paddleX < 0) {
          paddleX = 0;
        } else if (paddleX + paddleWidth > canvas.width) {
          paddleX = canvas.width - paddleWidth;
        }
      }
      
      // ボールが壁に当たったかの判定
      function checkBallCollision() {
        const nextX = ballX + ballDX;
        const nextY = ballY + ballDY;
        
        if (nextX < ballRadius || nextX > canvas.width - ballRadius) {
          ballDX = -ballDX;
        }
        
        if (nextY < ballRadius ||
            (nextY > canvas.height - paddleHeight - ballRadius &&
             nextX > paddleX && nextX < paddleX + paddleWidth)) {
          ballDY = -ballDY;
        } else if (nextY > canvas.height) {
          // ゲームオーバー
          alert('ゲームオーバー');
          document.location.reload();
        }
        
        ballX += ballDX;
        ballY += ballDY;
      }
      
      // ボールがブロックに当たったかの判定
      function checkBrickCollision() {
        for (let column = 0; column < brickColumnCount; column++) {
          for (let row = 0; row < brickRowCount; row++) {
            const brick = bricks[column][row];
            if (brick.visible) {
              if (ballX > brick.x && ballX < brick.x + brickWidth &&
                  ballY > brick.y && ballY < brick.y + brickHeight) {
                ballDY = -ballDY;
                brick.visible = false;
              }
            }
          }
        }
      }
      
      // キーボードの入力を受け付ける
      function handleKeydown(event) {
        switch(event.keyCode) {
          case 37: // 左
            paddleX -= paddleSpeed;
            break;
          case 39: // 右
            paddleX += paddleSpeed;
            break;
        }
      }

// ゲームループ
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPaddle();
        drawBall();
        drawBricks();
        checkWallCollision();
        checkBallCollision();
        checkBrickCollision();
        requestAnimationFrame(gameLoop);
      }
      
      document.addEventListener('keydown', handleKeydown);
      gameLoop();
    });
  </script>
</body>
</html>