AI game creator

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

No:24368

138

←

Prev Next

→

Block Breaker
Developer User11489｜Date and time 23/11/8 3:05:37
Build time 213.551 sec｜Game capacity 5.711KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

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

// Set initial ball position and speed
      var ballRadius = 10;
      var ballX = canvas.width / 2;
      var ballY = canvas.height - 30;
      var ballSpeedX = 2;
      var ballSpeedY = -2;

// Set initial brick properties
      var brickRowCount = 3;
      var brickColumnCount = 5;
      var brickWidth = 75;
      var brickHeight = 20;
      var brickPadding = 10;
      var brickOffsetTop = 30;
      var brickOffsetLeft = 30;
      var bricks = [];

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

// Set initial score and lives
      var score = 0;
      var lives = 3;

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

// Function to draw the ball
      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
      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 update the game state
      function update() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddle
        drawPaddle();

// Draw the ball
        drawBall();

// Draw the bricks
        drawBricks();

// Move the paddle
        if (rightPressed && paddleX < canvas.width - 75) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }

// Move the ball
        ballX += ballSpeedX;
        ballY += ballSpeedY;

// Check for collisions with the walls
        if (ballX + ballSpeedX < ballRadius || ballX + ballSpeedX > canvas.width - ballRadius) {
          ballSpeedX = -ballSpeedX;
        }
        if (ballY + ballSpeedY < ballRadius) {
          ballSpeedY = -ballSpeedY;
        } else if (ballY + ballSpeedY > canvas.height - ballRadius) {
          // Check for collision with the paddle
          if (ballX > paddleX && ballX < paddleX + 75) {
            ballSpeedY = -ballSpeedY;
          } else {
            // Ball fell off the bottom, reduce lives
            lives--;
            if (lives === 0) {
              alert("Game Over");
              document.location.reload();
            } else {
              ballX = canvas.width / 2;
              ballY = canvas.height - 30;
              ballSpeedX = 2;
              ballSpeedY = -2;
              paddleX = (canvas.width - 75) / 2;
            }
          }
        }

// Check for collision with the bricks
        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
              ) {
                ballSpeedY = -ballSpeedY;
                b.status = 0;
                score++;
                if (score === brickRowCount * brickColumnCount) {
                  alert("You win! Congratulations!");
                  document.location.reload();
                }
              }
            }
          }
        }

// Display score and lives
        ctx.font = "16px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.fillText("Score: " + score, 8, 20);
        ctx.fillText("Lives: " + lives, canvas.width - 65, 20);

// Request animation frame to update the game state
        requestAnimationFrame(update);
      }

// Initialize keyboard controls
      var rightPressed = false;
      var leftPressed = false;

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

document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// Start the game
      update();
    </script>
  </body>
</html>