AI game creator

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

No:40058

←

Prev Next

→

Block Breaker
Developer User17956｜Date and time 24/1/31 21:52:58
Build time 27.257 sec｜Game capacity 5.799KB｜

Script

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

To play the game, save this code as an HTML file and open it in a web browser (preferably on a smartphone for a mobile experience). The game will start automatically, and you can control the paddle using the left and right arrow keys or the corresponding arrow buttons on a smartphone. The objective of the game is to break all the bricks with the ball by bouncing it off the paddle. You earn points for each brick you break, and the game ends if the ball falls beyond the paddle. Enjoy playing Block Breaker!

←

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 HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Block Breaker</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

canvas {
        display: block;
        margin: 20px auto;
        background: #eee;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Paddle variables
      const paddleWidth = 75;
      const paddleHeight = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;
      let rightPressed = false;
      let leftPressed = false;

// Ball variables
      let ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let dx = 2;
      let dy = -2;

// Brick variables
      const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;

// Game score
      let score = 0;

// Event listeners for paddle movement
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

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

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

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

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

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

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        drawScore();
        collisionDetection();

// Ball movement
        ballX += dx;
        ballY += dy;

if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
          dx = -dx;
        }
        if (ballY + dy < ballRadius) {
          dy = -dy;
        } else if (ballY + dy > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            dy = -dy;
          } else {
            alert("Game Over");
            document.location.reload();
          }
        }

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

requestAnimationFrame(draw);
      }

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

The objective of the game is to break all the bricks with the ball by bouncing it off the paddle. You earn points for each brick you break, and the game ends if the ball falls beyond the paddle.

Enjoy playing Block Breaker!