Block Breaker's game | AI game creator

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

No:38301

36

Block Breaker
Developer User17284｜Date and time 24/1/24 4:08:58
Build time 28.947 sec｜Game capacity 6.572KB｜

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript and enclosed in `` tags. The game can be played on a smartphone. <br><br> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> canvas { border: 1px solid black; display: block; margin: 0 auto; } </style> <canvas id="gameCanvas" width="400" height="300"></canvas>

To play the game: 1. Copy the entire code into a new HTML file (e.g., `block_breaker.html`). 2. Open the HTML file on your smartphone using a web browser. 3. You should see a canvas with the block breaker game. 4. Move the paddle by pressing the arrow keys or by touching the left/right side of the screen. 5. The objective is to break all the bricks with the ball without letting it fall off the bottom of the screen. 6. If you win by breaking all the bricks, a congratulatory message will be displayed. 7. If you lose all your lives, a game over message will be displayed, and you can try again by reloading the page. Enjoy playing the Block Breaker game on your smartphone!

→ 　

0　

0　

　
　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags. The game can be played on a smartphone.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Breaker</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

<script>
    // Game initialization
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");

var ballRadius = 10;
    var x = canvas.width / 2;
    var y = canvas.height - 30;
    var dx = 2;
    var dy = -2;
    var paddleWidth = 75;
    var paddleHeight = 10;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var rightPressed = false;
    var leftPressed = false;

var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;

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 };
      }
    }

var score = 0;
    var lives = 3;

// Event listeners for paddle control
    document.addEventListener("touchstart", touchStartHandler, false);
    document.addEventListener("touchend", touchEndHandler, false);

function touchStartHandler(e) {
      if (e.touches) {
        var touchX = e.touches[0].clientX;
        if (touchX < canvas.width / 2) {
          leftPressed = true;
        } else {
          rightPressed = true;
        }
      }
    }

function touchEndHandler(e) {
      leftPressed = false;
      rightPressed = false;
    }

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

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 between ball and 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();
          }
        }
      }
    }

// Display the score and remaining lives
    function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#0095DD";
      ctx.fillText("Score: " + score, 8, 20);
    }

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

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

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

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

// Collision detection for walls and paddle
      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! Please try again.");
            document.location.reload();
          } else {
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 2;
            dy = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }

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

requestAnimationFrame(draw);
    }

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

To play the game:
1. Copy the entire code into a new HTML file (e.g., `block_breaker.html`).
2. Open the HTML file on your smartphone using a web browser.
3. You should see a canvas with the block breaker game.
4. Move the paddle by pressing the arrow keys or by touching the left/right side of the screen.
5. The objective is to break all the bricks with the ball without letting it fall off the bottom of the screen.
6. If you win by breaking all the bricks, a congratulatory message will be displayed.
7. If you lose all your lives, a game over message will be displayed, and you can try again by reloading the page.

Enjoy playing the Block Breaker game on your smartphone!