Match-3 Puzzle Game: Create a standalone HTML file containing CSS and JavaScript to generate a classic 8x8 grid match-3 game. The game needs to showcase the following core modules through a dynamic grid and click-and-swap interactions
Match-3 Puzzle Game: Create a standalone HTML file containing CSS and JavaScript to generate a classic 8x8 grid match-3 game. The game needs to showcase the following core modules through a dynamic grid and click-and-swap interactions: 1. **Game Board System**: Use CSS Grid layout to generate an 8x8 square game board, randomly assign a color to each square, and record the board state through a two-dimensional array. 2. **Core Interaction Logic**: Listen for click events on squares, implement the judgment and execution of position swapping between adjacent (up, down, left, right) squares. 3. **Elimination Judgment and Chain Reaction**: After swapping, traverse the game board to detect whether there are three or more consecutive squares of the same color in the horizontal or vertical direction, eliminate them and accumulate scores; after elimination, trigger the squares above to fall, generate new squares at the top, and loop the detection until no more eliminations can be made. 4. **Scoring and State Management**: Implement a scoring system (e.g., 10 points for each eliminated square), update the score display in real-time, and can be extended with game timing and end judgment. The interface should adopt a bright and lively cartoon style, and the code should be integrated into a single file.
