AI game creator

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

No:25842

←

Prev Next

→

Block Breaker
Developer User12692｜Date and time 23/11/25 1:55:51
Build time 151.455 sec｜Game capacity 7.464KB｜

Script

Sure! Here's a simple implementation of a Block Breaker game using JavaScript, HTML, and CSS. It's designed for smartphone operation and includes pictograms for a better user experience. Copy the code below and save it as a single HTML file.

To play the game on your smartphone, open the HTML file in a web browser. You can move the paddle by swiping left or right on the screen, or by using the arrow keys on your device's keyboard. The objective of the game is to break all the bricks by bouncing the ball off the paddle without allowing it to fall off the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Block Breaker</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

canvas {
      display: block;
      margin: auto;
      background: #eee;
      border: 1px solid #333;
      touch-action: none;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Helper function to draw a rounded rectangle
    function drawRoundRect(ctx, x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
      ctx.fill();
      ctx.stroke();
    }

// Game variables
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var ballRadius = 10;
    var x = canvas.width / 2;
    var y = canvas.height - 30;
    var dx = 2;
    var dy = -2;
    var paddleHeight = 10;
    var paddleWidth = 75;
    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 score = 0;
    var lives = 3;

// Create an array to hold the 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 touch controls
    document.addEventListener("touchstart", touchStartHandler, false);
    document.addEventListener("touchmove", touchMoveHandler, false);
    document.addEventListener("touchend", touchEndHandler, false);

// Touch control variables
    var touchX = null;

function touchStartHandler(e) {
      touchX = e.touches[0].clientX;
    }

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

// Event listeners for key controls
    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 function
    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 on the canvas
    function drawBall() {
      context.beginPath();
      drawRoundRect(context, x - ballRadius, y - ballRadius, ballRadius * 2, ballRadius * 2, ballRadius);
      context.fillStyle = "#0095DD";
      context.closePath();
    }

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

// Draw the bricks on the canvas
    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;
            context.beginPath();
            context.rect(brickX, brickY, brickWidth, brickHeight);
            context.fillStyle = "#0095DD";
            context.closePath();
          }
        }
      }
    }

// Update the position of the ball
    function updateBallPosition() {
      x += dx;
      y += dy;
    }

// Check for collision with walls, paddle, or bricks
    function checkForCollisions() {
      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;
          }
        }
      }

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

// Draw all game elements on the canvas
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      collisionDetection();

// Display score and lives
      context.font = "16px Arial";
      context.fillStyle = "#0095DD";
      context.fillText("Score: " + score, 8, 20);
      context.fillText("Lives: " + lives, canvas.width - 65, 20);

updateBallPosition();
      checkForCollisions();

requestAnimationFrame(draw);
    }

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