AI game creator

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

No:26252

←

Prev Next

→

Block Breaker
Developer User12944｜Date and time 23/11/28 5:16:43
Build time 183.248 sec｜Game capacity 6.014KB｜

Script

Sure! I have created a simple Block Breaker game using JavaScript and HTML. Here is the code for the game implemented as a single HTML file:

To play the game, simply save the code as an HTML file (e.g., `block_breaker_game.html`) on your smartphone and open it in a web browser. The game will start automatically. Use the arrow keys or swipe gestures to move the paddle and bounce the ball off the bricks. Please note that the code is a basic implementation of a Block Breaker game and can be further improved with additional features and enhancements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! I have created a simple Block Breaker game using JavaScript and HTML. Here is the code for the game implemented as a single HTML file:

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

// Set up initial game variables
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballSpeedX = 2;
    let ballSpeedY = -2;
    const ballRadius = 10;

let paddleX = (canvas.width - 75) / 2;
    const paddleHeight = 10;
    const paddleWidth = 75;

let rightPressed = false;
    let leftPressed = false;

let score = 0;
    let lives = 3;

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

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

// Function to draw the bricks
    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();
          }
        }
      }
    }

// Function to detect collision with the bricks
    function collisionDetection() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          const b = bricks[c][r];
          if (b.status === 1) {
            if (
              ballX > b.x &&
              ballX < b.x + brickWidth &&
              ballY > b.y &&
              ballY < b.y + brickHeight
            ) {
              ballSpeedY = -ballSpeedY;
              b.status = 0;
              score++;
              if (score === brickRowCount * brickColumnCount) {
                alert("Congratulations! You won!");
                document.location.reload();
              }
            }
          }
        }
      }
    }

// Function to update the game state
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBricks();
      drawBall();
      drawPaddle();
      collisionDetection();

// Update ball position
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Detect collision with walls
      if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY + ballSpeedY < ballRadius) {
        ballSpeedY = -ballSpeedY;
      } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
        // Detect collision with paddle
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballSpeedY = -ballSpeedY;
        } else {
          lives--;
          if (!lives) {
            alert("Game Over");
            document.location.reload();
          } else {
            ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            ballSpeedX = 2;
            ballSpeedY = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }

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

requestAnimationFrame(update);
    }

// Handle key press events
    function keyDownHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = true;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = true;
      }
    }

// Handle key release events
    function keyUpHandler(e) {
      if (e.key === "Right" || e.key === "ArrowRight") {
        rightPressed = false;
      } else if (e.key === "Left" || e.key === "ArrowLeft") {
        leftPressed = false;
      }
    }

// Handle mouse move event
    function mouseMoveHandler(e) {
      const relativeX = e.clientX - canvas.offsetLeft;
      if (relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth / 2;
      }
    }

// Register event listeners
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("mousemove", mouseMoveHandler, false);

// Start the game
    update();
  </script>
</body>
</html>
```

Please note that the code is a basic implementation of a Block Breaker game and can be further improved with additional features and enhancements.