AI game creator

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

No:24600

←

Prev Next

→

Block Breaker
Developer User11704｜Date and time 23/11/10 9:55:58
Build time 78.514 sec｜Game capacity 3.623KB｜

Script

Sure! Here's a simple implementation of the classic game, Block Breaker, using HTML, CSS, and JavaScript. The game will start as soon as you open the HTML file in your smartphone's browser. I'll be using some pictograms to represent the game elements.

You can save the code above in a file with an `.html` extension and open it on your smartphone's browser. You'll be able to control the paddle's movement using your finger on the canvas, and the objective is to break all the bricks by bouncing the ball off the paddle. Enjoy playing Block Breaker on your smartphone!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

canvas {
      background-color: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Game variables
    let canvas, canvasContext;
    let paddleX = 0;
    let ballX = 50;
    let ballY = 50;
    let ballSpeedX = 5;
    let ballSpeedY = 5;
    let bricks = [];

// Function to handle mouse movement on the canvas
    function handleMouseMovement(event) {
      let rect = canvas.getBoundingClientRect();
      let mouseX = event.clientX - rect.left;
      paddleX = mouseX - PADDLE_WIDTH / 2;
    }

// Function to initialize the game
    function init() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');

// Create bricks
      for (let column = 0; column < BRICK_COLUMNS; column++) {
        for (let row = 0; row < BRICK_ROWS; row++) {
          bricks.push({ x: column * BRICK_WIDTH, y: row * BRICK_HEIGHT });
        }
      }

// Add event listener for mouse movement
      canvas.addEventListener('mousemove', handleMouseMovement);

// Start the game loop
      setInterval(update, 1000 / 60);
    }

// Function to update the game state
    function update() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Check collision with walls
      if (ballX < 0 || ballX > canvas.width) {
        ballSpeedX *= -1;
      }
      if (ballY < 0 || ballY > canvas.height) {
        ballSpeedY *= -1;
      }

// Check collision with paddle
      if (
        ballY + BALL_RADIUS > canvas.height - PADDLE_HEIGHT &&
        ballX > paddleX &&
        ballX < paddleX + PADDLE_WIDTH
      ) {
        ballSpeedY *= -1;
      }

// Check collision with bricks
      for (let brick of bricks) {
        if (
          ballX + BALL_RADIUS > brick.x &&
          ballX < brick.x + BRICK_WIDTH &&
          ballY + BALL_RADIUS > brick.y &&
          ballY < brick.y + BRICK_HEIGHT
        ) {
          let brickIndex = bricks.indexOf(brick);
          bricks.splice(brickIndex, 1);
          ballSpeedY *= -1;
        }
      }

// Clear canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw paddle
      canvasContext.fillRect(paddleX, canvas.height - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT);

// Draw ball
      canvasContext.beginPath();
      canvasContext.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
      canvasContext.fill();

// Draw bricks
      for (let brick of bricks) {
        canvasContext.fillRect(brick.x, brick.y, BRICK_WIDTH, BRICK_HEIGHT);
      }
    }

// Initialize the game
    init();
  </script>
</body>
</html>
```

Enjoy playing Block Breaker on your smartphone!