AI game creator

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

No:40757

←

Prev Next

→

Block Breaker
Developer User18246｜Date and time 24/2/4 3:21:31
Build time 19.771 sec｜Game capacity 5.937KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<html>
<head>
   <title>Block Breaker</title>
   <style>
      canvas {
         background: #f2f2f2;
         display: block;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <canvas id="blockBreaker" width="400" height="500"></canvas>
   <script>
      // Block Breaker Game

// Setup canvas
      const canvas = document.getElementById('blockBreaker');
      const ctx = canvas.getContext('2d');

// Paddle properties
      const paddleWidth = 80;
      const paddleHeight = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;
      let rightPressed = false;
      let leftPressed = false;

// Ball properties
      let ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let dx = 3;
      let dy = -3;

// Brick properties
      const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      let bricks = [];

for (let c = 0; c < brickColumnCount; c++) {
         bricks[c] = [];
         for (let r = 0; r < brickRowCount; r++) {
            bricks[c][r] = {
               x: 0,
               y: 0,
               status: 1
            };
         }
      }

// Game state
      let score = 0;
      let lives = 3;

// Event listeners for paddle movement
      document.addEventListener('keydown', keyDownHandler);
      document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
         if (e.key === 'Right' || e.key === 'ArrowRight') {
           rightPressed = true;
         } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
           leftPressed = true;
         }
      }

function keyUpHandler(e) {
         if (e.key === 'Right' || e.key === 'ArrowRight') {
           rightPressed = false;
         } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
           leftPressed = false;
         }
      }

// Collision detection
      function collisionDetection() {
         for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
               const brick = bricks[c][r];
               if (brick.status === 1) {
                  if (
                     ballX > brick.x &&
                     ballX < brick.x + brickWidth &&
                     ballY > brick.y &&
                     ballY < brick.y + brickHeight
                  ) {
                     dy = -dy;
                     brick.status = 0;
                     score++;
                     if (score === brickRowCount * brickColumnCount) {
                        alert('Congratulations! You won!');
                        document.location.reload();
                     }
                  }
               }
            }
         }
      }

// Game loop
      function draw() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();
         drawBall();
         drawPaddle();
         drawScore();
         drawLives();

collisionDetection();

// Ball movement
         if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
            dx = -dx;
         }
         if (ballY + dy < ballRadius) {
            dy = -dy;
         } else if (ballY + dy > canvas.height - ballRadius) {
            if (ballX > paddleX && ballX < paddleX + paddleWidth) {
               dy = -dy;
            } else {
               lives--;
               if (!lives) {
                  alert('Game Over!');
                  document.location.reload();
               } else {
                  ballX = canvas.width / 2;
                  ballY = canvas.height - 30;
                  dx = 3;
                  dy = -3;
                  paddleX = (canvas.width - paddleWidth) / 2;
               }
            }
         }

if (rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 7;
         } else if (leftPressed && paddleX > 0) {
            paddleX -= 7;
         }

ballX += dx;
         ballY += dy;

requestAnimationFrame(draw);
      }

// Draw bricks on the canvas
      function drawBricks() {
         for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
               if (bricks[c][r].status === 1) {
                  const brickX =
                     c * (brickWidth + brickPadding) + brickOffsetLeft;
                  const brickY =
                     r * (brickHeight + brickPadding) + brickOffsetTop;
                  bricks[c][r].x = brickX;
                  bricks[c][r].y = brickY;
                  ctx.beginPath();
                  ctx.rect(brickX, brickY, brickWidth, brickHeight);
                  ctx.fillStyle = '#0095DD';
                  ctx.fill();
                  ctx.closePath();
               }
            }
         }
      }

// Draw 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 paddle on the canvas
      function drawPaddle() {
         ctx.beginPath();
         ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
         ctx.fillStyle = '#0095DD';
         ctx.fill();
         ctx.closePath();
      }

// Draw score on the canvas
      function drawScore() {
         ctx.font = '16px Arial';
         ctx.fillStyle = '#0095DD';
         ctx.fillText('Score: ' + score, 8, 20);
      }

// Draw lives on the canvas
      function drawLives() {
         ctx.font = '16px Arial';
         ctx.fillStyle = '#0095DD';
         ctx.fillText('Lives: ' + lives, canvas.width - 65, 20);
      }

draw();
   </script>
</body>
</html>