Block Breaker's game | AI game creator

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

No:18342

62

Block Breaker
Developer User6337｜Date and time 23/9/28 10:37:53
Build time 46.286 sec｜Game capacity 4.908KB｜

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Block Breaker</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

<script>
      // Initialize the game canvas
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      
      // Set up the paddle object
      const paddleWidth = 75;
      const paddleHeight = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;
      let paddleY = canvas.height - paddleHeight;
      const paddleSpeed = 7;
      
      // Set up the ball object
      let ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballDX = 2;
      let ballDY = -2;
      
      // Set up the block grid
      const blockRowCount = 3;
      const blockColumnCount = 5;
      const blockWidth = 75;
      const blockHeight = 20;
      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++) {
          const blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
          const blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
          blocks[c][r] = { x: blockX, y: blockY, status: 1 };
        }
      }
      
      // Set up score and game status
      let score = 0;
      let gameStatus = true;
      
      // Handle paddle movement
      function movePaddle(e) {
        if (e.key === "ArrowLeft" && paddleX > 0) {
          paddleX -= paddleSpeed;
        } else if (e.key === "ArrowRight" && paddleX < canvas.width - paddleWidth) {
          paddleX += paddleSpeed;
        }
      }
      
      // Check collision between ball and blocks
      function collideDetection() {
        for (let c = 0; c < blockColumnCount; c++) {
          for (let r = 0; r < blockRowCount; r++) {
            const b = blocks[c][r];
            if (b.status === 1) {
              if (
                ballX > b.x &&
                ballX < b.x + blockWidth &&
                ballY > b.y &&
                ballY < b.y + blockHeight
              ) {
                ballDY = -ballDY;
                b.status = 0;
                score++;
                if (score === blockRowCount * blockColumnCount) {
                  gameStatus = false;
                  alert("Congratulations! You won!");
                }
              }
            }
          }
        }
      }
      
      // Update the canvas and objects
      function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBlocks();
        drawBall();
        drawPaddle();
        collideDetection();
        
        if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
          ballDX = -ballDX;
        }
        if (ballY + ballDY < ballRadius) {
          ballDY = -ballDY;
        } else if (ballY + ballDY > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballDY = -ballDY;
          } else {
            gameStatus = false;
            alert("Game Over! Score: " + score);
            document.location.reload();
          }
        }
        
        ballX += ballDX;
        ballY += ballDY;
        
        if (gameStatus) {
          requestAnimationFrame(updateGame);
        }
      }
      
      // Draw blocks on the canvas
      function drawBlocks() {
        for (let c = 0; c < blockColumnCount; c++) {
          for (let r = 0; r < blockRowCount; r++) {
            if (blocks[c][r].status === 1) {
              const blockX = blocks[c][r].x;
              const blockY = blocks[c][r].y;
              ctx.beginPath();
              ctx.rect(blockX, blockY, blockWidth, blockHeight);
              ctx.fillStyle = "#0095DD";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }
      
      // Draw the ball on the canvas
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // Draw the paddle on the canvas
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
      
      // Start the game and handle user input
      const startGame = () => {
        document.addEventListener("keydown", movePaddle, false);
        updateGame();
      };
      
      // Start the game
      startGame();
    </script>
  </body>
</html>