fix the following code the problems are as follows: the snake can't travel to all the faces / sides of the cube it gets stuck against the edges as if they're a wall. 
<!DOCTYPE html>
<html>
<head>
    <title>3D Snake Game on Cube Surface</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle at center, #000428, #004e92);
        }

        #game-container {
            perspective: 1000px;
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #cube {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: translate(-50%, -50%) rotateX(-20deg) rotateY(45deg);
            transition: transform 0.5s ease-out;
        }

        .face {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
        }

        /* Position each face */
        #face-0 { /* Front */
            transform: rotateY(0deg) translateZ(150px);
        }
        #face-1 { /* Back */
            transform: rotateY(180deg) translateZ(150px);
        }
        #face-2 { /* Right */
            transform: rotateY(90deg) translateZ(150px);
        }
        #face-3 { /* Left */
            transform: rotateY(-90deg) translateZ(150px);
        }
        #face-4 { /* Top */
            transform: rotateX(90deg) translateZ(150px);
        }
        #face-5 { /* Bottom */
            transform: rotateX(-90deg) translateZ(150px);
        }

        /* Snake and apple cells */
        .cell {
            position: absolute;
            width: 30px; /* Assuming grid size 10x10 */
            height: 30px;
            box-sizing: border-box;
        }

        .snake {
            background: limegreen;
        }

        .apple {
            background: red;
        }

        /* Additional styles */
        #message {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 24px;
        }

    </style>
