AI game creator

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

No:25053

←

Prev Next

→

Block Breaker
Developer User12143｜Date and time 23/11/16 20:22:47
Build time 135.084 sec｜Game capacity 5.942KB｜

Script

Sure, here's an example of a simple Block Breaker game implemented as a single HTML file with JavaScript code:

// Enclose the JavaScript code within

To play the game, you can copy and paste the above code into a text editor and save it as a `.html` file. Then, open the file in a web browser (preferably on a smartphone for a better experience). The game should start automatically, and you can use the left and right arrow keys or on-screen buttons to control the paddle and hit the ball to break the bricks. Note: The game uses a basic alert for displaying game over and winning messages. You can customize the appearance and behavior of the game by modifying the HTML, CSS, and JavaScript code as per your preferences and requirements.

←

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 with JavaScript code:

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Breaker</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Enclose the JavaScript code within <script> tags
    (function () {
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Create the paddle
      const paddleWidth = 80;
      const paddleHeight = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;
      
      // Create the ball
      const ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballSpeedX = 2;
      let ballSpeedY = -2;

// Create the bricks
      const brickRowCount = 4;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      const bricks = [];
      for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
          bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }

// Create the score counter
      let score = 0;

// Track the user's input
      let rightPressed = false;
      let leftPressed = false;

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

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

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

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

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

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

ballX += ballSpeedX;
        ballY += ballSpeedY;

requestAnimationFrame(draw);
      }

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

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

document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

draw();
    })();
  </script>
</body>

</html>
```

To play the game, you can copy and paste the above code into a text editor and save it as a `.html` file. Then, open the file in a web browser (preferably on a smartphone for a better experience). The game should start automatically, and you can use the left and right arrow keys or on-screen buttons to control the paddle and hit the ball to break the bricks.

Note: The game uses a basic alert for displaying game over and winning messages. You can customize the appearance and behavior of the game by modifying the HTML, CSS, and JavaScript code as per your preferences and requirements.