当前位置：首页 > article >正文

一个十字翻转小游戏

article 2024/11/27 13:35:56

有没有万能公式，我现在只会33 35这种简单的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Grid Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .grid {
            display: grid;
            border: 2px solid red; /* Outer border in red */
            margin-top: 20px;
        }
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid red; /* Red border for each cell */
            margin: 0;
            padding: 0;
            background-color: white;
            cursor: pointer;
        }
        .cell.black {
            background-color: black;
        }
        .controls {
            margin-bottom: 20px;
        }
        .controls input,
        .controls button {
            margin-right: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>Toggle Grid Game</h1>
    <div class="controls">
        <label for="rows">Rows:</label>
        <input type="number" id="rows" value="3" min="1" max="50">
        <label for="cols">Columns:</label>
        <input type="number" id="cols" value="3" min="1" max="50">
        <button onclick="initializeGrid()">Set Grid</button>
        <button onclick="fillAllBlack()">Fill All Black</button>
    </div>
    <div id="gridContainer"></div>
    <script>
        let rows = 3; // Default number of rows
        let cols = 3; // Default number of columns
        let grid = [];
        let clickCount = 0; // Counter for clicks

        const container = document.getElementById("gridContainer");

        // Function to initialize grid
        function initializeGrid() {
            rows = parseInt(document.getElementById("rows").value, 10);
            cols = parseInt(document.getElementById("cols").value, 10);
            clickCount = 0; // Reset click count

            // Initialize grid with random 0s and 1s
            grid = Array.from({ length: rows }, () => Array.from({ length: cols }, () => Math.random() < 0.5 ? 1 : 0));

            // Set grid layout styles dynamically
            container.style.gridTemplateRows = `repeat(${rows}, 30px)`; // Fixed height for rows
            container.style.gridTemplateColumns = `repeat(${cols}, 30px)`; // Fixed width for columns
            container.classList.add("grid");

            // Render grid
            createGrid();
        }

        // Function to render grid
        function createGrid() {
            container.innerHTML = ""; // Clear existing grid
            grid.forEach((row, rowIndex) => {
                row.forEach((cell, colIndex) => {
                    const button = document.createElement("button");
                    button.className = `cell ${cell ? "black" : ""}`; // Black if 1, white if 0
                    button.onclick = () => toggleCell(rowIndex, colIndex);
                    container.appendChild(button);
                });
            });
            checkWin(); // Check for win condition after rendering
        }

        // Toggle cell and adjacent cells
        function toggleCell(x, y) {
            clickCount++; // Increment click count
            grid[x][y] ^= 1;
            if (x > 0) grid[x - 1][y] ^= 1; // Top
            if (x < rows - 1) grid[x + 1][y] ^= 1; // Bottom
            if (y > 0) grid[x][y - 1] ^= 1; // Left
            if (y < cols - 1) grid[x][y + 1] ^= 1; // Right
            createGrid(); // Re-render the grid
        }

        // Fill all cells with black
        function fillAllBlack() {
            grid = Array.from({ length: rows }, () => Array.from({ length: cols }, () => 1)); // All 1s
            clickCount = 0; // Reset click count
            createGrid(); // Re-render the grid
        }

        // Check if all cells are white
        function checkWin() {
            const allWhite = grid.every(row => row.every(cell => cell === 0)); // Check if all cells are 0
            if (allWhite) {
                setTimeout(() => alert(`Congratulations! You turned all the cells white! 🎉\nYou completed the game in ${clickCount} steps.`), 100);
            }
        }

        // Initial render
        initializeGrid();
    </script>
</body>
</html>