AI game creator

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

No:18145

←

Prev Next

→

Block Breaker
Developer anonymous｜Date and time 23/9/27 15:34:25
Build time unknown sec｜Game capacity 6.392KB｜

Script

Sure, here's a simple block breaker game implemented as a single HTML file using JavaScript. The game can be played on a smartphone and includes pictograms for visual representation. Please note that this is a basic implementation and can be enhanced further.

To play the game, you can copy the above code into an HTML file, save it with a .html extension, and open it in a web browser on your smartphone. The game will start automatically. Use finger swipes or arrow keys to move the paddle and prevent the ball from falling off the screen. Your goal is to break all the green blocks by hitting them with the ball. If the ball falls off the bottom of the screen, the game will be over. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameCanvas {
      border: 1px solid black;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Initialize paddle and ball positions
      var paddleX = canvas.width / 2;
      var ballX = canvas.width / 2;
      var ballY = canvas.height - 30;
      var ballSpeedX = 2;
      var ballSpeedY = -2;

// Initialize block positions
      var blockRowCount = 4;
      var blockColumnCount = 5;
      var blockWidth = 60;
      var blockHeight = 20;
      var blockPadding = 10;
      var blockOffsetTop = 30;
      var blockOffsetLeft = 30;
      var blocks = [];
      for (var c = 0; c < blockColumnCount; c++) {
        blocks[c] = [];
        for (var r = 0; r < blockRowCount; r++) {
          blocks[c][r] = {
            x: 0,
            y: 0,
            status: 1
          };
        }
      }

// Initialize paddle controls
      var rightPressed = false;
      var leftPressed = false;

// Event listeners for paddle controls
      document.addEventListener("touchstart", touchStartHandler);
      document.addEventListener("touchmove", touchMoveHandler);
      document.addEventListener("touchend", touchEndHandler);
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

// Touch start event handler
      function touchStartHandler(e) {
        var touch = e.touches[0];
        var touchX = touch.clientX - canvas.offsetLeft;
        if (touchX > canvas.width/2) {
          rightPressed = true;
        } else {
          leftPressed = true;
        }
      }

// Touch move event handler
      function touchMoveHandler(e) {
        e.preventDefault();
        var touch = e.touches[0];
        if (touch.clientX < canvas.offsetLeft + canvas.width/2) {
          paddleX = touch.clientX - canvas.offsetLeft;
        }
      }

// Touch end event handler
      function touchEndHandler(e) {
        rightPressed = false;
        leftPressed = false;
      }

// Key down event handler
      function keyDownHandler(e) {
        if (e.key === "Right" || e.key === "ArrowRight") {
          rightPressed = true;
        }
        else if (e.key === "Left" || e.key === "ArrowLeft") {
          leftPressed = true;
        }
      }

// Key up event handler
      function keyUpHandler(e) {
        if (e.key === "Right" || e.key === "ArrowRight") {
          rightPressed = false;
        }
        else if (e.key === "Left" || e.key === "ArrowLeft") {
          leftPressed = false;
        }
      }

// Collision detection function
      function collisionDetection() {
        for (var c = 0; c < blockColumnCount; c++) {
          for (var r = 0; r < blockRowCount; r++) {
            var b = blocks[c][r];
            if (b.status === 1) {
              if (ballX > b.x && ballX < b.x + blockWidth && ballY > b.y && ballY < b.y + blockHeight) {
                ballSpeedY = -ballSpeedY;
                b.status = 0;
              }
            }
          }
        }
      }

// Draw the ball on the canvas
      function drawBall() {
        context.beginPath();
        context.arc(ballX, ballY, 10, 0, Math.PI * 2);
        context.fillStyle = "purple";
        context.fill();
        context.closePath();
      }

// Draw the paddle on the canvas
      function drawPaddle() {
        context.beginPath();
        context.rect(paddleX, canvas.height - 20, 80, 10);
        context.fillStyle = "blue";
        context.fill();
        context.closePath();
      }

// Draw the blocks on the canvas
      function drawBlocks() {
        for (var c = 0; c < blockColumnCount; c++) {
          for (var r = 0; r < blockRowCount; r++) {
            if (blocks[c][r].status === 1) {
              var blockX = (c * (blockWidth + blockPadding)) + blockOffsetLeft;
              var blockY = (r * (blockHeight + blockPadding)) + blockOffsetTop;
              blocks[c][r].x = blockX;
              blocks[c][r].y = blockY;
              context.beginPath();
              context.rect(blockX, blockY, blockWidth, blockHeight);
              context.fillStyle = "green";
              context.fill();
              context.closePath();
            }
          }
        }
      }

// Draw the game
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBlocks();
        drawBall();
        drawPaddle();
        collisionDetection();

// Ball movement logic
        if (ballX + ballSpeedX < 10 || ballX + ballSpeedX > canvas.width - 10) {
          ballSpeedX = -ballSpeedX;
        }
        if (ballY + ballSpeedY < 10) {
          ballSpeedY = -ballSpeedY;
        }
        else if (ballY + ballSpeedY > canvas.height - 20) {
          if (ballX > paddleX && ballX < paddleX + 80) {
            ballSpeedY = -ballSpeedY;
          }
          else {
            alert("GAME OVER");
            document.location.reload();
          }
        }
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// Paddle movement logic
        if (rightPressed && paddleX < canvas.width - 80) {
          paddleX += 7;
        }
        else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }

requestAnimationFrame(draw);
      }

draw();
    };
  </script>
</body>
</html>
```