</head>
<body>
    <div id="game-container">
        <div id="cube">
            <div class="face" id="face-0"></div>
            <div class="face" id="face-1"></div>
            <div class="face" id="face-2"></div>
            <div class="face" id="face-3"></div>
            <div class="face" id="face-4"></div>
            <div class="face" id="face-5"></div>
        </div>
        <div id="message">Press SPACE to start the game</div>
    </div>
    <script>
        (function() {
            const gridSize = 10; // 10x10 grid on each face
            const cellSize = 30; // Must match CSS
            const faces = [0,1,2,3,4,5];
            const cube = document.getElementById('cube');
            const faceElements = faces.map(faceIndex => document.getElementById('face-' + faceIndex));

            let snake = [];
            let direction = null;
            let apple = null;
            let gameInterval = null;
            let isGameOver = false;
            let isGameStarted = false;
            const messageElement = document.getElementById('message');

            const faceAdjacency = {
                0: { // Front
                    up: {face:4, x:'x', y: gridSize - 1 - 'x'},
                    down: {face:5, x:'x', y:'x'},
                    left: {face:3, x: gridSize - 1, y:'y'},
                    right: {face:2, x: 0, y:'y'}
                },
                1: { // Back
                    up: {face:4, x: gridSize - 1 - 'x', y: 0},
                    down: {face:5, x: gridSize - 1 - 'x', y: gridSize - 1},
                    left: {face:2, x: gridSize - 1, y: 'y'},
                    right: {face:3, x: 0, y: 'y'}
                },
                2: { // Right
                    up: {face:4, x: 'y', y: 'x'},
                    down: {face:5, x: gridSize - 1 - 'y', y: 'x'},
                    left: {face:0, x: gridSize - 1, y: 'y'},
                    right: {face:1, x: 0, y: 'y'}
                },
                3: { // Left
                    up: {face:4, x: gridSize - 1 - 'y', y: gridSize - 1 - 'x'},
                    down: {face:5, x: 'y', y: gridSize - 1 - 'x'},
                    left: {face:1, x: gridSize - 1, y: 'y'},
                    right: {face:0, x: 0, y: 'y'}
                },
                4: { // Top
                    up: {face:1, x: 'x', y: 0},
                    down: {face:0, x: 'x', y: 0},
                    left: {face:3, x:'x', y:0},
                    right: {face:2, x: 'x', y: 0}
                },
                5: { // Bottom
                    up: {face:0, x: 'x', y: gridSize - 1},
                    down: {face:1, x: 'x', y: gridSize -1},
                    left: {face:3, x:'x', y: gridSize - 1},
                    right: {face:2, x: 'x', y: gridSize -1}
                }
            };

            function initGame() {
                // Clear previous game
                snake.forEach(segment => {
                    removeCell(segment);
                });
                if (apple) removeCell(apple);

                snake = [];
                direction = null;
                isGameOver = false;
                isGameStarted = false;
                messageElement.textContent = "Press SPACE to start the game";

                // Initialize snake starting position
                const startingFace = Math.floor(Math.random() * 6);
                const startingX = Math.floor(gridSize / 2);
                const startingY = Math.floor(gridSize / 2);
                direction = getRandomDirection();

                snake.push({face: startingFace, x: startingX, y: startingY});

                drawCell(snake[0], 'snake');

                spawnApple();
            }

            function getRandomDirection() {
                const dirs = ['up', 'down', 'left', 'right'];
                return dirs[Math.floor(Math.random() * dirs.length)];
            }

            function spawnApple() {
                let validCell = false;
                while (!validCell) {
                    const face = Math.floor(Math.random() * 6);
                    const x = Math.floor(Math.random() * gridSize);
                    const y = Math.floor(Math.random() * gridSize);
                    // Check if apple is on snake
                    if (!snake.some(segment => segment.face === face && segment.x === x && segment.y === y)) {
                        apple = {face, x, y};
                        validCell = true;
                    }
                }
                drawCell(apple, 'apple');
            }

            function drawCell(cell, className) {
                const cellDiv = document.createElement('div');
                cellDiv.classList.add('cell', className);
                cellDiv.style.left = (cell.x * cellSize) + 'px';
                cellDiv.style.top = (cell.y * cellSize) + 'px';
                faceElements[cell.face].appendChild(cellDiv);
                cell.element = cellDiv;
            }

            function removeCell(cell) {
                if (cell.element && cell.element.parentNode) {
                    cell.element.parentNode.removeChild(cell.element);
                    cell.element = null;
                }
            }

            function gameLoop() {
                if (isGameOver) return;

                // Calculate new head position
                const head = snake[0];
                let newHead = {face: head.face, x: head.x, y: head.y};

                switch (direction) {
                    case 'up':
                        newHead.y -=1;
                        break;
                    case 'down':
                        newHead.y +=1;
                        break;
                    case 'left':
                        newHead.x -=1;
                        break;
                    case 'right':
                        newHead.x +=1;
                        break;
                    default:
                        return; // No movement if direction is null
                }

                if (newHead.x < 0 || newHead.x >= gridSize || newHead.y < 0 || newHead.y >= gridSize) {
                    // Need to move to adjacent face
                    const adjacency = faceAdjacency[newHead.face][direction];
                    const adjFace = adjacency.face;
                    let adjX = adjacency.x;
                    let adjY = adjacency.y;

                    adjX = (typeof adjX === 'number') ? adjX : eval(adjX.replace(/'x'/g, head.x).replace(/'y'/g, head.y));
                    adjY = (typeof adjY === 'number') ? adjY : eval(adjY.replace(/'x'/g, head.x).replace(/'y'/g, head.y));

                    newHead.face = adjFace;
                    newHead.x = adjX;
                    newHead.y = adjY;
                }

                // Check collision with self
                if (snake.some(segment => segment.face === newHead.face && segment.x === newHead.x && segment.y === newHead.y)) {
                    gameOver();
                    return;
                }

                // Insert new head
                snake.unshift(newHead);
                drawCell(newHead, 'snake');

                // Check if apple is eaten
                if (apple.face === newHead.face && apple.x === newHead.x && apple.y === newHead.y) {
                    removeCell(apple);
                    spawnApple();
                } else {
                    // Remove tail
                    const tail = snake.pop();
                    removeCell(tail);
                }

                // Rotate cube to show the face with snake's head
                rotateCubeToFace(newHead.face);
            }

            function rotateCubeToFace(face){
                // Reset transform
                cube.style.transform = `translate(-50%, -50%)`;

                // Apply rotation
                let rotationX = 0;
                let rotationY = 0;
                switch(face){
                    case 0: // Front
                        rotationY = 0;
                        break;
                    case 1: // Back
                        rotationY = 180;
                        break;
                    case 2: // Right
                        rotationY = -90;
                        break;
                    case 3: // Left
                        rotationY = 90;
                        break;
                    case 4: // Top
                        rotationX = -90;
                        break;
                    case 5: // Bottom
                        rotationX = 90;
                        break;
                }
                cube.style.transform += ` rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
            }

            function gameOver() {
                isGameOver = true;
                clearInterval(gameInterval);
                messageElement.textContent = "Game Over! Press SPACE to restart";
            }

            // Handle key input
            document.addEventListener('keydown', function(e) {
                if (isGameOver && e.code === 'Space') {
                    initGame();
                    isGameStarted = true;
                    messageElement.textContent = "";
                    gameInterval = setInterval(gameLoop, 300);
                }

                if (!isGameStarted && e.code === 'Space') {
                    isGameStarted = true;
                    messageElement.textContent = "";
                    gameInterval = setInterval(gameLoop, 300);
                }

                if (e.key === 'w' || e.key === 'ArrowUp') {
                    if (direction !== 'down') direction = 'up';
                } else if (e.key === 's' || e.key === 'ArrowDown') {
                    if (direction !== 'up') direction = 'down';
                } else if (e.key === 'a' || e.key === 'ArrowLeft') {
                    if (direction !== 'right') direction = 'left';
                } else if (e.key === 'd' || e.key === 'ArrowRight') {
                    if (direction !== 'left') direction = 'right';
                }
            });

            // Start the game
            initGame();

        })();
    </script>
</body>
</html>