AI game creator

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

No:24780

119

←

Prev Next

→

Block Breaker
Developer User7630｜Date and time 23/11/12 3:04:21
Build time 149.421 sec｜Game capacity 4.95KB｜

Script

Sure! Here's an example of a simple block breaker game implemented as a single HTML file using JavaScript and enclosed in script tags:

This implementation creates a simple block breaker game where you control a paddle at the bottom of the screen and bounce a ball to break bricks at the top. You can move the paddle horizontally using the left and right arrow keys. The game ends if the ball reaches the bottom of the screen. If a brick is hit, it disappears. Note that you can add more bricks by copying the `<div class="brick"></div>` line and pasting it inside the `#game` div as needed. Please note that to play the game, you would need to save the code as an HTML file and open it in a web browser on your smartphone or any other device that supports HTML and JavaScript.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's an example of a simple block breaker game implemented as a single HTML file using JavaScript and enclosed in script tags:

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

#paddle {
      position: absolute;
      bottom: 0;
      left: 130px;
      width: 40px;
      height: 10px;
      background-color: #000;
    }

.brick {
      width: 30px;
      height: 15px;
      margin: 5px;
      background-color: #000;
    }

#ball {
      position: absolute;
      top: 100px;
      left: 130px;
      width: 10px;
      height: 10px;
      background-color: #000;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
    
  </div>

// Set initial variables
      var leftPressed = false;
      var rightPressed = false;
      var ballPosition = { x: 130, y: 100 };
      var ballDirection = { x: 1, y: 1 };

// Move the paddle based on user input
      function movePaddle() {
        if (leftPressed && paddle.offsetLeft > 0) {
          paddle.style.left = (paddle.offsetLeft - 5) + "px";
        }

if (rightPressed && paddle.offsetLeft + paddle.offsetWidth < game.offsetWidth) {
          paddle.style.left = (paddle.offsetLeft + 5) + "px";
        }
      }

// Move the ball
      function moveBall() {
        ballPosition.x += ballDirection.x;
        ballPosition.y += ballDirection.y;

// Check for paddle collision
        if (ballPosition.x >= paddle.offsetLeft &&
            ballPosition.x <= paddle.offsetLeft + paddle.offsetWidth &&
            ballPosition.y >= paddle.offsetTop - ball.offsetHeight) {
          ballDirection.y = -ballDirection.y;
        }

// Check for brick collision
        for (var i = 0; i < bricks.length; i++) {
          var brick = bricks[i];
          if (brick.style.display !== "none") {
            if (ballPosition.x >= brick.offsetLeft &&
                ballPosition.x <= brick.offsetLeft + brick.offsetWidth &&
                ballPosition.y + ball.offsetHeight >= brick.offsetTop &&
                ballPosition.y <= brick.offsetTop + brick.offsetHeight) {
              ballDirection.y = -ballDirection.y;
              brick.style.display = "none";
              break;
            }
          }
        }

// Check for wall collision
        if (ballPosition.x <= 0 || ballPosition.x >= game.offsetWidth - ball.offsetWidth) {
          ballDirection.x = -ballDirection.x;
        }
        if (ballPosition.y <= 0) {
          ballDirection.y = -ballDirection.y;
        }

// Check for game over
        if (ballPosition.y >= game.offsetHeight) {
          alert("Game Over!");
          document.location.reload();
        }

// Update ball position
        ball.style.left = ballPosition.x + "px";
        ball.style.top = ballPosition.y + "px";
      }

// Event listeners for paddle movement
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowLeft") {
          leftPressed = true;
        } else if (event.key === "ArrowRight") {
          rightPressed = true;
        }
      });

// Game loop
      function gameLoop() {
        movePaddle();
        moveBall();

// Call the game loop again
        requestAnimationFrame(gameLoop);
      }

// Start the game loop
      gameLoop();
    });
  </script>
</body>
</html>
```

Please note that to play the game, you would need to save the code as an HTML file and open it in a web browser on your smartphone or any other device that supports HTML and JavaScript.