AI game creator

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

No:43154

←

Prev Next

→

Block Breaker
Developer User19108｜Date and time 24/2/14 13:49:17
Build time 15.5 sec｜Game capacity 5.167KB｜

Script

Sure! Here's an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

This code sets up a simple block breaker game using JavaScript and HTML canvas. The player can control the paddle using touch input on a smartphone. The objective is to bounce the ball off the paddle to destroy all the bricks. The game ends if the ball falls below the paddle.

←

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:

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

// Event listeners to control the paddle on touch devices
      canvas.addEventListener("touchmove", handleTouchMove, false);

function handleTouchMove(e) {
        const relativeX = e.touches[0].clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
          paddle.x = relativeX - paddle.width / 2;
        }
      }

// Function to draw the ball
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#fff";
        ctx.fill();
        ctx.closePath();
      }

// Function to draw the paddle
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
        ctx.fillStyle = "#fff";
        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 = "#fff";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

// Function to detect collision with 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 (
                ball.x > b.x &&
                ball.x < b.x + brickWidth &&
                ball.y > b.y &&
                ball.y < b.y + brickHeight
              ) {
                ball.dy = -ball.dy;
                b.status = 0;
                score++;

// Check if all bricks have been destroyed
                if (score === brickRowCount * brickColumnCount) {
                  alert("Congratulations! You won!");
                  document.location.reload();
                }
              }
            }
          }
        }
      }

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

// Update ball position
        ball.x += ball.dx;
        ball.y += ball.dy;

// Handle ball collisions with walls
        if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
          ball.dx = -ball.dx;
        }

if (ball.y + ball.dy < ball.radius) {
          ball.dy = -ball.dy;
        } else if (
          ball.y + ball.dy > canvas.height - ball.radius - paddle.height &&
          ball.x > paddle.x &&
          ball.x < paddle.x + paddle.width
        ) { // Handle ball collision with paddle
          ball.dy = -ball.dy;
        } else if (ball.y + ball.dy > canvas.height - ball.radius) { // Game over
          alert("Game Over");
          document.location.reload();
        }

// Update paddle position
        paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, paddle.x));

requestAnimationFrame(update);
      }

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