this is the code of the game : <!DOCTYPE html>
<html>
<head>
    <title>Sokoban Emoji Game with Multiple Players</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game {
            display: inline-block;
            font-size: 24px;
            line-height: 24px;
            margin-top: 20px;
        }
        .row {
            height: 24px;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
        }
        #moves {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Sokoban Game with Multiple Players</h1>
    <div id="game"></div>
    <div id="moves">Moves: 0</div>
    <button onclick="resetGame()">Reset Game</button>

    <script>
        const WALL = '⬛️';
        const BOX = '📦';
        const GOAL = '❌';
        const BOX_ON_GOAL = '✅';
        const FLOOR = '⬜️';

        const PLAYER_SYMBOLS = ['😀', '😎', '😊', '😉', '😁']; // Add more symbols if needed

        let levelTemplate = [
            // A bigger map with 3 players
            ['⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️'],
            ['⬛️', '⬜️', '⬜️', '⬜️', '⬜️', '⬜️', '📦', '⬜️', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '📦', '⬜️', '⬛️', '⬜️', '⬜️', '⬜️', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '⬛️', '❌', '⬛️', '⬛️', '⬛️', '📦', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '⬛️', '⬜️', '⬜️', '⬜️', '📦', '⬛️', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '⬜️', '⬜️', '📦', '⬛️', '⬜️', '⬜️', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '📦', '⬛️', '⬜️', '⬛️', '📦', '⬛️', '❌', '⬛️'],
            ['⬛️', '⬜️', '⬜️', '⬛️', '⬜️', '⬜️', '⬜️', '📦', '⬜️', '⬛️'],
            ['⬛️', '⬜️', '❌', '⬜️', '📦', '⬜️', '⬛️', '⬜️', '⬜️', '⬛️'],
            ['⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️', '⬛️'],
        ];

        let level = [];
        let playerPositions = [];
        let activePlayerIndex = 0; // Index to keep track of the active player
        let moves = 0;

        function initializeLevel() {
            level = JSON.parse(JSON.stringify(levelTemplate)); // Deep copy of the level template
            playerPositions = [];

            // Scan the level to find players and store their positions
            for (let y = 0; y < level.length; y++) {
                for (let x = 0; x < level[y].length; x++) {
                    let cell = level[y][x];
                    // Check for player symbols
                    if (PLAYER_SYMBOLS.includes(cell)) {
                        let playerIndex = PLAYER_SYMBOLS.indexOf(cell);
                        playerPositions[playerIndex] = { x: x, y: y };
                    }
                }
            }

            // If no players are defined in the map data, place three players at default positions
            if (playerPositions.length === 0) {
                playerPositions = [
                    { x: 1, y: 1 },
                    { x: 2, y: 1 },
                    { x: 1, y: 2 },
                ];
                // Place the players on the map
                for (let i = 0; i < playerPositions.length; i++) {
                    level[playerPositions[i].y][playerPositions[i].x] = PLAYER_SYMBOLS[i];
                }
            }
        }

        function drawGame() {
            let gameDiv = document.getElementById('game');
            gameDiv.innerHTML = '';
            for (let y = 0; y < level.length; y++) {
                let rowDiv = document.createElement('div');
                rowDiv.className = 'row';
                for (let x = 0; x < level[y].length; x++) {
                    let cell = level[y][x];
                    rowDiv.innerHTML += cell;
                }
                gameDiv.appendChild(rowDiv);
            }
            document.getElementById('moves').textContent = 'Moves: ' + moves + ' | Active Player: ' + (activePlayerIndex + 1);
        }

        function resetGame() {
            initializeLevel();
            activePlayerIndex = 0;
            moves = 0;
            drawGame();
        }

        function isWin() {
            for (let y = 0; y < level.length; y++) {
                for (let x = 0; x < level[y].length; x++) {
                    if (level[y][x] === BOX) {
                        return false;
                    }
                }
            }
            return true;
        }

        function move(dx, dy) {
            let playerSymbol = PLAYER_SYMBOLS[activePlayerIndex];
            let currentPosition = playerPositions[activePlayerIndex];
            let newX = currentPosition.x + dx;
            let newY = currentPosition.y + dy;

            // Out of bounds check
            if (newY < 0 || newY >= level.length || newX < 0 || newX >= level[0].length) {
                return;
            }

            let nextCell = level[newY][newX];

            if (nextCell === WALL) return;

            // Check if the next position is occupied by another player
            for (let i = 0; i < playerPositions.length; i++) {
                if (i !== activePlayerIndex && newX === playerPositions[i].x && newY === playerPositions[i].y) {
                    return; // Cannot move into another player's space
                }
            }

            if (nextCell === FLOOR || nextCell === GOAL) {
                // Move player
                level[currentPosition.y][currentPosition.x] = FLOOR;
                currentPosition.x = newX;
                currentPosition.y = newY;
                level[newY][newX] = playerSymbol;
                moves++;
            } else if (nextCell === BOX || nextCell === BOX_ON_GOAL) {
                // Try to push the box
                let boxNewX = newX + dx;
                let boxNewY = newY + dy;

                // Out of bounds check for the box
                if (boxNewY < 0 || boxNewY >= level.length || boxNewX < 0 || boxNewX >= level[0].length) {
                    return;
                }

                let nextNextCell = level[boxNewY][boxNewX];

                // Check if the box can be pushed into the next cell
                if (nextNextCell === FLOOR || nextNextCell === GOAL) {
                    // Move box
                    if (nextNextCell === GOAL) {
                        level[boxNewY][boxNewX] = BOX_ON_GOAL;
                    } else {
                        level[boxNewY][boxNewX] = BOX;
                    }

                    level[newY][newX] = playerSymbol;
                    level[currentPosition.y][currentPosition.x] = FLOOR;
                    currentPosition.x = newX;
                    currentPosition.y = newY;
                    moves++;
                }
            }

            drawGame();

            if (isWin()) {
                alert('Congratulations! You solved the puzzle in ' + moves + ' moves.');
                resetGame();
            }
        }

        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowUp') {
                move(0, -1);
                event.preventDefault();
            } else if (event.key === 'ArrowDown') {
                move(0, 1);
                event.preventDefault();
            } else if (event.key === 'ArrowLeft') {
                move(-1, 0);
                event.preventDefault();
            } else if (event.key === 'ArrowRight') {
                move(1, 0);
                event.preventDefault();
            } else if (event.key === ' ') {
                // Switch active player
                activePlayerIndex = (activePlayerIndex + 1) % playerPositions.length;
                drawGame();
                event.preventDefault();
            }
        });

        // Initialize and draw the game at the start
     
        resetGame();
    </script>
</body>
</html>