AI game creator

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

No:52588

273

←

Prev Next

→

Block Breaker
Developer anonymous｜Date and time 24/3/23 8:04:28
Build time 3543 sec｜Game capacity 3.543KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <style>
      canvas {
        background: #eee;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

const paddleWidth = 80;
      const paddleHeight = 10;
      const paddleSpeed = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;

const ballSize = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let ballSpeedX = 4;
      let ballSpeedY = -4;

const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 70;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;

canvas.addEventListener("mousemove", (e) => {
        const mouseX = e.clientX - canvas.offsetLeft;
        paddleX = Math.max(0, Math.min(canvas.width - paddleWidth, mouseX - paddleWidth / 2));
      });

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

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

function drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
          for (let r = 0; r < brickRowCount; r++) {
            if (bricks[c][r].status === 1) {
              const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
              const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
              bricks[c][r].x = brickX;
              bricks[c][r].y = brickY;

ctx.fillStyle = "#0095DD";
              ctx.fillRect(brickX, brickY, brickWidth, brickHeight);
            }
          }
        }
      }

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

if (ballX + ballSpeedX > canvas.width - ballSize || ballX + ballSpeedX < ballSize) {
          ballSpeedX = -ballSpeedX;
        }

if (ballY + ballSpeedY < ballSize) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - ballSize) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            ballSpeedY = -ballSpeedY;
          } else {
            alert("Game Over");
            document.location.reload();
          }
        }

ballX += ballSpeedX;
        ballY += ballSpeedY;

requestAnimationFrame(draw);
      }

draw();
    </script>
  </body>
</html>