Brick breaker With Fire's game

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

No:17640

←

Prev Next

→

Brick breaker With Fire
Developer User7638｜Date and time 23/9/24 4:43:20
Build time 48.58 sec｜Game capacity 5.287KB｜

Script

Sure! Here's a simple implementation of a Brick Breaker game with fire in a single HTML file using JavaScript:

To play the game, open the HTML file in a web browser on your smartphone. You can move the paddle with the left and right arrow keys on your device. The objective is to bounce the ball off the paddle to destroy all the bricks. If the ball falls below the paddle, the game is over. Feel free to modify and enhance the code as per your requirements!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple implementation of a Brick Breaker game with fire in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Brick Breaker with Fire</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    canvas {
      background: #333;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="brickBreaker" width="480" height="320"></canvas>
  
  <script>
    // Game initialization
    document.addEventListener("DOMContentLoaded", function() {
      // Canvas setup
      const canvas = document.getElementById("brickBreaker");
      const ctx = canvas.getContext("2d");
      
      // Paddle setup
      const paddleWidth = 75;
      const paddleHeight = 10;
      let paddleX = (canvas.width - paddleWidth) / 2;
      
      // Ball setup
      const ballRadius = 10;
      let ballX = canvas.width / 2;
      let ballY = canvas.height - 30;
      let dx = 2;
      let dy = -2;
      
      // Brick setup
      const brickRowCount = 3;
      const brickColumnCount = 5;
      const brickWidth = 75;
      const brickHeight = 20;
      const brickPadding = 10;
      const brickOffsetTop = 30;
      const brickOffsetLeft = 30;
      
      const bricks = [];
      for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
          bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }
      
      // Game control variables
      let rightPressed = false;
      let leftPressed = false;
      
      // Event listeners for paddle movement
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);    
      
      function keyDownHandler(e) {
        if (e.key === "ArrowRight" || e.key === "Right") {
          rightPressed = true;
        } else if (e.key === "ArrowLeft" || e.key === "Left") {
          leftPressed = true;
        }
      }
      
      function keyUpHandler(e) {
        if (e.key === "ArrowRight" || e.key === "Right") {
          rightPressed = false;
        } else if(e.key === "ArrowLeft" || e.key === "Left") {
          leftPressed = false;
        }
      }
      
      // Collision detection
      function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
          for (let r = 0; r < brickRowCount; r++) {
            const brick = bricks[c][r];
            if (brick.status === 1) {
              if (ballX > brick.x && ballX < brick.x + brickWidth && ballY > brick.y && ballY < brick.y + brickHeight) {
                dy = -dy;
                brick.status = 0;
              }
            }
          }
        }
      }
      
      // Draw functions
      function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }
      
      function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        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.beginPath();
              ctx.rect(brickX, brickY, brickWidth, brickHeight);
              ctx.fillStyle = "#0095DD";
              ctx.fill();
              ctx.closePath();
            }
          }
        }
      }
      
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawBall();
        drawPaddle();
        drawBricks();
        collisionDetection();
        
        // Ball movement
        ballX += dx;
        ballY += dy;
        
        // Ball collision with walls
        if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
          dx = -dx;
        }
        if (ballY + dy < ballRadius) {
          dy = -dy;
        } else if (ballY + dy > canvas.height - ballRadius) {
          if (ballX > paddleX && ballX < paddleX + paddleWidth) {
            dy = -dy;
          } else {
            // Game over
            alert("GAME OVER");
            document.location.reload();
          }
        }
        
        // Paddle movement
        if (rightPressed && paddleX < canvas.width - paddleWidth) {
          paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
          paddleX -= 7;
        }
        
        requestAnimationFrame(draw);
      }
      
      draw();
    });
  </script>
</body>
</html>
```

Feel free to modify and enhance the code as per your requirements!