AI game creator

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

No:23097

←

Prev Next

→

Block Breaker
Developer User10656｜Date and time 23/10/27 20:29:58
Build time 106.85 sec｜Game capacity 4.943KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Block Breaker Game</title>
<style>
canvas {
  border:1px solid #000;
  background-color: #ddd;
  display: block;
  margin: 0 auto;
}
</style>
</head>
<body>
<script>
// Enclose the code within script tags
window.onload = function() {
  // Get reference to the canvas element and create a context
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

// Set initial position of the paddle
  var paddleX = (canvas.width - 75) / 2;

// Set initial position and speed of the ball
  var ballRadius = 10;
  var ballX = canvas.width / 2;
  var ballY = canvas.height - 30;
  var ballDX = 2;
  var ballDY = -2;

// Set properties of the paddle
  var paddleHeight = 10;
  var paddleWidth = 75;

// Boolean variables for tracking arrow key presses
  var rightPressed = false;
  var leftPressed = false;

// Set properties of the blocks
  var brickRowCount = 3;
  var brickColumnCount = 5;
  var brickWidth = 75;
  var brickHeight = 20;
  var brickPadding = 10;
  var brickOffsetTop = 30;
  var brickOffsetLeft = 30;

// Create an array to store 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 }; // status 1 indicates the block is active
    }
  }

// Add event listeners to track key presses and releases
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);

// Function to handle key down event
  function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = true;
    }
  }

// Function to handle key up event
  function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
      rightPressed = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
      leftPressed = false;
    }
  }

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

// Function to draw the ball on the canvas
  function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }

// Function to draw the bricks on the canvas
  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();
        }
      }
    }
  }

// Function to detect collision between the ball and the bricks
  function collisionDetection() {
    for (var c = 0; c < brickColumnCount; c++) {
      for (var r = 0; r < brickRowCount; r++) {
        var b = bricks[c][r];
        if (b.status == 1) {
          if (
            ballX > b.x &&
            ballX < b.x + brickWidth &&
            ballY > b.y &&
            ballY < b.y + brickHeight
          ) {
            ballDY = -ballDY;
            b.status = 0; // set the status of the collided brick to 0 (inactive)
          }
        }
      }
    }
  }

// Function to update the game canvas
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
    drawBricks();
    drawBall();
    drawPaddle();
    collisionDetection();

// Reverse ball direction if it hits the canvas edges
    if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
      ballDX = -ballDX;
    }
    if (ballY + ballDY < ballRadius) {
      ballDY = -ballDY;
    } else if (ballY + ballDY > canvas.height - ballRadius) {
      // Check if ball hits the paddle
      if (ballX > paddleX && ballX < paddleX + paddleWidth) {
        ballDY = -ballDY;
      } else {
        // Game over if ball hits the bottom edge
        alert("GAME OVER");
        document.location.reload(); // Reload the page to restart the game
      }
    }

// Move the paddle based on arrow key presses
    if (rightPressed && paddleX < canvas.width - paddleWidth) {
      paddleX += 7;
    } else if (leftPressed && paddleX > 0) {
      paddleX -= 7;
    }

// Move the ball
    ballX += ballDX;
    ballY += ballDY;

requestAnimationFrame(draw);
  }

// Start the game
  draw();
};
</script>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
</html>