Brick breaker but every time the ball breaks A block a multiplies's game

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

No:17333

106

←

Prev Next

→

Brick breaker but every time the ball breaks A blo..ALL
Developer User7638｜Date and time 23/9/23 5:34:03
Build time 63.126 sec｜Game capacity 6.98KB｜

Script

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

Please note that the game logic provided is a simple implementation to demonstrate the concept. You can modify the code to enhance the game's features, graphics, and design according to your requirements.

←

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>
    <title>Brick Breaker Game</title>
    <style>
        #gameCanvas {
            background-color: #000;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Game variables
        var canvas;
        var canvasContext;
        var ballX = 50;
        var ballY = 50;
        var ballSpeedX = 5;
        var ballSpeedY = 7;
        var paddleX = 400;
        var paddleWidth = 80;
        var paddleHeight = 10;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var score = 0;
        var bricks = [];

// Setup the game
        window.onload = function () {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');
            
            // Initialize bricks
            for (var c = 0; c < brickColumnCount; c++) {
                bricks[c] = [];
                for (var r = 0; r < brickRowCount; r++) {
                    bricks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }

// Game loop
            setInterval(update, 1000 / 60);

// Handle paddle movement
            canvas.addEventListener('mousemove', function (evt) {
                var mousePos = calculateMousePos(evt);
                paddleX = mousePos.x - paddleWidth / 2;
            });
        };

// Update game state
        function update() {
            moveEverything();
            drawEverything();
        }

// Move ball and paddle
        function moveEverything() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballX < 0 && ballSpeedX < 0.0 ||
                ballX > canvas.width && ballSpeedX > 0.0) {
                ballSpeedX *= -1;
            }

if (ballY < 0 && ballSpeedY < 0.0) {
                ballSpeedY *= -1;
            }

if (ballY > canvas.height) {
                resetBall();
            }

var paddleTopEdgeY = canvas.height - paddleHeight;
            var paddleBottomEdgeY = canvas.height;
            var paddleLeftEdgeX = paddleX;
            var paddleRightEdgeX = paddleX + paddleWidth;
            if (ballY > paddleTopEdgeY && // ball below the top of paddle
                ballY < paddleBottomEdgeY && // ball above bottom of paddle
                ballX > paddleLeftEdgeX && // ball right of the left side of paddle
                ballX < paddleRightEdgeX) { // ball left of the right side of paddle
                ballSpeedY *= -1;

var paddleCenterX = paddleX + paddleWidth / 2;
                var ballDistFromPaddleCenterX = ballX - paddleCenterX;
                ballSpeedX = ballDistFromPaddleCenterX * 0.25;
            }

// Collision detection with bricks
            var brickColumnCount = bricks.length;
            var brickRowCount = bricks[0].length;
            var brickWidth = canvas.width / brickColumnCount - brickPadding;
            var brickHeight = 20;
            var brickOffsetTop = 30;
            var brickOffsetLeft = (canvas.width % brickColumnCount) / 2;

var ballBrickCol = Math.floor((ballX - brickOffsetLeft) / brickWidth);
            var ballBrickRow = Math.floor((ballY - brickOffsetTop) / brickHeight);
            var brick = bricks[ballBrickCol][ballBrickRow];

if (ballBrickCol >= 0 &&
                ballBrickCol < brickColumnCount &&
                ballBrickRow >= 0 &&
                ballBrickRow < brickRowCount &&
                brick.status === 1) {

ballSpeedY *= -1;
                brick.status = 0;
                score++;

if (score % 4 === 0) {
                    ballSpeedX *= 2; // Double the ball speed every 4 bricks
                }

// Check if all bricks are destroyed
                var totalBricks = brickRowCount * brickColumnCount;
                if (score === totalBricks) {
                    alert('YOU WIN, CONGRATULATIONS!');
                    location.reload(); // Reload the page once the game is won
                }
            }
        }

// Draw game canvas
        function drawEverything() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw ball
            drawCircle(ballX, ballY, 10, '#FF0000');

// Draw paddle
            drawRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight, '#FFFFFF');

// Draw bricks
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        drawRect(brickX, brickY, brickWidth, brickHeight, '#00FF00');
                    }
                }
            }

// Draw score
            canvasContext.font = '16px Arial';
            canvasContext.fillStyle = '#FFFFFF';
            canvasContext.fillText('Score: ' + score, 8, 20);
        }

// Draw rectangle shape
        function drawRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

// Draw circle shape
        function drawCircle(centerX, centerY, radius, color) {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
            canvasContext.fill();
        }

// Calculate mouse position relative to canvas
        function calculateMousePos(evt) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = evt.clientX - rect.left - root.scrollLeft;
            var mouseY = evt.clientY - rect.top - root.scrollTop;
            return {
                x: mouseX,
                y: mouseY
            };
        }

// Reset ball position
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballSpeedX = 5;
            ballSpeedY = 7;
        }
    </script>
</body>
</html>
```