AI game creator

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

No:12593

←

Prev Next

→

Block Breaker
Developer User5254｜Date and time 23/8/20 6:34:40
Build time 19.431 sec｜Game capacity 5.024KB｜

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 {
      background: #eee;
      display: block;
      margin: 20px auto;
      border: 1px solid #333;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Block dimensions
      const blockWidth = 75;
      const blockHeight = 20;

// Paddle dimensions
      const paddleHeight = 10;
      const paddleWidth = 75;

// Paddle position
      let paddleX = (canvas.width - paddleWidth) / 2;

// Ball position and speed
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballDX = 2;
      let ballDY = -2;

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

// Brick grid
      const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      const bricks = [];

// Initializing the bricks
      for (let column = 0; column < brickColumnCount; column++) {
        bricks[column] = [];
        for (let row = 0; row < brickRowCount; row++) {
          bricks[column][row] = { x: 0, y: 0, status: 1 };
        }
      }

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

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

// Collision detection
      function collisionDetection() {
        for (let column = 0; column < brickColumnCount; column++) {
          for (let row = 0; row < brickRowCount; row++) {
            const brick = bricks[column][row];
            if (brick.status === 1) {
              if (
                ballX > brick.x &&
                ballX < brick.x + brickWidth &&
                ballY > brick.y &&
                ballY < brick.y + brickHeight
              ) {
                ballDY = -ballDY;
                brick.status = 0;
              }
            }
          }
        }
      }

// Drawing functions
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }

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

// Game loop
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        collisionDetection();

// Ball movement
        ballX += ballDX;
        ballY += ballDY;

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

// Ball collision detection with walls and paddle
        if (ballX + ballDX > canvas.width - 10 || ballX + ballDX < 10) {
          ballDX = -ballDX;
        }
        if (ballY + ballDY < 10) {
          ballDY = -ballDY;
        } else if (ballY + ballDY > canvas.height - 20) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballDY = -ballDY;
          } else {
            alert("GAME OVER");
            document.location.reload();
          }
        }

requestAnimationFrame(draw);
      }

// Starting the game
      draw();
    })();
  </script>
</body>
</html>