Brick breaker with 2 balls's game

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

No:17331

←

Prev Next

→

Brick breaker with 2 balls
Developer User7638｜Date and time 23/9/23 5:29:14
Build time 58.018 sec｜Game capacity 7.15KB｜

Script

Sure! Here's an example of a simple brick breaker game with two balls implemented as a single HTML file, incorporating JavaScript. You can play it on a smartphone or any web browser:

This implementation includes a canvas where the game elements are drawn: the bricks, balls, and paddle. You control the paddle using arrow keys or touch gestures on a smartphone. The goal is to break all the bricks using two balls and bounce them off the paddle. You can copy this code into a single HTML file and open it in a web browser to play the brick breaker game. Please note that due to limitations of the text-based format, you won't be able to view the game graphics or interact with it as seamlessly as you would on an actual browser.

←

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 with two balls implemented as a single HTML file, incorporating JavaScript. You can play it on a smartphone or any web browser:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Brick Breaker</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
  
    <script>
        // Initiating the game
        document.addEventListener("DOMContentLoaded", function() {
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");
          
            const paddleWidth = 80;
            const paddleHeight = 10;
            const brickRowCount = 5;
            const brickColumnCount = 8;
            const brickWidth = 45;
            const brickHeight = 15;
            const ballRadius = 8;
            const ballSpeed = 3;
            const paddleSpeed = 7;
          
            let x = canvas.width / 2;
            let y = canvas.height - 30;
            let dx = ballSpeed;
            let dy = -ballSpeed;
            let paddleX = (canvas.width - paddleWidth) / 2;
            let rightPressed = false;
            let leftPressed = false;
            let score = 0;
          
            // Create bricks
            let bricks = [];
            for (let column = 0; column < brickColumnCount; column++) {
                bricks[column] = [];
                for (let row = 0; row < brickRowCount; row++) {
                    bricks[column][row] = { x: 0, y: 0, status: 1 };
                }
            }
          
            // Event listeners for paddle movement
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);
          
            function keyDownHandler(event) {
                if (event.key === "Right" || event.key === "ArrowRight") {
                    rightPressed = true;
                } else if (event.key === "Left" || event.key === "ArrowLeft") {
                    leftPressed = true;
                }
            }
          
            function keyUpHandler(event) {
                if (event.key === "Right" || event.key === "ArrowRight") {
                    rightPressed = false;
                } else if (event.key === "Left" || event.key === "ArrowLeft") {
                    leftPressed = false;
                }
            }
          
            // Collision detection for bricks
            function collisionDetection() {
                for (let column = 0; column < brickColumnCount; column++) {
                    for (let row = 0; row < brickRowCount; row++) {
                        const brick = bricks[column][row];
                        if (brick.status === 1) {
                            if (
                                x > brick.x && x < brick.x + brickWidth &&
                                y > brick.y && y < brick.y + brickHeight
                            ) {
                                dy = -dy;
                                brick.status = 0;
                                score++;
                                if (score === brickRowCount * brickColumnCount) {
                                    alert("Congratulations! You won!");
                                    document.location.reload();
                                }
                            }
                        }
                    }
                }
            }
          
            // Drawing the paddle
            function drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }
          
            // Drawing the ball
            function drawBall() {
                ctx.beginPath();
                ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }
          
            // Drawing the bricks
            function drawBricks() {
                for (let column = 0; column < brickColumnCount; column++) {
                    for (let row = 0; row < brickRowCount; row++) {
                        if (bricks[column][row].status === 1) {
                            const brickX = column * (brickWidth + 5) + 30;
                            const brickY = row * (brickHeight + 5) + 30;
                            bricks[column][row].x = brickX;
                            bricks[column][row].y = brickY;
                            ctx.beginPath();
                            ctx.rect(brickX, brickY, brickWidth, brickHeight);
                            ctx.fillStyle = "#0095DD";
                            ctx.fill();
                            ctx.closePath();
                        }
                    }
                }
            }
          
            // Updating game elements for each frame
            function update() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBricks();
                drawBall();
                drawPaddle();
                collisionDetection();
          
                if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                    dx = -dx;
                }
                if (y + dy < ballRadius) {
                    dy = -dy;
                } else if (y + dy > canvas.height - ballRadius) {
                    if (x > paddleX && x < paddleX + paddleWidth) {
                        dy = -dy;
                    } else {
                        alert("Game Over!");
                        document.location.reload();
                    }
                }
          
                if (rightPressed) {
                    paddleX += paddleSpeed;
                    if (paddleX + paddleWidth > canvas.width) {
                        paddleX = canvas.width - paddleWidth;
                    }
                } else if (leftPressed) {
                    paddleX -= paddleSpeed;
                    if (paddleX < 0) {
                        paddleX = 0;
                    }
                }
          
                x += dx;
                y += dy;
                requestAnimationFrame(update);
            }
          
            update();
        });
    </script>
</body>
</html>
```

You can copy this code into a single HTML file and open it in a web browser to play the brick breaker game. Please note that due to limitations of the text-based format, you won't be able to view the game graphics or interact with it as seamlessly as you would on an actual browser.