Brick Breaker with lasers's game

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

No:17313

←

Prev Next

→

Brick Breaker with lasers
Developer User7638｜Date and time 23/9/23 4:13:14
Build time 72.498 sec｜Game capacity 6.769KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Brick Breaker with Lasers</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

canvas {
      background-color: #222;
      display: block;
      margin: auto;
    }
  </style>
</head>
<body>
<script>
  // Define paddle properties
  const paddleWidth = 100;
  const paddleHeight = 10;
  const paddleSpeed = 8;

// Define ball properties
  const ballRadius = 10;
  const ballSpeed = 5;

// Define brick properties
  const brickRowCount = 5;
  const brickColumnCount = 7;
  const brickWidth = 80;
  const brickHeight = 20;
  const brickPadding = 10;
  const brickOffsetTop = 30;
  const brickOffsetLeft = 30;

// Define laser properties
  const laserWidth = 5;
  const laserHeight = 15;
  const laserSpeed = 10;

// Set up the canvas
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);

// Define game variables
  let paddleX = (canvas.width - paddleWidth) / 2;
  let ballX = canvas.width / 2;
  let ballY = canvas.height - 30;
  let ballDX = ballSpeed;
  let ballDY = -ballSpeed;
  let brickGrid = createBrickGrid();
  let score = 0;
  let lasers = [];

// Event listeners for paddle movement
  document.addEventListener('keydown', handleKeyDown);
  document.addEventListener('keyup', handleKeyUp);

// Event listener for mouse movement
  document.addEventListener('mousemove', handleMouseMove);

// Function to create the initial brick grid
  function createBrickGrid() {
    const grid = [];
    for (let i = 0; i < brickRowCount; i++) {
      grid[i] = [];
      for (let j = 0; j < brickColumnCount; j++) {
        grid[i][j] = {
          x: j * (brickWidth + brickPadding) + brickOffsetLeft,
          y: i * (brickHeight + brickPadding) + brickOffsetTop,
          broken: false
        };
      }
    }
    return grid;
  }

// Function to draw the paddle
  function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();
  }

// Function to move the paddle left
  function movePaddleLeft() {
    paddleX -= paddleSpeed;
    if (paddleX < 0) {
      paddleX = 0;
    }
  }

// Function to move the paddle right
  function movePaddleRight() {
    paddleX += paddleSpeed;
    if (paddleX + paddleWidth > canvas.width) {
      paddleX = canvas.width - paddleWidth;
    }
  }

// Function to handle keydown event
  function handleKeyDown(event) {
    if (event.key === 'ArrowLeft') {
      movePaddleLeft();
    } else if (event.key === 'ArrowRight') {
      movePaddleRight();
    }
  }

// Function to handle keyup event
  function handleKeyUp(event) {
    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
      // Stop moving the paddle
    }
  }

// Function to handle mouse movement
  function handleMouseMove(event) {
    const relativeX = event.clientX - canvas.offsetLeft;
    if (relativeX > 0 && relativeX < canvas.width) {
      paddleX = relativeX - paddleWidth / 2;
    }
  }

// Function to draw the ball
  function drawBall() {
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = '#ffff00';
    ctx.fill();
    ctx.closePath();
  }

// Function to move the ball
  function moveBall() {
    ballX += ballDX;
    ballY += ballDY;

// Check for collision with walls
    if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
      ballDX = -ballDX;
    }
    if (ballY - ballRadius < 0) {
      ballDY = -ballDY;
    }

// Check for collision with paddle
    if (
      ballY + ballRadius >= canvas.height - paddleHeight &&
      ballX >= paddleX &&
      ballX <= paddleX + paddleWidth
    ) {
      ballDY = -ballDY;
    }

// Check for collision with bricks
    for (let i = 0; i < brickRowCount; i++) {
      for (let j = 0; j < brickColumnCount; j++) {
        const brick = brickGrid[i][j];
        if (!brick.broken) {
          if (
            ballX >= brick.x &&
            ballX <= brick.x + brickWidth &&
            ballY + ballRadius >= brick.y &&
            ballY - ballRadius <= brick.y + brickHeight
          ) {
            brick.broken = true;
            ballDY = -ballDY;
            score++;
            if (score === brickRowCount * brickColumnCount) {
              alert('Congratulations! You won!');
              document.location.reload();
            }
          }
        }
      }
    }
  }

// Function to draw the bricks
  function drawBricks() {
    for (let i = 0; i < brickRowCount; i++) {
      for (let j = 0; j < brickColumnCount; j++) {
        const brick = brickGrid[i][j];
        if (!brick.broken) {
          ctx.beginPath();
          ctx.rect(brick.x, brick.y, brickWidth, brickHeight);
          ctx.fillStyle = '#00ff00';
          ctx.fill();
          ctx.closePath();
        }
      }
    }
  }

// Function to draw the lasers
  function drawLasers() {
    for (let i = 0; i < lasers.length; i++) {
      const laser = lasers[i];
      ctx.beginPath();
      ctx.rect(laser.x, laser.y, laserWidth, laserHeight);
      ctx.fillStyle = '#ff0000';
      ctx.fill();
      ctx.closePath();
    }
  }

// Function to move the lasers
  function moveLasers() {
    for (let i = 0; i < lasers.length; i++) {
      const laser = lasers[i];
      laser.y -= laserSpeed;
      if (laser.y < 0) {
        lasers.splice(i, 1);
      }

// Check for collision with bricks
      for (let j = 0; j < brickRowCount; j++) {
        for (let k = 0; k < brickColumnCount; k++) {
          const brick = brickGrid[j][k];
          if (!brick.broken) {
            if (
              laser.x >= brick.x &&
              laser.x <= brick.x + brickWidth &&
              laser.y <= brick.y + brickHeight
            ) {
              brick.broken = true;
              lasers.splice(i, 1);
              score++;
              if (score === brickRowCount * brickColumnCount) {
                alert('Congratulations! You won!');
                document.location.reload();
              }
            }
          }
        }
      }
    }
  }

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle();
    drawBall();
    drawBricks();
    drawLasers();
    moveBall();
    moveLasers();
  }

function fireLaser() {
    lasers.push({
      x: paddleX + paddleWidth / 2 - laserWidth / 2,
      y: canvas.height - paddleHeight - laserHeight
    });
  }

// Event listener for shooting lasers
  document.addEventListener('click', fireLaser);

// Start the game loop
  setInterval(draw, 10);
</script>
</body>
</html>