AI game creator

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

No:41343

←

Prev Next

→

Block Breaker
Developer User18514｜Date and time 24/2/7 1:07:15
Build time 23.433 sec｜Game capacity 5.028KB｜

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>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Enclosing the game code within script tags
    
    // Get the canvas element and its context
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Set up the initial position and size of the paddle
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX = (canvas.width - paddleWidth) / 2;

// Set up the ball properties
    let ballRadius = 10;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let ballSpeedX = 2;
    let ballSpeedY = -2;

// Set up the brick properties
    const brickRowCount = 3;
    const brickColumnCount = 5;
    const brickWidth = 75;
    const brickHeight = 20;
    const brickPadding = 10;
    const brickOffsetTop = 30;
    const brickOffsetLeft = 30;

// Create the bricks array
    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 }; // status 1 indicates brick is active
      }
    }

// 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 (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            let 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 collisions between ball and bricks
    function collisionDetection() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          let brick = bricks[c][r];
          if (brick.status === 1) {
            if (
              ballX > brick.x &&
              ballX < brick.x + brickWidth &&
              ballY > brick.y &&
              ballY < brick.y + brickHeight
            ) {
              ballSpeedY = -ballSpeedY;
              brick.status = 0; // set brick status to 0, indicating it's been hit
            }
          }
        }
      }
    }

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

// Ball movement logic
      ballX += ballSpeedX;
      ballY += ballSpeedY;

// Check for collisions with walls
      if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if (ballY - ballRadius < 0) {
        ballSpeedY = -ballSpeedY;
      } else if (ballY + ballRadius > canvas.height) {
        if (ballX > paddleX && ballX < paddleX + paddleWidth) {
          ballSpeedY = -ballSpeedY;
        } else {
          // Game over condition
          alert("Game Over!");
          document.location.reload();
        }
      }

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

// Set up event listeners for left and right arrow keys
    let rightPressed = false;
    let leftPressed = false;

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

// Keydown event handler to track left and right arrow keys
    function keyDownHandler(event) {
      if (event.keyCode === 39) {
        rightPressed = true;
      } else if (event.keyCode === 37) {
        leftPressed = true;
      }
    }

// Keyup event handler to stop tracking left and right arrow keys
    function keyUpHandler(event) {
      if (event.keyCode === 39) {
        rightPressed = false;
      } else if (event.keyCode === 37) {
        leftPressed = false;
      }
    }

// Start the game by calling the updateGame function repeatedly
    setInterval(updateGame, 10);
  </script>
</body>
</html>