Block breaker But there's rising acid's game

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

No:44790

←

Prev Next

→

Block breaker But there's rising acid
Developer User19470｜Date and time 24/2/19 5:44:54
Build time 12.095 sec｜Game capacity 5.208KB｜

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 - Acid Edition</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

let ball = {
            x: canvas.width / 2,
            y: canvas.height - 30,
            radius: 10,
            dx: 2,
            dy: -2
        };

let paddle = {
            width: 75,
            height: 10,
            x: (canvas.width - 75) / 2,
            dx: 7
        };

let bricks = [];
        const brickRowCount = 4;
        const brickColumnCount = 6;
        const brickWidth = 65;
        const brickHeight = 20;

let gameInterval;
        let acidInterval;
        let acidLevel = -1;

function drawBall() {
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fillStyle = 'red';
            ctx.fill();
            ctx.closePath();
        }

function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.closePath();
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPaddle();
            drawBricks();
            checkCollision();
            movePaddle();
            moveBall();
        }

function moveBall() {
            ball.x += ball.dx;
            ball.y += ball.dy;

if (ball.x + ball.radius > canvas.width || 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 > canvas.height) {
                clearInterval(gameInterval);
                clearInterval(acidInterval);
                alert('Game Over!');
            }
        }

function movePaddle() {
            if (rightPressed && paddle.x < canvas.width - paddle.width) {
                paddle.x += paddle.dx;
            } else if (leftPressed && paddle.x > 0) {
                paddle.x -= paddle.dx;
            }
        }

function checkCollision() {
            if (ball.y + ball.dy - ball.radius < 0) {
                ball.dy = -ball.dy;
            }

if (ball.y + ball.dy + ball.radius > canvas.height - paddle.height) {
                if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                    ball.dy = -ball.dy;
                }
            }

bricks.forEach(brick => {
                if (!brick.isHit) {
                    if (ball.x > brick.x && ball.x < brick.x + brickWidth && ball.y > brick.y && ball.y < brick.y + brickHeight) {
                        ball.dy = -ball.dy;
                        brick.isHit = true;
                    }
                }
            });

if (bricks.every(brick => brick.isHit)) {
                clearInterval(gameInterval);
                clearInterval(acidInterval);
                alert('You Win!');
            }
        }

let rightPressed = false;
        let leftPressed = false;

startGame();
    </script>
</body>

</html>