Block breaker Terri's edition, black screen's game

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

No:37856

←

Prev Next

→

Block breaker Terri's edition, black screen
Developer User17064｜Date and time 24/1/21 18:25:03
Build time 18.174 sec｜Game capacity 5.595KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker Terri's Edition</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            background: black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<script>
    // Getting the canvas element
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

// Initial game state
    var ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 2, dy: -2, radius: 10 };
    var paddle = { x: (canvas.width - 75) / 2, width: 75, height: 10, rightPressed: false, leftPressed: false };
    var bricks = [];
    var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var score = 0;
    var lives = 3;

// Generate bricks for the game
    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 };
        }
    }

// Key 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") {
            paddle.rightPressed = true;
        } else if (e.key === "Left" || e.key === "ArrowLeft") {
            paddle.leftPressed = true;
        }
    }

function keyUpHandler(e) {
        if (e.key === "Right" || e.key === "ArrowRight") {
            paddle.rightPressed = false;
        } else if (e.key === "Left" || e.key === "ArrowLeft") {
            paddle.leftPressed = false;
        }
    }

// Collision detection function for the ball and the bricks
    function collisionDetection() {
        for (var c = 0; c < brickColumnCount; c++) {
            for (var r = 0; r < brickRowCount; r++) {
                var brick = bricks[c][r];
                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++;
                        if (score === brickRowCount * brickColumnCount) {
                            alert("Congratulations! You won!");
                            document.location.reload();
                        }
                    }
                }
            }
        }
    }

// Draw the ball on the canvas
    function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = "#FFFFFF";
        ctx.fill();
        ctx.closePath();
    }

// Draw the paddle on the canvas
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
        ctx.fillStyle = "#FFFFFF";
        ctx.fill();
        ctx.closePath();
    }

// 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 = "#FFFFFF";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }

// Update game state and draw everything on the canvas
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        drawBricks();
        collisionDetection();

// Ball movement and collision detection with walls
        if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
            ball.dx = -ball.dx;
        }
        if (ball.y + ball.dy < ball.radius) {
            ball.dy = -ball.dy;
        } else if (ball.y + ball.dy > canvas.height - ball.radius) {
            if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                ball.dy = -ball.dy;
            } else {
                lives--;
                if (!lives) {
                    alert("Game Over!");
                    document.location.reload();
                } else {
                    ball.x = canvas.width / 2;
                    ball.y = canvas.height - 30;
                    ball.dx = 2;
                    ball.dy = -2;
                    paddle.x = (canvas.width - paddle.width) / 2;
                }
            }
        }

// Paddle movement
        if (paddle.rightPressed && paddle.x < canvas.width - paddle.width) {
            paddle.x += 7;
        } else if (paddle.leftPressed && paddle.x > 0) {
            paddle.x -= 7;
        }

ball.x += ball.dx;
        ball.y += ball.dy;

requestAnimationFrame(draw);
    }

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