<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Color Match Puzzle</title>

    <style>

        body {

            display: flex;

            flex-direction: column;

            align-items: center;

            background: #f0f9ff;

            font-family: 'Arial Rounded MT Bold', Arial, sans-serif;

        }

        #game-board {

            display: grid;

            grid-template-columns: repeat(6, 1fr);

            gap: 5px;

            background: white;

            padding: 10px;

            border-radius: 15px;

            box-shadow: 0 0 20px rgba(0,0,0,0.1);

        }

        .tile {

            width: 60px;

            height: 60px;

            border-radius: 10px;

            cursor: pointer;

            transition: transform 0.2s;

        }

        .tile:hover {

            transform: scale(1.1);

        }

        .red { background: #ff6b6b; }

        .blue { background: #4ecdc4; }

        .green { background: #a8e6cf; }

        .yellow { background: #ffd700; }

        .purple { background: #d4a3e8; }

        #score {

            font-size: 24px;

            color: #333;

            margin: 20px;

        }

        button {

            padding: 10px 20px;

            font-size: 18px;

            background: #4ecdc4;

            border: none;

            border-radius: 25px;

            color: white;

            cursor: pointer;

            margin: 10px;

        }

    </style>

</head>

<body>

    <h1>🌈 Color Match Puzzle!</h1>

    <div id="score">Moves: <span id="move-counter">0</span></div>

    <div id="game-board"></div>

    <button onclick="resetGame()">New Game</button>

    <script>

        const COLORS = ['red', 'blue', 'green', 'yellow', 'purple'];

        const BOARD_SIZE = 6;

        let moves = 0;

        let selectedTile = null;

        let board = [];

        class Tile {

            constructor(color) {

                this.element = document.createElement('div');

                this.element.className = `tile ${color}`;

                this.color = color;

                this.element.addEventListener('click', () => this.handleClick());

            }

            handleClick() {

                if (!selectedTile) {

                    selectedTile = this;

                    this.element.style.border = '3px solid white';

                } else {

                    if (this.isAdjacent(selectedTile)) {

                        swapTiles(selectedTile, this);

                        checkMatches();

                        moves++;

                        document.getElementById('move-counter').textContent = moves;

                    }

                    selectedTile.element.style.border = '';

                    selectedTile = null;

                }

            }

            isAdjacent(otherTile) {

                const index1 = Array.from(this.element.parentNode.children).indexOf(this.element);

                const index2 = Array.from(otherTile.element.parentNode.children).indexOf(otherTile.element);

                const diff = Math.abs(index1 - index2);

                return diff === 1 || diff === BOARD_SIZE;

            }

        }

        function createBoard() {

            const boardElement = document.getElementById('game-board');

            boardElement.innerHTML = '';

            board = [];

            for (let i = 0; i < BOARD_SIZE * BOARD_SIZE; i++) {

                const color = COLORS[Math.floor(Math.random() * COLORS.length)];

                const tile = new Tile(color);

                boardElement.appendChild(tile.element);

                board.push(tile);

            }

        }

        function swapTiles(tile1, tile2) {

            const tempColor = tile1.color;

            tile1.color = tile2.color;

            tile2.color = tempColor;

            

            tile1.element.className = `tile ${tile1.color}`;

            tile2.element.className = `tile ${tile2.color}`;

        }

        function checkMatches() {

            // Check horizontal matches

            for (let row = 0; row < BOARD_SIZE; row++) {

                for (let col = 0; col < BOARD_SIZE - 2; col++) {

                    const index = row * BOARD_SIZE + col;

                    if (board[index].color === board[index + 1].color && 

                        board[index].color === board[index + 2].color) {

                        clearTiles([index, index + 1, index + 2]);

                    }

                }

            }

            // Check vertical matches

            for (let col = 0; col < BOARD_SIZE; col++) {

                for (let row = 0; row < BOARD_SIZE - 2; row++) {

                    const index = row * BOARD_SIZE + col;

                    if (board[index].color === board[index + BOARD_SIZE].color && 

                        board[index].color === board[index + BOARD_SIZE * 2].color) {

                        clearTiles([index, index + BOARD_SIZE, index + BOARD_SIZE * 2]);

                    }

                }

            }

        }

        function clearTiles(indices) {

            indices.forEach(index => {

                board[index].color = COLORS[Math.floor(Math.random() * COLORS.length)];

                board[index].element.className = `tile ${board[index].color}`;

                board[index].element.classList.add('pop');

                setTimeout(() => board[index].element.classList.remove('pop'), 300);

            });

        }

        function resetGame() {

            moves = 0;

            document.getElementById('move-counter').textContent = moves;

            createBoard();

        }

        // Initialize game

        resetGame();

    </script>

</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.