fix this with a correct cube wrapping or you can make it the same and instead keep track of last snake direction to decide where it ends up either way I want the snakes navigation on the cube to be consistent provide me the full complete correct playable code and I'll give you a treat for your hard work <3 :
<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>