AI game creator

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

No:19157

←

Prev Next

→

Block Breaker
Developer User8444｜Date and time 23/10/1 22:20:03
Build time 23.999 sec｜Game capacity 6.333KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            background: #f1f1f1;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Enclosing the code within the script tags

// Get the canvas element and its context
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

// Set initial variables
        var x = canvas.width / 2; // Starting position of the paddle
        var y = canvas.height - 30; // Starting position of the paddle
        var dx = 2; // Paddle movement speed
        var dy = -2; // Paddle movement speed
        var paddleWidth = 75; // Paddle width
        var paddleHeight = 10; // Paddle height
        var rightPressed = false; // Flag to check if right arrow key is pressed
        var leftPressed = false; // Flag to check if left arrow key is pressed
        var ballRadius = 10; // Ball radius
        var ballX = canvas.width / 2; // Ball starting position
        var ballY = canvas.height - 40; // Ball starting position
        var ballDX = 2; // Ball movement speed
        var ballDY = -2; // Ball movement speed
        var brickRowCount = 3; // Number of rows of bricks
        var brickColumnCount = 5; // Number of columns of bricks
        var brickWidth = 75; // Brick width
        var brickHeight = 20; // Brick height
        var brickPadding = 10; // Padding between each brick
        var brickOffsetTop = 30; // Top offset for bricks
        var brickOffsetLeft = 30; // Left offset for bricks

// Create a 2D array to hold the brick status
        var 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 }; // 1 represents active brick
            }
        }

// Function to draw the paddle on the canvas
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(x, y, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// Function to draw the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// Function to draw the bricks on the canvas
        function drawBricks() {
            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;
                        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();
                    }
                }
            }
        }

// Collision detection for ball and bricks
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var 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; // Reverse ball direction
                            b.status = 0; // Set brick status to 0 to mark it as destroyed
                        }
                    }
                }
            }
        }

// Function to update the canvas and game objects
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            drawBricks(); // Draw the bricks
            drawBall(); // Draw the ball
            drawPaddle(); // Draw the paddle
            collisionDetection(); // Detect collision between ball and bricks

// Reverse ball direction if it hits the 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) {
                // Check if the ball hits the paddle
                if (ballX > x && ballX < x + paddleWidth) {
                    ballDY = -ballDY;
                } else {
                    // Game over condition (ball falls below the paddle)
                    alert("Game Over!");
                    document.location.reload();
                }
            }

// Move the paddle left or right based on arrow key press
            if (rightPressed && x < canvas.width - paddleWidth) {
                x += dx;
            } else if (leftPressed && x > 0) {
                x -= dx;
            }

ballX += ballDX; // Update ball position
            ballY += ballDY; // Update ball position
            requestAnimationFrame(draw); // Render the updated canvas
        }

// Event listeners for arrow key press
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// Handle key down event
        function keyDownHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = true;
            } else if (e.keyCode == 37) {
                leftPressed = true;
            }
        }

// Handle key up event
        function keyUpHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = false;
            } else if (e.keyCode == 37) {
                leftPressed = false;
            }
        }

// Start the game
        draw();
    </script>
</body>
</html>