AI game creator

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

No:18343

←

Prev Next

→

Block Breaker
Developer User6337｜Date and time 23/9/28 10:39:16
Build time 53.023 sec｜Game capacity 5.574KB｜

Script

Sure! Here's a simple implementation of a block breaker game using JavaScript, HTML, and pictograms:

To play the game, simply open the HTML file in a web browser on your smartphone or desktop. The game involves moving the paddle left and right to bounce the ball and break all the bricks. You win by breaking all the bricks, and the game is over if the ball falls below the paddle and you run out of lives. Please note that this is a basic implementation and can be further enhanced with additional features and visuals.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a block breaker game using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Breaker</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      // Variables
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const paddleWidth = 80;
      const paddleHeight = 10;
      const ballRadius = 6;
      const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      let bricks = [];
      let paddleX = (canvas.width - paddleWidth) / 2;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballDeltaX = 2;
      let ballDeltaY = -2;
      let score = 0;
      let lives = 3;

// Create bricks
      for(let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for(let r = 0; r < brickRowCount; r++) {
          bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }

// Event listener for keyboard arrow keys on smartphones
      document.addEventListener("keydown", movePaddle);
      document.addEventListener("touchmove", touchMovePaddle);

// Move paddle using arrow keys
      function movePaddle(e) {
        if(e.key === "ArrowLeft" && paddleX > 0) {
          paddleX -= 10;
        } else if(e.key === "ArrowRight" && paddleX < canvas.width - paddleWidth) {
          paddleX += 10;
        }
      }

// Move paddle using touch events on smartphones
      function touchMovePaddle(e) {
        paddleX = e.touches[0].clientX - paddleWidth / 2;
        e.preventDefault();
      }

// Collision detection
      function collisionDetection() {
        for(let c = 0; c < brickColumnCount; c++) {
          for(let r = 0; r < brickRowCount; r++) {
            let brick = bricks[c][r];
            if(brick.status === 1) {
              if(ballX > brick.x && ballX < brick.x + brickWidth && ballY > brick.y && ballY < brick.y + brickHeight) {
                ballDeltaY = -ballDeltaY;
                brick.status = 0;
                score++;
                if(score === brickRowCount * brickColumnCount) {
                  alert("Congratulations! You won!");
                  document.location.reload();
                }
              }
            }
          }
        }
      }

// Draw the paddle
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      }

// Draw the ball
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      }

// 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) {
              let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
              let 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 = "black";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }

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

// Ball movement
        ballX += ballDeltaX;
        ballY += ballDeltaY;

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

requestAnimationFrame(update);
      }

update();
    </script>
  </body>
</html>
```

Please note that this is a basic implementation and can be further enhanced with additional features and visuals.