AI game creator

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

No:27748

←

Prev Next

→

Block Breaker
Developer User13819｜Date and time 23/12/8 22:01:38
Build time 60.91 sec｜Game capacity 5.41KB｜

Script

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript.

To play the game, open the HTML file in a web browser that supports JavaScript (e.g., Google Chrome, Mozilla Firefox, etc.) on your smartphone or any other device. You can control the paddle using the left and right arrow keys on your device's keyboard. Please note that this is a basic example and can be expanded and customized further based on specific requirements or design preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker Game</title>
  <style>
    #gameCanvas {
      border: 1px solid #000;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

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

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

function keyDownHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = true;
      } else if (event.keyCode == 37) {
        leftPressed = true;
      }
    }

function keyUpHandler(event) {
      if (event.keyCode == 39) {
        rightPressed = false;
      } else if (event.keyCode == 37) {
        leftPressed = false;
      }
    }

// Detect collision with bricks
    function collisionDetection() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          var brick = bricks[c][r];
          if (brick.status == 1) {
            if (
              x > brick.x &&
              x < brick.x + brickWidth &&
              y > brick.y &&
              y < brick.y + brickHeight
            ) {
              dy = -dy;
              brick.status = 0;
              score++;
              if (score == brickRowCount * brickColumnCount) {
                alert("Congratulations! You won!");
                document.location.reload();
              }
            }
          }
        }
      }
    }

// Draw the ball
    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Draw the paddle
    function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// Draw the bricks
    function drawBricks() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status == 1) {
            var brickX =
              c * (brickWidth + brickPadding) + brickOffsetLeft;
            var 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();
          }
        }
      }
    }

// Update game state and redraw elements
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      collisionDetection();

// Ball movement
      x += dx;
      y += dy;

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

// Ball collision with walls
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy < ballRadius) {
        dy = -dy;
      } else if (y + dy > canvas.height - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {
          dy = -dy;
        } else {
          lives--;
          if (!lives) {
            alert("Game Over");
            document.location.reload();
          } else {
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 2;
            dy = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }

// Update score
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: " + score, 8, 20);

// Update lives
      ctx.fillText("Lives: " + lives, canvas.width - 65, 20);

requestAnimationFrame(draw);
    }

// Start the game
    draw();
  </script>
</body>
</html>
```

Please note that this is a basic example and can be expanded and customized further based on specific requirements or design preferences.