Block Breaker's game | AI game creator

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

No:20497

41

Block Breaker
Developer User7572｜Date and time 23/10/10 2:48:07
Build time 36.858 sec｜Game capacity 6.975KB｜

→ 　

0　

0　

　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

<script>
        // Set up the canvas
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const canvasWidth = 480;
        const canvasHeight = 320;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        
        // Ball properties
        let ball = {
            x: canvasWidth / 2,
            y: canvasHeight / 2,
            radius: 10,
            speed: 4,
            dx: 4,
            dy: -4,
            color: "#fff"
        };
        
        // Paddle properties
        let paddle = {
            x: canvasWidth / 2 - 40,
            y: canvasHeight - 20,
            width: 80,
            height: 10,
            speed: 8,
            dx: 0,
            color: "#fff"
        };
        
        // Brick properties
        let brickRowCount = 4;
        let brickColumnCount = 5;
        let brickWidth = 75;
        let brickHeight = 20;
        let brickPadding = 10;
        let brickOffsetTop = 30;
        let brickOffsetLeft = 30;
        
        // Create the bricks
        let bricks = [];
        for (let row = 0; row < brickRowCount; row++) {
            bricks[row] = [];
            for (let col = 0; col < brickColumnCount; col++) {
                bricks[row][col] = { x: 0, y: 0, status: 1 };
            }
        }
        
        // Track the score
        let score = 0;
        
        // Track the number of remaining bricks
        let remainingBricks = brickRowCount * brickColumnCount;
        
        // Controls
        document.addEventListener("keydown", movePaddle);
        document.addEventListener("keyup", stopPaddle);
        
        // Move the paddle
        function movePaddle(event) {
            if (event.keyCode === 37) {
                paddle.dx = -paddle.speed;
            } else if (event.keyCode === 39) {
                paddle.dx = paddle.speed;
            }
        }
        
        // Stop the paddle
        function stopPaddle(event) {
            if (event.keyCode === 37 || event.keyCode === 39) {
                paddle.dx = 0;
            }
        }
        
        // Collision detection
        function collisionDetection() {
            for (let row = 0; row < brickRowCount; row++) {
                for (let col = 0; col < brickColumnCount; col++) {
                    let brick = bricks[row][col];
                    if (brick.status === 1) {
                        if (
                            ball.x > brick.x &&
                            ball.x < brick.x + brickWidth &&
                            ball.y > brick.y &&
                            ball.y < brick.y + brickHeight
                        ) {
                            ball.dy = -ball.dy;
                            brick.status = 0;
                            score++;
                            remainingBricks--;
                            
                            if (remainingBricks === 0) {
                                // Game over, player wins
                                alert("Congratulations, you won!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }
        
        // Draw the ball
        function drawBall() {
            context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            context.fillStyle = ball.color;
            context.fill();
            context.closePath();
        }
        
        // Draw the paddle
        function drawPaddle() {
            context.beginPath();
            context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
            context.fillStyle = paddle.color;
            context.fill();
            context.closePath();
        }
        
        // Draw the bricks
        function drawBricks() {
            for (let row = 0; row < brickRowCount; row++) {
                for (let col = 0; col < brickColumnCount; col++) {
                    if (bricks[row][col].status === 1) {
                        let brickX = col * (brickWidth + brickPadding) + brickOffsetLeft;
                        let brickY = row * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[row][col].x = brickX;
                        bricks[row][col].y = brickY;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#fff";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }
        
        // Draw the score
        function drawScore() {
            context.font = "16px Arial";
            context.fillStyle = "#fff";
            context.fillText("Score: " + score, 8, 20);
        }
        
        // Draw the game
        function drawGame() {
            context.clearRect(0, 0, canvasWidth, canvasHeight);
            drawBall();
            drawPaddle();
            drawBricks();
            drawScore();
            collisionDetection();
            
            // Move the ball
            ball.x += ball.dx;
            ball.y += ball.dy;
            
            // Check for collisions with walls
            if (ball.x + ball.radius > canvasWidth || ball.x - ball.radius < 0) {
                ball.dx = -ball.dx;
            }
            
            if (ball.y - ball.radius < 0) {
                ball.dy = -ball.dy;
            } else if (ball.y + ball.radius > canvasHeight) {
                // Check for collision with paddle
                if (
                    ball.x > paddle.x &&
                    ball.x < paddle.x + paddle.width &&
                    ball.y + ball.radius > paddle.y
                ) {
                    ball.dy = -ball.dy;
                } else {
                    // Game over, player loses
                    alert("Game over! Your score is " + score);
                    document.location.reload();
                }
            }
            
            // Move the paddle
            paddle.x += paddle.dx;
            
            // Keep the paddle within the canvas
            if (paddle.x < 0) {
                paddle.x = 0;
            } else if (paddle.x + paddle.width > canvasWidth) {
                paddle.x = canvasWidth - paddle.width;
            }
            
            requestAnimationFrame(drawGame);
        }
        
        drawGame();
    </script>
</body>
</html>