Block Breaker's game | AI game creator

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

No:31870

69

Block Breaker
Developer User15256｜Date and time 23/12/28 18:45:15
Build time 34.003 sec｜Game capacity 3.358KB｜

Sure, here's a simple implementation of a Block Breaker game using HTML, CSS, and JavaScript, enclosed in `` tags: <br><br> <br> <style> #play-area { position: relative; width: 300px; height: 400px; border: 1px solid black; margin: 0 auto; } #paddle { position: absolute; bottom: 10px; width: 80px; height: 10px; background-color: black; } .block { position: absolute; width: 50px; height: 20px; background-color: red; } #ball { position: absolute; top: 200px; left: 140px; width: 20px; height: 20px; background-color: blue; border-radius: 50%; } </style> <div id="play-area"> <div id="paddle"></div> <div id="ball"></div> <div class="block" style="top: 50px; left: 100px;"></div> <div class="block" style="top: 80px; left: 100px;"></div> <div class="block" style="top: 110px; left: 100px;"></div>  </div>

This code creates a simple block breaker game where the player controls a paddle at the bottom of the screen to bounce a ball off the walls, paddle, and blocks. The goal is to break all the blocks by hitting them with the ball.

→ 　

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 a Block Breaker game using HTML, CSS, and JavaScript, enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Block Breaker Game</title>
  <style>
    #play-area {
      position: relative;
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin: 0 auto;
    }

#paddle {
      position: absolute;
      bottom: 10px;
      width: 80px;
      height: 10px;
      background-color: black;
    }

.block {
      position: absolute;
      width: 50px;
      height: 20px;
      background-color: red;
    }

#ball {
      position: absolute;
      top: 200px;
      left: 140px;
      width: 20px;
      height: 20px;
      background-color: blue;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="play-area">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="block" style="top: 50px; left: 100px;"></div>
    <div class="block" style="top: 80px; left: 100px;"></div>
    <div class="block" style="top: 110px; left: 100px;"></div>
    
  </div>

<script>
    // Game logic goes here
    const paddle = document.getElementById("paddle");
    const ball = document.getElementById("ball");
    const blocks = document.getElementsByClassName("block");

let xDirection = 1;
    let yDirection = 1;

function movePaddle(event) {
      const playAreaRect = document.getElementById("play-area").getBoundingClientRect();
      const paddleWidth = paddle.offsetWidth;
      const mouseX = event.clientX;

paddle.style.left = mouseX - playAreaRect.left - paddleWidth / 2 + "px";
    }

function moveBall() {
      const ballRect = ball.getBoundingClientRect();
      const playAreaRect = document.getElementById("play-area").getBoundingClientRect();
      const paddleRect = paddle.getBoundingClientRect();

// Check collision with walls
      if (ballRect.top <= playAreaRect.top || ballRect.bottom >= playAreaRect.bottom) {
        yDirection *= -1;
      }
      if (ballRect.left <= playAreaRect.left || ballRect.right >= playAreaRect.right) {
        xDirection *= -1;
      }

// Check collision with paddle
      if (
        ballRect.bottom >= paddleRect.top &&
        ballRect.left >= paddleRect.left &&
        ballRect.right <= paddleRect.right
      ) {
        yDirection *= -1;
      }

// Check collision with blocks
      for (let i = 0; i < blocks.length; i++) {
        const blockRect = blocks[i].getBoundingClientRect();

if (
          ballRect.bottom >= blockRect.top &&
          ballRect.top <= blockRect.bottom &&
          ballRect.left >= blockRect.left &&
          ballRect.right <= blockRect.right
        ) {
          yDirection *= -1;
          blocks[i].remove();
        }
      }

// Update ball position
      ball.style.top = ballRect.top + 1 * yDirection + "px";
      ball.style.left = ballRect.left + 3 * xDirection + "px";

requestAnimationFrame(moveBall);
    }

document.addEventListener("mousemove", movePaddle);
    moveBall();
  </script>
</body>
</html>
```

This code creates a simple block breaker game where the player controls a paddle at the bottom of the screen to bounce a ball off the walls, paddle, and blocks. The goal is to break all the blocks by hitting them with the ball.