AI game creator

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

No:9427

164

←

Prev Next

→

Block Breaker
Developer User4357｜Date and time 23/7/24 21:02:41
Build time 47.885 sec｜Game capacity 5.462KB｜

Script

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

To play the game, simply open the HTML file in a web browser, and you'll be able to control the paddle using the right and left arrow keys (or using touch gestures on a smartphone). The goal is to break all the bricks using the ball bouncing off the paddle and walls. If the ball hits the bottom wall without being caught by the paddle, the game ends.

←

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 in a single HTML file using JavaScript:

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

// Define the ball properties
    const ballRadius = 10;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballDX = 4;
    let ballDY = -4;

// Define the paddle properties
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX = (canvas.width - paddleWidth) / 2;
    let rightPressed = false;
    let leftPressed = false;

// Define the brick properties
    const brickRowCount = 3;
    const brickColumnCount = 5;
    const brickWidth = 75;
    const brickHeight = 20;
    const brickPadding = 10;
    const brickOffsetTop = 30;
    const brickOffsetLeft = 30;

// Create the bricks
    const bricks = [];
    for (let c = 0; c < brickColumnCount; c++) {
      bricks[c] = [];
      for (let r = 0; r < brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
      }
    }

// Track the score and game state
    let score = 0;
    let gameover = false;

// Move the paddle based on user input
    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;
      }
    }

document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);

// Detect collision between ball and bricks
    function collisionDetection() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          const brick = bricks[c][r];
          if (brick.status === 1) {
            if (
              ballX > brick.x &&
              ballX < brick.x + brickWidth &&
              ballY > brick.y &&
              ballY < brick.y + brickHeight
            ) {
              ballDY = -ballDY;
              brick.status = 0;
              score++;
              if (score === brickRowCount * brickColumnCount) {
                gameover = true;
              }
            }
          }
        }
      }
    }

// Draw the ball on canvas
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

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

// Draw the bricks on canvas
    function drawBricks() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            const 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 canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameover) {
        drawBricks();
        drawBall();
        drawPaddle();
        collisionDetection();

// Reverse ball direction when hitting walls or paddle
        if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
          ballDX = -ballDX;
        }
        if (ballY + ballDY < ballRadius) {
          ballDY = -ballDY;
        } else if (ballY + ballDY > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballDY = -ballDY;
          } else {
            gameover = true;
          }
        }

// Move paddle based on user input
        if (rightPressed && paddleX < canvas.width - paddleWidth) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }

ballX += ballDX;
        ballY += ballDY;

requestAnimationFrame(draw);
      } else {
        ctx.font = "20px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("GAME OVER", canvas.width / 2 - 70, canvas.height / 2);
      }
    }

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