Brick breaker With 2 paddles and 2 balls's game

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

No:17332

←

Prev Next

→

Brick breaker With 2 paddles and 2 balls
Developer User7638｜Date and time 23/9/23 5:31:22
Build time 44.756 sec｜Game capacity 4.342KB｜

Script

Sure! Here's an example of a simple brick breaker game implemented as a single HTML file using JavaScript:

To play the game, you can open the HTML file in any web browser that supports JavaScript, preferably on a smartphone for a better experience. The game features two paddles controlled by arrow keys and the 'A' and 'D' keys. The objective is to prevent the ball from falling off the screen by bouncing it back with the paddles. If the ball touches the bottom wall without being bounced back, the game is over.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's an example of a simple brick breaker game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS for styling the game canvas */
    canvas {
      background: #ddd;
      display: block;
      margin: 100 auto;
    }
  </style>
</head>
<body>
  
  <canvas id="gameCanvas" width="300" height="400"></canvas>
  
  <script>
    // Game initialization
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    const paddleWidth = 60;
    const paddleHeight = 10;
    const paddleSpeed = 8;
    const ballRadius = 5;
    const ballSpeed = 3;
    
    let paddle1X = canvas.width / 2 - paddleWidth / 2;
    let paddle2X = canvas.width / 2 - paddleWidth / 2;
    let ballX = canvas.width / 2;
    let ballY = canvas.height - paddleHeight - ballRadius;
    let ballDX = ballSpeed;
    let ballDY = -ballSpeed;
    let leftArrowPressed = false;
    let rightArrowPressed = false;
    let aKeyPressed = false;
    let dKeyPressed = false;
    
    // Function to draw paddles
    function drawPaddle(x, y) {
      ctx.beginPath();
      ctx.rect(x, y, paddleWidth, paddleHeight);
      ctx.fillStyle = "#000";
      ctx.fill();
      ctx.closePath();
    }
    
    // Function to draw ball
    function drawBall() {
      ctx.beginPath();
      ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#000";
      ctx.fill();
      ctx.closePath();
    }
    
    // Function to update game state
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      if (leftArrowPressed && paddle1X > 0) {
        paddle1X -= paddleSpeed;
      }
      if (rightArrowPressed && paddle1X < canvas.width - paddleWidth) {
        paddle1X += paddleSpeed;
      }
      if (aKeyPressed && paddle2X > 0) {
        paddle2X -= paddleSpeed;
      }
      if (dKeyPressed && paddle2X < canvas.width - paddleWidth) {
        paddle2X += paddleSpeed;
      }
      
      ballX += ballDX;
      ballY += ballDY;
      
      // Ball collisions with walls and paddles
      if (ballX + ballDX < ballRadius || ballX + ballDX > canvas.width - ballRadius) {
        ballDX = -ballDX;
      }
      if (ballY + ballDY < ballRadius) {
        ballDY = -ballDY;
      }
      if (ballY + ballDY > canvas.height - ballRadius) {
        if (ballX >= paddle1X && ballX <= paddle1X + paddleWidth) {
          ballDY = -ballDY;
        } else if (ballX >= paddle2X && ballX <= paddle2X + paddleWidth) {
          ballDY = -ballDY;
        } else {
          alert("Game Over!");
          document.location.reload();
        }
      }
      
      // Drawing paddles and ball
      drawPaddle(paddle1X, canvas.height - paddleHeight);
      drawPaddle(paddle2X, 0);
      drawBall();
      
      requestAnimationFrame(update);
    }
    
    // Keyboard event listeners
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    
    function keyDownHandler(event) {
      if (event.keyCode === 37) {
        leftArrowPressed = true;
      } else if (event.keyCode === 39) {
        rightArrowPressed = true;
      } else if (event.keyCode === 65) {
        aKeyPressed = true;
      } else if (event.keyCode === 68) {
        dKeyPressed = true;
      }
    }
    
    function keyUpHandler(event) {
      if (event.keyCode === 37) {
        leftArrowPressed = false;
      } else if (event.keyCode === 39) {
        rightArrowPressed = false;
      } else if (event.keyCode === 65) {
        aKeyPressed = false;
      } else if (event.keyCode === 68) {
        dKeyPressed = false;
      }
    }
    
    // Start the game
    update();
  </script>
</body>
</html>
```