master

分支 (1)

管理

管理

master

one
/
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消灭方块</title>
    <style>
        #gameBoard {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            position: relative;
            border: 2px solid #000;
        }
        .block {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameBoard"></div>
    <script>
        const gameBoard = document.getElementById('gameBoard');
        const blockCount = 9;
        let score = 0;

        function createBlock(index) {
            const block = document.createElement('div');
            block.classList.add('block');
            block.style.left = (index % 3) * 100 + 'px';
            block.style.top = Math.floor(index / 3) * 100 + 'px';
            block.addEventListener('click', () => {
                block.remove();
                score++;
                document.getElementById('score').innerText = `Score: ${score}`;
                if (document.querySelectorAll('.block').length === 0) {
                    alert('You win!');
                }
            });
            gameBoard.appendChild(block);
        }

        for (let i = 0; i < blockCount; i++) {
            createBlock(i);
        }
    </script>
</body>
</html>