AI game creator

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

No:40328

←

Prev Next

→

Block Breaker
Developer User18062｜Date and time 24/2/2 8:42:59
Build time 20.501 sec｜Game capacity 5.326KB｜

Script

Sure! Here's a simple implementation of the classic game "Block Breaker" using JavaScript and HTML:

To play the game: 1. Save the code above in a file with a `.html` extension. 2. Open the file in a web browser. 3. Use the left and right arrow keys (or on-screen controls if on a smartphone) to move the paddle and prevent the ball from falling down. 4. Break the bricks by bouncing the ball off the paddle and hitting them. 5. Try to clear all the bricks and achieve the highest score possible. Enjoy playing "Block Breaker"!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic game "Block Breaker" using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      background: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>

// Initialize variables
  var x = canvas.width/2;
  var y = canvas.height-30;
  var ballRadius = 10;
  var dx = 2;
  var dy = -2;
  var paddleHeight = 10;
  var paddleWidth = 75;
  var paddleX = (canvas.width-paddleWidth)/2;
  var rightPressed = false;
  var leftPressed = false;
  var brickRowCount = 3;
  var brickColumnCount = 5;
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = 10;
  var brickOffsetTop = 30;
  var brickOffsetLeft = 30;
  var score = 0;
  var lives = 3;

// Create the bricks
  var bricks = [];
  for (var c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (var r = 0; r < brickRowCount; r++) {
      bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
  }

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

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

// Check collision with bricks
  function collisionDetection() {
    for (var c = 0; c < brickColumnCount; c++) {
      for (var r = 0; r < brickRowCount; r++) {
        var brick = bricks[c][r];
        if (brick.status == 1) {
          if (x > brick.x && x < brick.x+brickWidth && y > brick.y && y < brick.y+brickHeight) {
            dy = -dy;
            brick.status = 0;
            score++;
            if (score == brickRowCount*brickColumnCount) {
              alert("Congratulations! You won!");
              document.location.reload();
            }
          }
        }
      }
    }
  }

// Draw the ball
  function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }

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

// Draw the bricks
  function drawBricks() {
    for (var c = 0; c < brickColumnCount; c++) {
      for (var r = 0; r < brickRowCount; r++) {
        if (bricks[c][r].status == 1) {
          var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
          var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
          bricks[c][r].x = brickX;
          bricks[c][r].y = brickY;
          ctx.beginPath();
          ctx.rect(brickX, brickY, brickWidth, brickHeight);
          ctx.fillStyle = "#0095DD";
          ctx.fill();
          ctx.closePath();
        }
      }
    }
  }

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

// Draw the lives
  function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
  }

// Draw the game
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();

// Ball movement
    x += dx;
    y += dy;

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

// Ball collision with walls
    if (x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
      dx = -dx;
    }
    if (y + dy < ballRadius) {
      dy = -dy;
    }
    // Ball collision with paddle
    else if (y + dy > canvas.height-ballRadius) {
      if (x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
      }
      else {
        lives--;
        if (!lives) {
          alert("Game Over! Your final score is: " + score);
          document.location.reload();
        }
        else {
          x = canvas.width/2;
          y = canvas.height-30;
          dx = 2;
          dy = -2;
          paddleX = (canvas.width-paddleWidth)/2;
        }
      }
    }

requestAnimationFrame(draw);
  }

// Start the game
  draw();
</script>

</body>
</html>
```

To play the game:
1. Save the code above in a file with a `.html` extension.
2. Open the file in a web browser.
3. Use the left and right arrow keys (or on-screen controls if on a smartphone) to move the paddle and prevent the ball from falling down.
4. Break the bricks by bouncing the ball off the paddle and hitting them.
5. Try to clear all the bricks and achieve the highest score possible.

Enjoy playing "Block Breaker"!