Brick breaker but the ball acts like a boomerang's game

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

No:17315

←

Prev Next

→

Brick breaker but the ball acts like a boomerang
Developer User7638｜Date and time 23/9/23 4:22:20
Build time 56.271 sec｜Game capacity 6.251KB｜

Script

Sure, here's an example of a simple brick breaker game with a boomerang-like ball:

To play the game, copy the above code into a new HTML file and open it in a web browser. The game will run in the browser window and allow you to control the paddle using the left and right arrow keys (or the "A" and "D" keys) to bounce the ball and break the bricks. The ball will act like a boomerang by bouncing off walls, paddle, and bricks. If the ball hits the bottom wall, the game will display a "GAME OVER" alert message and restart.

←

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 a boomerang-like ball:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Brick Breaker Game</title>
    <style>
        #gameCanvas {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Define the ball properties
        const ballRadius = 10;
        let x = canvas.width / 2;
        let y = canvas.height - 30;
        let dx = 2; // Change in the x-axis direction
        let dy = -2; // Change in the y-axis direction

// Define the paddle properties
        const paddleHeight = 10;
        const paddleWidth = 75;
        let paddleX = (canvas.width - paddleWidth) / 2;
        let rightPressed = false;
        let leftPressed = false;

// Define the brick properties
        const brickRowCount = 3;
        const brickColumnCount = 5;
        const brickWidth = 75;
        const brickHeight = 20;
        const brickPadding = 10;
        const brickOffsetTop = 30;
        const brickOffsetLeft = 30;
        let 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 };
            }
        }

// Set up event listeners for paddle movement
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, 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;
            }
        }

// Function to detect collision between ball and bricks
        function collisionDetection() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    let brick = bricks[c][r];
                    if (brick.status === 1) {
                        if (
                            x > brick.x &&
                            x < brick.x + brickWidth &&
                            y > brick.y &&
                            y < brick.y + brickHeight
                        ) {
                            dy = -dy;
                            brick.status = 0;
                        }
                    }
                }
            }
        }

// Function to draw the ball
        function drawBall() {
            context.beginPath();
            context.arc(x, y, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

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

// Function to draw the bricks
        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        let brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#0095DD";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }

// Function to update the game state
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            collisionDetection();

// Reverse ball direction if it hits the walls or the paddle
            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 {
                    // Game over if the ball hits the bottom wall
                    alert("GAME OVER");
                    document.location.reload();
                }
            }

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

// Update ball position
            x += dx;
            y += dy;

requestAnimationFrame(update);
        }

update();
    </script>
</body>
</html>
```