AI game creator

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

No:20039

←

Prev Next

→

Block Breaker
Developer User8925｜Date and time 23/10/8 1:09:29
Build time 31.397 sec｜Game capacity 4.897KB｜

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</title>
    <style>
      canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Functions

function updateMousePosition(evt) {
        let rect = canvas.getBoundingClientRect();
        let root = document.documentElement;

mouseX = evt.clientX - rect.left - root.scrollLeft;
      }

function setupInput() {
        canvas.addEventListener("mousemove", updateMousePosition);
      }

function moveBall() {
        ballX += ballSpeedX;
        ballY += ballSpeedY;

if (ballX < 0 || ballX > canvas.width) {
          ballSpeedX *= -1;
        }

if (ballY < 0) {
          ballSpeedY *= -1;
        }

if (ballY > canvas.height) {
          // Game over logic
          alert("Game Over");
          ballReset();
          createBricks();
        }

// Paddle collision logic
        if (
          ballY + 10 >= canvas.height - paddleHeight &&
          ballX >= paddleX &&
          ballX <= paddleX + paddleWidth
        ) {
          ballSpeedY *= -1;

let collisionPoint = ballX - (paddleX + paddleWidth / 2);
          ballSpeedX = collisionPoint * 0.35;
        }

// Brick collision logic
        for (let col = 0; col < brickColumnCount; col++) {
          for (let row = 0; row < brickRowCount; row++) {
            let b = bricks[col][row];
            if (b.status === 1) {
              if (
                ballX >= b.x &&
                ballX <= b.x + brickWidth &&
                ballY >= b.y &&
                ballY <= b.y + brickHeight
              ) {
                ballSpeedY *= -1;
                b.status = 0;
              }
            }
          }
        }
      }

function ballReset() {
        ballX = canvas.width / 2;
        ballY = canvas.height / 2;
        ballSpeedX = 10;
        ballSpeedY = 4;
      }

function movePaddle() {
        const paddleSpeed = 15;
        let paddleMidpoint = paddleX + paddleWidth / 2;

if (mouseX > paddleMidpoint + paddleSpeed) {
          paddleX += paddleSpeed;
        } else if (mouseX < paddleMidpoint - paddleSpeed) {
          paddleX -= paddleSpeed;
        }
      }

function drawPaddle() {
        canvasContext.fillStyle = "#0095DD";
        canvasContext.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      }

function drawBall() {
        canvasContext.fillStyle = "#0095DD";
        canvasContext.beginPath();
        canvasContext.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
        canvasContext.fill();
      }

function draw() {
        // Clear the canvas
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

drawBricks();
        drawPaddle();
        movePaddle();
        drawBall();
        moveBall();
      }

function gameLoop() {
        draw();
        requestAnimationFrame(gameLoop);
      }

// Initialization
      window.onload = function () {
        canvas = document.getElementById("gameCanvas");
        canvasContext = canvas.getContext("2d");
        createBricks();
        setupInput();
        gameLoop();
      };
    </script>
  </body>
</html>