AI game creator

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

No:17813

149

←

Prev Next

→

Block Breaker
Developer User7431｜Date and time 23/9/24 18:28:35
Build time 72.804 sec｜Game capacity 6KB｜

Script

Sure! Here's a simple implementation of a block breaker game using HTML and JavaScript, enclosed in script tags within a single HTML file:

This code will create a block breaker game that can be played on a smartphone. The game is rendered on a canvas element and uses pictograms (black rectangles) for the bricks and game objects. The paddle can be controlled by touching and dragging on the screen, and the ball will bounce off the paddle and bricks. The objective is to break all the bricks using the ball without letting it fall off the bottom of the canvas. The game keeps track of the score and lives, and displays a Game Over or Congratulations message accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple implementation of a block breaker game using HTML and JavaScript, enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Block Breaker</title>
  <style>
    #gameCanvas {
      position: relative;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="gameCanvas" style="width: 300px; height: 400px;">
    <canvas id="canvas" width="300" height="400"></canvas>
  </div>

const ball = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      radius: 10,
      dx: 2,
      dy: -2
    };

const paddle = {
      width: 75,
      height: 10,
      x: (canvas.width - 75) / 2,
      dx: 5
    };

const brickRowCount = 3;
    const brickColumnCount = 5;
    const brickWidth = 70;
    const brickHeight = 20;
    const brickPadding = 10;
    const brickOffsetTop = 30;
    const brickOffsetLeft = 30;

let score = 0;
    let lives = 3;

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

let rightPressed = false;
    let leftPressed = false;

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;
      }
    }

// Game logic and rendering
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }

function drawPaddle() {
      ctx.beginPath();
      ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }

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

function drawLives() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
    }

function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw game objects
      drawBall();
      drawPaddle();
      drawBricks();
      drawScore();
      drawLives();

// Move paddle
      if (rightPressed && paddle.x < canvas.width - paddle.width) {
        paddle.x += paddle.dx;
      } else if (leftPressed && paddle.x > 0) {
        paddle.x -= paddle.dx;
      }

// Move ball and detect collisions
      ball.x += ball.dx;
      ball.y += ball.dy;

if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
        ball.dx = -ball.dx;
      }

if (ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;
      } else if (ball.y + ball.radius > canvas.height - paddle.height) {
        if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
          ball.dy = -ball.dy;
        } else {
          lives--;
          if (!lives) {
            alert("Game Over! Try again.");
            document.location.reload();
          } else {
            ball.x = canvas.width / 2;
            ball.y = canvas.height - 30;
            ball.dx = 2;
            ball.dy = -2;
            paddle.x = (canvas.width - paddle.width) / 2;
          }
        }
      }

collisionDetection();

// Request next frame
      requestAnimationFrame(draw);
    }

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