AI game creator

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

No:35663

←

Prev Next

→

Block Breaker
Developer User16602｜Date and time 24/1/15 1:43:46
Build time 25.153 sec｜Game capacity 7.289KB｜

Script

Sure, I can help you create a simple Block Breaker game using HTML, JavaScript, and pictograms. Here's an example implementation:

This implementation uses basic shapes instead of pictograms for better compatibility across devices. The game displays a paddle, a ball, and bricks that the player must break by deflecting the ball with the paddle. The player loses a life if the ball touches the bottom wall, and the game ends when all lives are lost. The game keeps track of the score and displays it on the canvas. You can copy the above code into an HTML file and open it in your browser to play the Block Breaker game. The paddle can be controlled using the left and right arrow keys (or the corresponding keys on a smartphone keyboard).

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, I can help you create a simple Block Breaker game using HTML, JavaScript, and pictograms. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #gameCanvas {
        display: block;
        margin: 0 auto;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

// Game variables:
      let canvas;
      let ctx;
      let paddle;
      let ball;
      let bricks = [];
      let score = 0;
      let lives = 3;

// Paddle properties:
      const paddleWidth = 75;
      const paddleHeight = 10;
      const paddleSpeed = 7;

// Ball properties:
      const ballRadius = 10;
      let ballSpeedX = 3;
      let ballSpeedY = -3;

// Brick properties:
      const brickRowCount = 5;
      const brickColumnCount = 8;
      const brickWidth = 40;
      const brickHeight = 20;
      const brickPadding = 5;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;

// Keyboard controls:
      let rightPressed = false;
      let leftPressed = false;

// Event listeners for keyboard input:
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

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

function initGame() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

paddle = {
          x: (canvas.width - paddleWidth) / 2,
          y: canvas.height - paddleHeight,
          width: paddleWidth,
          height: paddleHeight
        };

ball = {
          x: canvas.width / 2,
          y: canvas.height - paddleHeight - ballRadius,
          radius: ballRadius,
          speedX: ballSpeedX,
          speedY: ballSpeedY
        };

// Create bricks
        for (let column = 0; column < brickColumnCount; column++) {
          for (let row = 0; row < brickRowCount; row++) {
            const brickX =
              column * (brickWidth + brickPadding) + brickOffsetLeft;
            const brickY =
              row * (brickHeight + brickPadding) + brickOffsetTop;
            bricks.push({ x: brickX, y: brickY, status: 1 });
          }
        }

// Start the game loop
        setInterval(update, 10);
      }

function drawPaddle() {
        ctx.beginPath();
        ctx.font = "20px sans-serif";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(paddleImg, paddle.x, paddle.y + paddle.height);
        ctx.closePath();
      }

function drawBall() {
        ctx.beginPath();
        ctx.font = "20px sans-serif";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(ballImg, ball.x - ball.radius / 2, ball.y + ball.radius);
        ctx.closePath();
      }

function drawScore() {
        ctx.beginPath();
        ctx.font = "16px sans-serif";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText("Score: " + score, 8, 20);
        ctx.closePath();
      }

function drawLives() {
        ctx.beginPath();
        ctx.font = "16px sans-serif";
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
        ctx.closePath();
      }

function collisionDetection() {
        for (let i = 0; i < bricks.length; i++) {
          const brick = bricks[i];
          if (brick.status === 1) {
            if (
              ball.x > brick.x &&
              ball.x < brick.x + brickWidth &&
              ball.y > brick.y &&
              ball.y < brick.y + brickHeight
            ) {
              ball.speedY = -ball.speedY;
              brick.status = 0;
              score++;

if (score === brickRowCount * brickColumnCount) {
                alert("Congratulations! You won!");
                document.location.reload();
              }
            }
          }
        }
      }

function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPaddle();
        drawBall();
        drawBricks();
        drawScore();
        drawLives();
        collisionDetection();

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

if (ball.y + ball.speedY < ball.radius) {
          ball.speedY = -ball.speedY;
        } else if (ball.y + ball.speedY > canvas.height - ball.radius) {
          if (
            ball.x > paddle.x &&
            ball.x < paddle.x + paddle.width &&
            ball.y > paddle.y - ball.radius
          ) {
            ball.speedY = -ball.speedY;
          } else {
            lives--;
            if (lives === 0) {
              alert("Game Over!");
              document.location.reload();
            } else {
              ball.x = canvas.width / 2;
              ball.y = canvas.height - paddleHeight - ball.radius;
              ball.speedX = ballSpeedX;
              ball.speedY = ballSpeedY;
              paddle.x = (canvas.width - paddleWidth) / 2;
            }
          }
        }

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

ball.x += ball.speedX;
        ball.y += ball.speedY;
      }

initGame();
    </script>
  </body>
</html>
```

You can copy the above code into an HTML file and open it in your browser to play the Block Breaker game. The paddle can be controlled using the left and right arrow keys (or the corresponding keys on a smartphone keyboard).