AI game creator

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

No:40188

←

Prev Next

→

Block Breaker
Developer User18010｜Date and time 24/2/1 15:35:35
Build time 25.328 sec｜Game capacity 5.671KB｜

Script

Sure! Here's an example of a simple block breaker game implemented as a single HTML file with JavaScript. In this game, you control a paddle using touch controls on a smartphone to bounce a ball and break blocks. The game utilizes pictograms for better visual representation. You can copy the code below and save it as an HTML file:

To play the game, open the saved HTML file in a smartphone browser that supports JavaScript, and you should be able to control the paddle using touch controls, bouncing the ball to break the bricks. If the ball is missed by the paddle, it's game over. If you break all the bricks, you win! Note: The game canvas size and other parameters can be adjusted as needed to fit different screen sizes and desired gameplay difficulty.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

You can copy the code below and save it as an HTML file:

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

// Set up the initial game state
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballRadius = 10;
    let ballDX = 2;
    let ballDY = -2;

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

let brickRowCount = 3;
    let brickColumnCount = 5;
    let brickWidth = 75;
    let brickHeight = 20;
    let brickPadding = 10;
    let brickOffsetTop = 30;
    let brickOffsetLeft = 30;

let score = 0;

// Event listener to capture touch input
    canvas.addEventListener('touchmove', (event) => {
      const rect = canvas.getBoundingClientRect();
      touchX = event.touches[0].clientX - rect.left;
    }, false);

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

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

// Function to draw the bricks on the canvas
    function drawBricks() {
      for (let row = 0; row < brickRowCount; row++) {
        for (let col = 0; col < brickColumnCount; col++) {
          if (bricks[row][col].status === 1) {
            const brickX = (col * (brickWidth + brickPadding)) + brickOffsetLeft;
            const brickY = (row * (brickHeight + brickPadding)) + brickOffsetTop;
            bricks[row][col].x = brickX;
            bricks[row][col].y = brickY;
            context.beginPath();
            context.rect(brickX, brickY, brickWidth, brickHeight);
            context.fillStyle = '#0095DD';
            context.fill();
            context.closePath();
          }
        }
      }
    }

// Function to update the game state
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();
      drawPaddle();
      drawBall();

// Collision detection between the ball and bricks
      for (let row = 0; row < brickRowCount; row++) {
        for (let col = 0; col < brickColumnCount; col++) {
          const brick = bricks[row][col];
          if (brick.status === 1) {
            if (
              ballX > brick.x && ballX < brick.x + brickWidth &&
              ballY > brick.y && ballY < brick.y + brickHeight
            ) {
              // Reverse the ball's direction
              ballDY = -ballDY;
              // Mark the brick as destroyed
              brick.status = 0;
              // Increase the score
              score++;
              // Check if all bricks have been destroyed
              if (score === brickRowCount * brickColumnCount) {
                alert('Congratulations! You won!');
                document.location.reload();
              }
            }
          }
        }
      }

// Collision detection between the ball and the paddle
      if (
        ballX > paddleX && ballX < paddleX + paddleWidth &&
        ballY > canvas.height - paddleHeight - ballRadius
      ) {
        ballDY = -ballDY;
      }

// Reverse the ball's direction if it hits the side walls
      if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
        ballDX = -ballDX;
      }

// Reverse the ball's direction if it hits the top wall
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      }

// Check if the ball missed the paddle (game over)
      if (ballY + ballDY > canvas.height - ballRadius) {
        alert('Game Over');
        document.location.reload();
      }

// Move the paddle based on touch input
      if (touchX > canvas.width - paddleWidth) {
        touchX = canvas.width - paddleWidth;
      }
      paddleX = touchX;

// Move the ball
      ballX += ballDX;
      ballY += ballDY;

// Request the next animation frame
      requestAnimationFrame(updateGame);
    }

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

Note: The game canvas size and other parameters can be adjusted as needed to fit different screen sizes and desired gameplay difficulty.