AI game creator

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

No:18018

←

Prev Next

→

Block Breaker
Developer User7892｜Date and time 23/9/26 2:28:48
Build time 46.678 sec｜Game capacity 4.832KB｜

Script

Sure, here's a simple implementation of the classic game "Block Breaker" as a single HTML file, using JavaScript and enclosed in script tags:

This code sets up a canvas, initializes the game elements (paddle, ball, and blocks), handles paddle movement, collision detection, and includes a main game loop to continuously update and render the game state.

←

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" as a single HTML file, using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameCanvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set initial position and size of paddle
    let paddleX = canvas.width / 2;
    const paddleHeight = 10;
    const paddleWidth = 75;

// Set initial position, size, and movement of ball
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballRadius = 10;
    let ballDX = 3;
    let ballDY = -3;

// Set initial properties of blocks
    const blockRowCount = 3;
    const blockColumnCount = 5;
    const blockWidth = 75;
    const blockHeight = 20;
    const blockPadding = 10;
    const blockOffsetTop = 30;
    const blockOffsetLeft = 30;

// Create blocks
    let blocks = [];
    for (let c = 0; c < blockColumnCount; c++) {
      blocks[c] = [];
      for (let r = 0; r < blockRowCount; r++) {
        blocks[c][r] = { x: 0, y: 0 };
      }
    }

// Set initial score and game status
    let score = 0;
    let isGameOver = false;

// Add event listener for paddle movement
    document.addEventListener("mousemove", paddleMove, false);

// Move paddle based on mouse position
    function paddleMove(e) {
      const relativeX = e.clientX - canvas.offsetLeft;
      if (relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth / 2;
      }
    }

// Check for collision between ball and blocks
    function collisionDetection() {
      for (let c = 0; c < blockColumnCount; c++) {
        for (let r = 0; r < blockRowCount; r++) {
          const block = blocks[c][r];
          if (block.status === 1) {
            if (
              ballX > block.x &&
              ballX < block.x + blockWidth &&
              ballY > block.y &&
              ballY < block.y + blockHeight
            ) {
              ballDY = -ballDY;
              block.status = 0;
              score++;
              if (score === blockRowCount * blockColumnCount) {
                isGameOver = true;
              }
            }
          }
        }
      }
    }

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

// Draw paddle on canvas
    function drawPaddle() {
      context.beginPath();
      context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
    }

// Draw blocks on canvas
    function drawBlocks() {
      for (let c = 0; c < blockColumnCount; c++) {
        for (let r = 0; r < blockRowCount; r++) {
          if (blocks[c][r].status === 1) {
            const blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
            const 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 = "#0095DD";
            context.fill();
            context.closePath();
          }
        }
      }
    }

// Draw score on canvas
    function drawScore() {
      context.font = "16px Arial";
      context.fillStyle = "#0095DD";
      context.fillText("Score: " + score, 8, 20);
    }

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

// Reverse ball direction if hits wall or paddle
      if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
        ballDX = -ballDX;
      }
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      } else if (ballY + ballDY > canvas.height - ballRadius) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballDY = -ballDY;
        } else {
          isGameOver = true;
        }
      }

// Move paddle based on keyboard input

paddleX += 2;
      requestAnimationFrame(draw);
    }

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