the following game code is for a 3d snake game it works great but the edges of each face aren't correctly connected and the face that the snakes head is on isn't always the one facing the player. for a hypothetical example let's say I travel from the forward face upwards to the up face well since they aren't connected up correctly i'd end up on the wrong face like let's say the back face or the right face. I want all the faces to be connected up properly please and thank you: <!DOCTYPE html>
<html>
<head>
    <title>3D Snake Game on a Cube</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #333;
        }

        #cube-container {
            position: absolute;
            width: 80vmin;
            height: 80vmin;
            top: 50%;
            left: 50%;
            margin-top: -40vmin;
            margin-left: -40vmin;
            transform-style: preserve-3d;
            perspective: 800px;
        }

        #cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
        }

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

        .front  { transform: translateZ(40vmin); }
        .back   { transform: rotateY(180deg) translateZ(40vmin); }
        .right  { transform: rotateY(90deg) translateZ(40vmin); }
        .left   { transform: rotateY(-90deg) translateZ(40vmin); }
        .top    { transform: rotateX(90deg) translateZ(40vmin); }
        .bottom { transform: rotateX(-90deg) translateZ(40vmin); }

        .cell {
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            position: relative;
        }

        .cell::after {
            content: '';
            display: block;
            padding-top: 100%; /* Makes cells square */
        }

        /* Styles for snake and apple */
        .snake {
            background-color: green;
        }

        .apple {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="cube-container">
        <div id="cube">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>

    <script>
        window.onload = function() {
            const faces = ['front', 'back', 'right', 'left', 'top', 'bottom'];
            const cubeFaces = {};
            faces.forEach(faceName => {
                cubeFaces[faceName] = document.querySelector(`.${faceName}`);
                createGrid(cubeFaces[faceName]);
            });

            function createGrid(faceElement) {
                faceElement.style.display = 'grid';
                faceElement.style.gridTemplateRows = 'repeat(10, 1fr)';
                faceElement.style.gridTemplateColumns = 'repeat(10, 1fr)';
                for (let row = 0; row < 10; row++) {
                    for (let col = 0; col < 10; col++) {
                        let cell = document.createElement('div');
                        cell.classList.add('cell');
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        faceElement.appendChild(cell);
                    }
                }
            }

            let game = {
                snake: [],
                direction: null,
                apple: null,
                isRunning: false,
                cubeFaces: cubeFaces
            };

            let gameLoop;

            document.addEventListener('keydown', function(e) {
                if (!game.isRunning && e.code === 'Space') {
                    startGame();
                } else if (game.isRunning) {
                    switch(e.key) {
                        case 'w':
                            setDirection('up');
                            break;
                        case 's':
                            setDirection('down');
                            break;
                        case 'a':
                            setDirection('left');
                            break;
                        case 'd':
                            setDirection('right');
                            break;
                    }
                }
            });

            function startGame() {
                game.isRunning = true;
                game.snake = [];
                game.direction = getRandomDirection();
                game.snake.push({face: 'front', row: 5, col: 5}); // Start at center of front face
                placeApple();
                updateView();
                gameLoop = setInterval(updateGame, 300); // Update every 300ms
            }

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

            function setDirection(dir) {
                const oppositeDirections = {
                    'up': 'down',
                    'down': 'up',
                    'left': 'right',
                    'right': 'left'
                };
                // Prevent snake from going back into itself
                if (game.direction !== oppositeDirections[dir]) {
                    game.direction = dir;
                }
            }

            function placeApple() {
                let faceNames = ['front', 'back', 'left', 'right', 'top', 'bottom'];
                let validCell = false;
                while (!validCell) {
                    let randomFace = faceNames[Math.floor(Math.random() * faceNames.length)];
                    let row = Math.floor(Math.random() * 10);
                    let col = Math.floor(Math.random() * 10);
                    let occupied = game.snake.some(segment => segment.face === randomFace && segment.row === row && segment.col === col);
                    if (!occupied) {
                        game.apple = {face: randomFace, row: row, col: col};
                        validCell = true;
                    }
                }
            }

            function updateGame() {
                // Move snake
                let head = game.snake[0];
                let newHead = {...head};
                switch(game.direction) {
                    case 'up':
                        newHead.row -= 1;
                        break;
                    case 'down':
                        newHead.row += 1;
                        break;
                    case 'left':
                        newHead.col -= 1;
                        break;
                    case 'right':
                        newHead.col += 1;
                        break;
                }
                // Handle wrapping around the cube faces
                newHead = wrapPosition(newHead, game.direction);

                // Check for collisions
                if (isCollision(newHead)) {
                    gameOver();
                    return;
                }

                game.snake.unshift(newHead); // Add new head

                // Check for apple
                if (newHead.face === game.apple.face && newHead.row === game.apple.row && newHead.col === game.apple.col) {
                    placeApple(); // Eat apple and place a new one
                } else {
                    game.snake.pop(); // Remove tail
                }

                updateView();
            }

            function wrapPosition(pos, direction) {
                let face = pos.face;
                let row = pos.row;
                let col = pos.col;

                // Handle wrapping to adjacent faces
                if (row < 0) {
                    // Move to adjacent face
                    switch(face) {
                        case 'front':
                            face = 'top';
                            row = 9;
                            break;
                        case 'back':
                            face = 'top';
                            row = 9;
                            break;
                        case 'top':
                            face = 'back';
                            row = 9;
                            break;
                        case 'bottom':
                            face = 'front';
                            row = 0;
                            break;
                        case 'left':
                            face = 'top';
                            row = 9;
                            break;
                        case 'right':
                            face = 'top';
                            row = 9;
                            break;
                    }
                } else if (row > 9) {
                    switch(face) {
                        case 'front':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'back':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'top':
                            face = 'front';
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'back';
                            row = 0;
                            break;
                        case 'left':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'right':
                            face = 'bottom';
                            row = 0;
                            break;
                    }
                } else if (col < 0) {
                    switch(face) {
                        case 'front':
                            face = 'left';
                            col = 9;
                            break;
                        case 'back':
                            face = 'right';
                            col = 9;
                            break;
                        case 'left':
                            face = 'back';
                            col = 9;
                            break;
                        case 'right':
                            face = 'front';
                            col = 9;
                            break;
                        case 'top':
                            face = 'left';
                            col = row;
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'left';
                            col = 9 - row;
                            row = 9;
                            break;
                    }
                } else if (col > 9) {
                    switch(face) {
                        case 'front':
                            face = 'right';
                            col = 0;
                            break;
                        case 'back':
                            face = 'left';
                            col = 0;
                            break;
                        case 'left':
                            face = 'front';
                            col = 0;
                            break;
                        case 'right':
                            face = 'back';
                            col = 0;
                            break;
                        case 'top':
                            face = 'right';
                            col = 9 - row;
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'right';
                            col = row;
                            row = 9;
                            break;
                    }
                }

                return {face: face, row: row, col: col};
            }

            function isCollision(pos) {
                // Check if collides with self
                for (let i = 0; i < game.snake.length; i++) {
                    let segment = game.snake[i];
                    if (pos.face === segment.face && pos.row === segment.row && pos.col === segment.col) {
                        return true;
                    }
                }
                return false;
            }

            function gameOver() {
                clearInterval(gameLoop);
                game.isRunning = false;
                alert('Game Over! Press Space to Restart.');
            }

            function updateView() {
                // Clear all cells
                document.querySelectorAll('.cell').forEach(cell => {
                    cell.classList.remove('snake', 'apple');
                });
                // Draw snake
                game.snake.forEach(segment => {
                    let faceElement = game.cubeFaces[segment.face];
                    let cell = faceElement.querySelector(`.cell[data-row='${segment.row}'][data-col='${segment.col}']`);
                    if (cell) {
                        cell.classList.add('snake');
                    }
                });
                // Draw apple
                let appleFace = game.cubeFaces[game.apple.face];
                let appleCell = appleFace.querySelector(`.cell[data-row='${game.apple.row}'][data-col='${game.apple.col}']`);
                if (appleCell) {
                    appleCell.classList.add('apple');
                }
                // Rotate cube to show the face with the snake's head
                rotateCubeToFace(game.snake[0].face);
            }

            function rotateCubeToFace(faceName) {
                let rotations = {
                    'front': 'rotateX(0deg) rotateY(0deg)',
                    'back': 'rotateX(0deg) rotateY(180deg)',
                    'right': 'rotateX(0deg) rotateY(-90deg)',
                    'left': 'rotateX(0deg) rotateY(90deg)',
                    'top': 'rotateX(90deg) rotateY(0deg)',
                    'bottom': 'rotateX(-90deg) rotateY(0deg)'
                };
                let cube = document.getElementById('cube');
                cube.style.transform = rotations[faceName];
            }
        }
    </script>
</body>
</html>