AI game creator

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

No:39426

←

Prev Next

→

Block Breaker
Developer User17639｜Date and time 24/1/28 11:19:07
Build time 24.216 sec｜Game capacity 6.136KB｜

Script

Sure! Here's a simple implementation of a block breaker game using JavaScript and HTML:

To play the game, you can save the above code in a single HTML file, open it in a browser, and it will start the block breaker game. Use the left and right arrow keys to move the paddle and try to break all the blocks using the bouncing ball. If you miss the ball with the paddle and it falls below, you lose a life. The game continues until you either break all the blocks or lose all your lives.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a block breaker game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker Game</title>
  <style>
    #gameCanvas {
      margin: 0 auto;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

function startGame() {
      var canvas = document.getElementById("gameCanvas");
      var ctx = canvas.getContext("2d");

// Defining game objects
      var paddle = {
        width: 80,
        height: 10,
        x: canvas.width / 2 - 40,
        y: canvas.height - 20,
        speed: 7
      };

var ball = {
        radius: 10,
        x: canvas.width / 2,
        y: canvas.height - 30,
        dx: 3,
        dy: -3
      };

var blocks = [];
      var score = 0;
      var lives = 3;

// Generating blocks
      var blockRowCount = 3;
      var blockColumnCount = 5;
      var blockWidth = 75;
      var blockHeight = 20;
      var blockPadding = 10;
      var blockOffsetTop = 30;
      var blockOffsetLeft = 30;

for (var c = 0; c < blockColumnCount; c++) {
        blocks[c] = [];
        for (var r = 0; r < blockRowCount; r++) {
          blocks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }

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

function keyDownHandler(event) {
        if (event.key === "Right" || event.key === "ArrowRight") {
          paddle.dx = paddle.speed;
        } else if (event.key === "Left" || event.key === "ArrowLeft") {
          paddle.dx = -paddle.speed;
        }
      }

function keyUpHandler(event) {
        if (
          event.key === "Right" ||
          event.key === "ArrowRight" ||
          event.key === "Left" ||
          event.key === "ArrowLeft"
        ) {
          paddle.dx = 0;
        }
      }

// Collision detection
      function collisionDetection() {
        for (var c = 0; c < blockColumnCount; c++) {
          for (var r = 0; r < blockRowCount; r++) {
            var block = blocks[c][r];

if (block.status === 1) {
              if (
                ball.x > block.x &&
                ball.x < block.x + blockWidth &&
                ball.y > block.y &&
                ball.y < block.y + blockHeight
              ) {
                ball.dy = -ball.dy;
                block.status = 0;
                score++;
                if (score == blockRowCount * blockColumnCount) {
                  alert("Congratulations! You won!");
                  document.location.reload();
                }
              }
            }
          }
        }
      }

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

function drawPaddle() {
        ctx.beginPath();
        ctx.rect(
          paddle.x,
          paddle.y,
          paddle.width,
          paddle.height
        );
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

function drawBlocks() {
        for (var c = 0; c < blockColumnCount; c++) {
          for (var r = 0; r < blockRowCount; r++) {
            if (blocks[c][r].status === 1) {
              var blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
              var blockY = r * (blockHeight + blockPadding) + blockOffsetTop;
              blocks[c][r].x = blockX;
              blocks[c][r].y = blockY;

ctx.beginPath();
              ctx.rect(blockX, blockY, blockWidth, blockHeight);
              ctx.fillStyle = "#0095DD";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

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

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBlocks();
        drawBall();
        drawPaddle();
        drawScore();
        drawLives();
        collisionDetection();

if (
          ball.x + ball.dx > canvas.width - ball.radius ||
          ball.x + ball.dx < ball.radius
        ) {
          ball.dx = -ball.dx;
        }

if (ball.y + ball.dy < ball.radius) {
          ball.dy = -ball.dy;
        } else if (ball.y + ball.dy > canvas.height - ball.radius) {
          if (
            ball.x > paddle.x &&
            ball.x < paddle.x + paddle.width
          ) {
            ball.dy = -ball.dy;
          } else {
            lives--;
            if (!lives) {
              alert("Game Over! Your score: " + score);
              document.location.reload();
            } else {
              ball.x = canvas.width / 2;
              ball.y = canvas.height - 30;
              ball.dx = 3;
              ball.dy = -3;
              paddle.x = (canvas.width - paddle.width) / 2;
            }
          }
        }

ball.x += ball.dx;
        ball.y += ball.dy;

paddle.x += paddle.dx;

if (paddle.x < 0) {
          paddle.x = 0;
        }

if (paddle.x + paddle.width > canvas.width) {
          paddle.x = canvas.width - paddle.width;
        }

requestAnimationFrame(draw);
      }

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