AI game creator

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

No:43212

←

Prev Next

→

Block Breaker
Developer User19144｜Date and time 24/2/14 23:41:23
Build time 18.227 sec｜Game capacity 5.374KB｜

Script

Sure, here's an example of a simple block breaker game implemented as a single HTML file using JavaScript. It is designed to be played on a smartphone and uses pictograms for visuals.

This block breaker game includes a paddle, a ball, and blocks that need to be destroyed by bouncing the ball off the paddle. The player controls the paddle by dragging their finger across the screen on a smartphone. The objective is to destroy all the blocks without letting the ball fall off the screen. If the ball falls off the screen, the game is over and a "Game Over" alert is displayed. You can copy and save this code as an HTML file and open it in a web browser to play the game on a smartphone.

←

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 using JavaScript. It is designed to be played on a smartphone and uses pictograms for visuals.

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

// Set up paddle properties
      const paddleHeight = 20;
      const paddleWidth = 70;
      let paddleX = canvas.width / 2 - paddleWidth / 2;
      const paddleSpeed = 10;

// Set up ball properties
      const ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - paddleHeight - ballRadius - 5;
      let ballDX = 2;
      let ballDY = -2;

// Set up block properties
      const blockRowCount = 3;
      const blockColumnCount = 5;
      const blockWidth = 60;
      const blockHeight = 20;
      const blockPadding = 10;
      const blockOffsetTop = 30;
      const blockOffsetLeft = 30;
      const blocks = [];
      for (let c = 0; c < blockColumnCount; c++) {
        blocks[c] = [];
        for (let r = 0; r < blockRowCount; r++) {
          blocks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }

// Add touch event listeners for paddle movement
      document.addEventListener('touchmove', function (e) {
        const touchX = e.touches[0].clientX;
        if (touchX > 0 && touchX < canvas.width) {
          paddleX = touchX - paddleWidth / 2;
        }
      });

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

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

// Function to draw the blocks
      function drawBlocks() {
        for (let c = 0; c < blockColumnCount; c++) {
          for (let r = 0; r < blockRowCount; r++) {
            if (blocks[c][r].status === 1) {
              const blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
              const blockY = r * (blockHeight + blockPadding) + blockOffsetTop;
              blocks[c][r].x = blockX;
              blocks[c][r].y = blockY;
              ctx.beginPath();
              ctx.rect(blockX, blockY, blockWidth, blockHeight);
              ctx.fillStyle = '#000000';
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

// Function to detect collision between ball and blocks
      function collisionDetection() {
        for (let c = 0; c < blockColumnCount; c++) {
          for (let r = 0; r < blockRowCount; r++) {
            const block = blocks[c][r];
            if (block.status === 1) {
              if (
                ballX > block.x &&
                ballX < block.x + blockWidth &&
                ballY > block.y &&
                ballY < block.y + blockHeight
              ) {
                ballDY = -ballDY;
                block.status = 0;
              }
            }
          }
        }
      }

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

// Draw game components
        drawBlocks();
        drawPaddle();
        drawBall();

// Handle ball movement and collision
        if (
          ballX + ballDX > canvas.width - ballRadius ||
          ballX + ballDX < ballRadius
        ) {
          ballDX = -ballDX;
        }
        if (ballY + ballDY < ballRadius) {
          ballDY = -ballDY;
        } else if (
          ballY + ballDY > canvas.height - paddleHeight - ballRadius
        ) {
          if (
            ballX > paddleX &&
            ballX < paddleX + paddleWidth &&
            ballY + ballDY > canvas.height - paddleHeight - ballRadius
          ) {
            ballDY = -ballDY;
          } else {
            // Game over
            alert('Game Over');
            document.location.reload();
          }
        }

// Update ball position
        ballX += ballDX;
        ballY += ballDY;

// Detect collision between ball and blocks
        collisionDetection();

// Schedule next frame update
        requestAnimationFrame(update);
      }

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

You can copy and save this code as an HTML file and open it in a web browser to play the game on a smartphone.