AI game creator

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

No:30349

←

Prev Next

→

Block Breaker
Developer User14749｜Date and time 23/12/21 8:39:53
Build time 30.573 sec｜Game capacity 5.344KB｜

Script

Sure! Here's an example of a simple block-breaking game implemented in a single HTML file using JavaScript:

This is a basic implementation of the classic block-breaking game. You can control the paddle using the arrow keys or by touching the screen on a smartphone. The objective is to break all the bricks by bouncing the ball off the paddle and hitting the bricks. If the ball falls below the paddle, the game ends. Once all the bricks are destroyed, the player wins. Please note that this is just a basic example to get you started, and you can enhance the game further by adding levels, power-ups, sound effects, and more features according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple block-breaking game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Create bricks grid
    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 to control the paddle
    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;
      }
    }

// Function to detect collision between the ball and the 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 (
              ballX > brick.x &&
              ballX < brick.x + brickWidth &&
              ballY > brick.y &&
              ballY < brick.y + brickHeight
            ) {
              ballSpeedY = -ballSpeedY;
              brick.status = 0;
              score++;
              if (score === brickRowCount * brickColumnCount) {
                alert("Congratulations! You won!");
                document.location.reload();
              }
            }
          }
        }
      }
    }

// Draw the ball
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, 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 logic and draw on canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      collisionDetection();

// Ball movement logic
      if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY + ballSpeedY < ballRadius) {
        ballSpeedY = -ballSpeedY;
      } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballSpeedY = -ballSpeedY;
        } else {
          alert("Game Over");
          document.location.reload();
        }
      }

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

ballX += ballSpeedX;
      ballY += ballSpeedY;

requestAnimationFrame(draw);
    }

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

Please note that this is just a basic example to get you started, and you can enhance the game further by adding levels, power-ups, sound effects, and more features according to your requirements.