Brick Breaker with lasers's game

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

No:17314

←

Prev Next

→

Brick Breaker with lasers
Developer User7638｜Date and time 23/9/23 4:17:48
Build time 75.358 sec｜Game capacity 8.574KB｜

Script

Sure! Here's an example of a simple Brick Breaker game with lasers implemented as a single HTML file:

This code implements a brick breaker game where you control a paddle using the arrow keys on a smartphone. The paddle can be moved left or right to bounce the ball towards the bricks. The objective is to clear all the bricks by hitting them with the ball. You can also fire lasers from the paddle by pressing the spacebar to destroy the bricks. The game ends either when all the bricks are destroyed or when the ball falls past the paddle.

←

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 lasers implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #gameCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    
    <script>
        // Get the canvas element
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Game variables
        const paddleWidth = 75;
        const paddleHeight = 10;
        let paddleX = (canvas.width - paddleWidth) / 2;
        let rightPressed = false;
        let leftPressed = false;
        
        const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballDX = 2;
        let ballDY = -2;
        
        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 };
            }
        }
        
        // Laser variables
        const laserHeight = 10;
        let laserX = canvas.width / 2;
        let laserY = canvas.height - 30;
        let laserDY = -5;
        let laserFired = false;
        
        // 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;
            } else if (event.key === "Space") {
                fireLaser();
            }
        }
        
        function keyUpHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = false;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = false;
            }
        }
        
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
        
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            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) {
                        let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        let 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 collisionDetection() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    let b = bricks[c][r];
                    if (b.status === 1) {
                        if (
                            ballX > b.x && ballX < b.x + brickWidth &&
                            ballY > b.y && ballY < b.y + brickHeight
                        ) {
                            ballDY = -ballDY;
                            b.status = 0;
                            if (checkGameWon()) {
                                alert("Congratulations! You won!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }
        
        function checkGameWon() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        return false;
                    }
                }
            }
            return true;
        }
        
        function drawLaser() {
            if (laserFired) {
                ctx.beginPath();
                ctx.moveTo(laserX, laserY);
                ctx.lineTo(laserX, laserY - laserHeight);
                ctx.strokeStyle = "#FF0000";
                ctx.lineWidth = 3;
                ctx.stroke();
                ctx.closePath();
            }
        }
        
        function fireLaser() {
            if (!laserFired) {
                laserX = paddleX + paddleWidth / 2;
                laserY = canvas.height - paddleHeight;
                laserFired = true;
            }
        }
        
        function moveLaser() {
            if (laserFired) {
                laserY += laserDY;
                if (laserY <= 0) {
                    laserFired = false;
                }
            }
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawPaddle();
            drawBall();
            drawLaser();
            collisionDetection();
            
            // Move paddle
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }
            
            // Move ball
            ballX += ballDX;
            ballY += ballDY;
            
            // Bounce ball off walls
            if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
                ballDX = -ballDX;
            }
            
            if (ballY + ballDY < ballRadius) {
                ballDY = -ballDY;
            } else if (ballY + ballDY > canvas.height - ballRadius - paddleHeight) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballDY = -ballDY;
                } else {
                    alert("Game Over");
                    document.location.reload();
                }
            }
            
            // Laser collision with bricks
            if (laserFired) {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        let b = bricks[c][r];
                        if (b.status === 1) {
                            if (
                                laserX > b.x && laserX < b.x + brickWidth &&
                                laserY > b.y && laserY < b.y + brickHeight
                            ) {
                                b.status = 0;
                                laserFired = false;
                                if (checkGameWon()) {
                                    alert("Congratulations! You won!");
                                    document.location.reload();
                                }
                            }
                        }
                    }
                }
            }
            
            moveLaser();
            
            requestAnimationFrame(draw);
        }
        
        draw();
    </script>
</body>
</html>
```