AI game creator

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

No:25126

←

Prev Next

→

Block Breaker
Developer User12218｜Date and time 23/11/18 1:50:54
Build time 128.583 sec｜Game capacity 5.052KB｜

Script

Sure, here's an example of a simple Block Breaker game implemented as a single HTML file with JavaScript enclosed in `` tags: <br><br> <br> <style> canvas { border: 1px solid black; display: block; margin: 0 auto; } </style> <canvas id="gameCanvas" width="320" height="480"></canvas>

This game features a ball that bounces off bricks and the paddle at the bottom of the canvas. The goal is to destroy all the bricks by bouncing the ball off the paddle. If the ball misses the paddle and goes out of bounds at the bottom, the game is over. You can control the paddle using the left and right arrow keys.

←

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 with JavaScript enclosed in `<script>` tags:

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

// Event listeners for key presses
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Key press handlers
    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 b = bricks[c][r];
          if (b.status === 1) {
            if (
              x > b.x &&
              x < b.x + brickWidth &&
              y > b.y &&
              y < b.y + brickHeight
            ) {
              dy = -dy;
              b.status = 0;
              score++;
              if (score === brickRowCount * brickColumnCount) {
                alert("Congratulations! You won!");
                document.location.reload();
              }
            }
          }
        }
      }
    }

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

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

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

// Game loop function
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      drawScore();
      collisionDetection();

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

// Ball collision with 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 {
          alert("Game Over! Press OK to restart.");
          document.location.reload();
        }
      }

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

requestAnimationFrame(draw);
    }

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

This game features a ball that bounces off bricks and the paddle at the bottom of the canvas. The goal is to destroy all the bricks by bouncing the ball off the paddle. If the ball misses the paddle and goes out of bounds at the bottom, the game is over. You can control the paddle using the left and right arrow keys.