Block Breaker's game | AI game creator

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

No:35495

68

Block Breaker
Developer User16303｜Date and time 24/1/14 17:40:47
Build time 16.19 sec｜Game capacity 4.269KB｜

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

To play the game, simply save the above code as an HTML file (e.g., `blockbreaker.html`) and open it in a web browser. You can control the paddle using the left and right arrow keys on your keyboard. The objective is to bounce the ball off the paddle to destroy all the blocks. If the ball hits the bottom of the game container, the game is over. If you destroy all the blocks, you win the game. Enjoy!

→ 　

0　

0　

　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

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>
    #game-container {
      width: 400px;
      height: 300px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }
    #paddle {
      width: 80px;
      height: 10px;
      background-color: #333;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .block {
      width: 50px;
      height: 20px;
      background-color: #FF5733;
      position: absolute;
      top: 50px;
      left: 50px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    #ball {
      width: 15px;
      height: 15px;
      background-color: #FFF;
      position: absolute;     
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="block"></div>
    
  </div>

<script>
    // Initialize game variables
    var container = document.getElementById("game-container");
    var paddle = document.getElementById("paddle");
    var ball = document.getElementById("ball");
    var blocks = document.getElementsByClassName("block");
    var gameLoop;
  
    // Paddle variables
    var paddleX = container.offsetWidth / 2;
    var paddleSpeed = 10;
  
    // Ball variables
    var ballX = paddleX;
    var ballY = container.offsetHeight - 30;
    var ballSpeedX = 3;
    var ballSpeedY = -3;
  
    // Start game loop
    function startGame() {
      gameLoop = setInterval(updateGame, 20);
    }
  
    // Update game state
    function updateGame() {
      movePaddle();
      moveBall();
      checkCollision();
      checkWin();
    }
  
    // Move the paddle based on user input
    function movePaddle() {
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowLeft" && paddleX > 0) {
          paddleX -= paddleSpeed;
        }
        if (event.key === "ArrowRight" && paddleX < container.offsetWidth - paddle.offsetWidth) {
          paddleX += paddleSpeed;
        }
        paddle.style.left = paddleX + "px";
      });
    }
  
    // Move the ball and handle collisions
    function moveBall() {
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      ball.style.left = ballX + "px";
      ball.style.top = ballY + "px";
  
      if (ballX <= 0 || ballX >= container.offsetWidth - ball.offsetWidth) {
        ballSpeedX *= -1;
      }
  
      if (ballY <= 0) {
        ballSpeedY *= -1;
      }
  
      if (ballY >= container.offsetHeight - ball.offsetHeight) {
        // Game over condition (ball hits bottom of container)
        clearInterval(gameLoop);
        alert("Game Over!");
      }
    }
  
    // Check collision between ball and paddle/blocks
    function checkCollision() {
      // Check collision with paddle
      if (ballY + ball.offsetHeight >= paddle.offsetTop &&
          ballX + ball.offsetWidth >= paddle.offsetLeft &&
          ballX <= paddle.offsetLeft + paddle.offsetWidth) {
        ballSpeedY *= -1;
      }
  
      // Check collision with blocks
      for (var i = 0; i < blocks.length; i++) {
        if (ballY + ball.offsetHeight >= blocks[i].offsetTop &&
            ballX + ball.offsetWidth >= blocks[i].offsetLeft &&
            ballX <= blocks[i].offsetLeft + blocks[i].offsetWidth) {
          ballSpeedY *= -1;
          blocks[i].remove();
        }
      }
    }
  
    // Check if all blocks are destroyed (win condition)
    function checkWin() {
      if (blocks.length === 0) {
        clearInterval(gameLoop);
        alert("Congratulations! You Win!");
      }
    }
  
    // Start the game
    startGame();
  </script>
</body>
</html>
```

To play the game, simply save the above code as an HTML file (e.g., `blockbreaker.html`) and open it in a web browser. You can control the paddle using the left and right arrow keys on your keyboard. The objective is to bounce the ball off the paddle to destroy all the blocks. If the ball hits the bottom of the game container, the game is over. If you destroy all the blocks, you win the game. Enjoy!