Control a cat and play block breaker.'s game

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

No:12508

←

Prev Next

→

Control a cat and play block breaker.
Developer User5090｜Date and time 23/8/18 22:31:51
Build time 16.634 sec｜Game capacity 4.656KB｜

Script

🐱

🟡

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!doctype html>
<html>
<head>
    <title>猫のブロック崩し</title>
    <style>
        #cat {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            font-size: 30px;
        }

#ball {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
        }

.brick {
            width: 80px;
            height: 30px;
            background-color: blue;
            border-radius: 5px;
            margin: 5px;
            display: inline-block;
        }

.container {
            width: 400px;
            margin: 0 auto;
            padding-top: 100px;
        }

#start {
            display: none;
        }

#score {
            text-align: center;
        }

</style>
</head>
<body>
    <div class="container">
        <div id="cat">🐱</div>
        <div id="ball">🟡</div>
        <div id="bricks"></div>
        <div id="score">Score: <span id="scoreValue">0</span></div>
    </div>

const containerWidth = 400;
        const brickWidth = 80;
        const brickHeight = 30;
        const brickMargin = 5;
        const catSpeed = 5;
        const ballSpeed = 5;

let catPos = containerWidth / 2;
        let ballPosX = containerWidth / 2;
        let ballPosY = 250;
        let ballSpeedX = 4;
        let ballSpeedY = -4;

let bricks = [];
        let bricksLeft = 0;

const updateCatPos = (x) => {
            if (x >= 0 && x <= containerWidth - 100) {
                cat.style.left = x + "px";
                catPos = x;
            }
        };

const updateBallPos = () => {
            ballPosX += ballSpeedX;
            ballPosY += ballSpeedY;

if (ballPosX >= containerWidth - 20 || ballPosX <= 0) {
                ballSpeedX *= -1;
            }

if (ballPosY <= 0) {
                ballSpeedY *= -1;
            }

if (ballPosY >= window.innerHeight) {
                clearInterval(gameInterval)
                alert("Game Over! Your score is " + score.innerText);
            }

if (ballPosY >= window.innerHeight - 70 && ballPosX >= catPos - 20 && ballPosX <= catPos + 80) {
                ballSpeedY *= -1;
            }

bricks.forEach((brick, i) => {
                const brickRect = brick.getBoundingClientRect();
                const ballRect = ball.getBoundingClientRect();
                const { x, y, width } = brickRect;

if (
                    ballRect.left >= x &&
                    ballRect.right <= x + width &&
                    ballRect.top + 10 <= y + brickHeight &&
                    ballRect.top + brickHeight >= y + brickHeight
                ) {
                    ballSpeedY *= -1;
                    brick.style.visibility = "hidden";
                    bricks.splice(i, 1);
                    bricksLeft--;
                    score.innerText = parseInt(score.innerText) + 10;

if (bricksLeft === 0) {
                        clearInterval(gameInterval);
                        alert("Congratulations! You won! Your score is " + score.innerText);
                    }
                }
            });

ball.style.left = ballPosX + "px";
            ball.style.top = ballPosY + "px";
        };

const createBricks = () => {
            const numBricks = Math.floor((containerWidth - brickMargin) / (brickWidth + brickMargin)) - 1;

for (let i = 0; i < numBricks; i++) {
                const brick = document.createElement("div");
                brick.classList.add("brick");
                bricksContainer.appendChild(brick);
                bricks.push(brick);
                bricksLeft++;
            }
        };

const handleTouchMove = (e) => {
            updateCatPos(e.touches[0].clientX - 50);
        };

const startGame = () => {
            createBricks();
            updateCatPos(containerWidth / 2);

let gameInterval = setInterval(() => {
                updateBallPos();
            }, 20);
        };

document.getElementById("start").addEventListener("click", startGame);
        document.addEventListener("touchmove", handleTouchMove, { passive: false });
    </script>
</body>
</html>