AI game creator

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

No:32110

←

Prev Next

→

Block Breaker
Developer User15358｜Date and time 23/12/30 2:47:37
Build time 44.666 sec｜Game capacity 5.642KB｜

Script

Sure! Here's an example of a simple Block Breaker game implemented in a single HTML file using JavaScript and enclosed in script tags. This game can be played on a smartphone and utilizes pictograms for a visual interface.

To play the game, you can copy the entire code into a file with a `.html` extension, save it, and open it in a web browser on your smartphone or any device. The game will start automatically, and you can control the paddle using the left and right arrow keys or touch controls on your smartphone screen. The objective of the game is to break all the bricks using the ball bouncing off the paddle.

←

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 Game</title>
  <style>
     body {
        margin: 0;
        text-align: center;
        overflow: hidden;
        background-color: #f2f2f2;
     }

canvas {
        background: #fff;
        display: block;
        margin: 0 auto;
     }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="500"></canvas>

// Set up the paddle
    var paddleWidth = 80;
    var paddleHeight = 10;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var paddleSpeed = 7;
    var leftPressed = false;
    var rightPressed = false;

// Set up the ball
    var ballRadius = 10;
    var ballX = canvas.width / 2;
    var ballY = canvas.height - paddleHeight - ballRadius;
    var ballSpeedX = 3;
    var ballSpeedY = -3;

// Set up the bricks
    var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;

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

// Add event listeners to control paddle movement
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

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

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

// Function to detect collision between the ball and bricks
    function collisionDetection() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          var brick = bricks[c][r];
          if (brick.status === 1) {
            if (
              ballX > brick.x &&
              ballX < brick.x + brickWidth &&
              ballY > brick.y &&
              ballY < brick.y + brickHeight
            ) {
              ballSpeedY = -ballSpeedY;
              brick.status = 0;
            }
          }
        }
      }
    }

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

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

// Function to draw the bricks
    function drawBricks() {
      for (var c = 0; c < brickColumnCount; c++) {
        for (var r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            context.beginPath();
            context.rect(brickX, brickY, brickWidth, brickHeight);
            context.fillStyle = "#000000";
            context.fill();
            context.closePath();
          }
        }
      }
    }

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

// Move the paddle
      if (leftPressed && paddleX > 0) {
        paddleX -= paddleSpeed;
      } else if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += paddleSpeed;
      }

// Move the ball
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Detect collision with walls
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY - ballRadius < 0) {
        ballSpeedY = -ballSpeedY;
      }
      // Detect collision with paddle
      if (
        ballY + ballRadius > canvas.height - paddleHeight &&
        ballX > paddleX &&
        ballX < paddleX + paddleWidth
      ) {
        ballSpeedY = -ballSpeedY;
      }
      // Game over condition
      if (ballY + ballRadius > canvas.height) {
        alert("Game Over");
        document.location.reload();
      }

requestAnimationFrame(update);
    }

// Start the game
    update();

</script>
</body>
</html>
```