AI game creator

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

No:11204

←

Prev Next

→

Block Breaker
Developer User4843｜Date and time 23/8/8 13:46:52
Build time 38.671 sec｜Game capacity 5.202KB｜

Script

Sure! Here's a simple implementation of the classic game "Block Breaker" using JavaScript and HTML:

This implementation creates a canvas where the game is rendered. The player controls a paddle at the bottom of the screen using arrow keys on a smartphone. The objective is to bounce a ball off the paddle and destroy all the bricks at the top of the screen. I've used simple rectangular shapes to represent the paddle and bricks. Feel free to customize the graphics using pictograms or additional styling to make it more visually appealing.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's a simple implementation of the classic game "Block Breaker" using JavaScript and HTML:

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

// Initialize the game
    function gameInit() {
      canvas = document.getElementById("gameCanvas");
      canvasContext = canvas.getContext("2d");

// Create 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 };
        }
      }

// Listen for keyboard events
      document.addEventListener("keydown", handleKeyDown);
      document.addEventListener("keyup", handleKeyUp);

// Game loop
      setInterval(gameLoop, 10);
    }

// Update game objects and handle collisions
    function gameLoop() {
      movePaddle();
      moveBall();
      drawGame();
    }

// Move the paddle based on keyboard input
    function movePaddle() {
      if (paddleMoveLeft && paddleX > 0) {
        paddleX -= 7;
      }
      if (paddleMoveRight && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      }
    }

// Move the ball and handle collisions
    function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Collisions with walls
      if (ballX < 0 || ballX > canvas.width) {
        ballSpeedX *= -1;
      }
      if (ballY < 0) {
        ballSpeedY *= -1;
      }
      if (ballY > canvas.height) {
        alert("Game Over");
        document.location.reload();
      }

// Collisions with paddle
      if (
        ballY > canvas.height - paddleHeight &&
        ballX > paddleX &&
        ballX < paddleX + paddleWidth
      ) {
        ballSpeedY *= -1;
      }

// Collisions with bricks
      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 *= -1;
              brick.status = 0;
            }
          }
        }
      }
    }

// Draw game objects on canvas
    function drawGame() {
      // Clear canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw ball
      canvasContext.beginPath();
      canvasContext.arc(ballX, ballY, 10, 0, Math.PI * 2);
      canvasContext.fillStyle = "#0095DD";
      canvasContext.fill();
      canvasContext.closePath();

// Draw paddle
      canvasContext.beginPath();
      canvasContext.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      canvasContext.fillStyle = "#0095DD";
      canvasContext.fill();
      canvasContext.closePath();

// Draw bricks
      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;
            canvasContext.beginPath();
            canvasContext.rect(brickX, brickY, brickWidth, brickHeight);
            canvasContext.fillStyle = "#0095DD";
            canvasContext.fill();
            canvasContext.closePath();
          }
        }
      }
    }

// Handle keyboard key down events
    function handleKeyDown(event) {
      if (event.key === "ArrowLeft") {
        paddleMoveLeft = true;
      } else if (event.key === "ArrowRight") {
        paddleMoveRight = true;
      }
    }

// Handle keyboard key up events
    function handleKeyUp(event) {
      if (event.key === "ArrowLeft") {
        paddleMoveLeft = false;
      } else if (event.key === "ArrowRight") {
        paddleMoveRight = false;
      }
    }

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

I've used simple rectangular shapes to represent the paddle and bricks. Feel free to customize the graphics using pictograms or additional styling to make it more visually appealing.