Okay, let's create this emotional emoji Snake game! Emoji Snake 🐍

Emoji Snake

Mood Chart

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; font-family: sans-serif; margin: 0; } .game-container { text-align: center; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .game-board { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); width: 300px; /* Adjust size as needed */ height: 300px; /* Adjust size as needed */ border: 2px solid #333; margin: 20px auto; background-color: #eee; position: relative; /* Needed for absolute positioning of snake/food if used */ } .cell { /* border: 1px solid #ddd; */ /* Optional: shows grid lines */ display: flex; justify-content: center; align-items: center; font-size: 1.5em; /* Adjust emoji size */ transition: transform 0.1s linear; /* Smoothness attempt */ } .snake-head { /* background-color: lightgreen; */ /* For debugging */ z-index: 2; } .snake-body { /* background-color: green; */ /* For debugging */ z-index: 1; } .food { /* background-color: red; */ /* For debugging */ animation: pulse 1s infinite; z-index: 1; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .info-panel { margin-top: 20px; } .mood-chart { min-height: 30px; /* Ensure space even when empty */ background-color: #f8f8f8; border: 1px solid #ddd; padding: 5px; margin-top: 10px; border-radius: 5px; word-wrap: break-word; /* Wrap emojis if too many */ font-size: 1.2em; } .game-over-message { color: red; font-weight: bold; margin-top: 10px; } /* Responsive adjustments */ @media (max-width: 400px) { .game-board { width: 80vw; height: 80vw; } .cell { font-size: 1.2em; } h1 { font-size: 1.5em; } } document.addEventListener('DOMContentLoaded', () => { const gameBoard = document.querySelector('.game-board'); const moodChartDisplay = document.querySelector('.mood-chart'); const gameOverMessage = document.querySelector('.game-over-message'); const gridSize = 10; const gameSpeed = 200; // milliseconds let snake = [{ x: 5, y: 5, emoji: '🤔' }]; // Start in the middle, head is '🤔' let food = getRandomFoodPosition(); let direction = { x: 0, y: 0 }; // Initial direction (none) let dx = 0; // Change in x let dy = 0; // Change in y let gameInterval; let isGameOver = false; let collectedMoods = []; const moodEmojis = ['😐', '🙂', '😀', '😡', '😭', '😎', '😍', '🥳', '😴', '🤯', '🥺', '😂']; const foodEmojis = ['🍏', '🍓', '🍒', '🍇', '🍉', '🍕', '🍔', '🍟']; let currentFoodEmoji = getRandomEmoji(foodEmojis); function createBoard() { gameBoard.innerHTML = ''; // Clear previous board gameBoard.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; gameBoard.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; for (let i = 0; i < gridSize * gridSize; i++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.index = i; // Store index for easy access gameBoard.appendChild(cell); } } function getRandomEmoji(emojiList) { return emojiList[Math.floor(Math.random() * emojiList.length)]; } function draw() { // Clear previous state from all cells const cells = gameBoard.querySelectorAll('.cell'); cells.forEach(cell => { cell.textContent = ''; cell.classList.remove('snake-head', 'snake-body', 'food'); }); // Draw snake snake.forEach((segment, index) => { const cellIndex = segment.y * gridSize + segment.x; if (cells[cellIndex]) { cells[cellIndex].textContent = segment.emoji; if (index === 0) { cells[cellIndex].classList.add('snake-head'); } else { cells[cellIndex].classList.add('snake-body'); } } }); // Draw food const foodCellIndex = food.y * gridSize + food.x; if (cells[foodCellIndex]) { cells[foodCellIndex].textContent = currentFoodEmoji; cells[foodCellIndex].classList.add('food'); } // Update mood chart moodChartDisplay.textContent = collectedMoods.join(' '); } function moveSnake() { if (isGameOver) return; const head = { ...snake[0] }; // Copy head head.x += dx; head.y += dy; // Check for wall collisions if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize) { endGame(); return; } // Check for self collision (ignore starting move) if (dx !== 0 || dy !== 0) { for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { endGame(); return; } } } // Check for food collision let ateFood = false; if (head.x === food.x && head.y === food.y) { ateFood = true; const newMood = getRandomEmoji(moodEmojis); collectedMoods.push(newMood); // Add mood to chart food = getRandomFoodPosition(); // Generate new food currentFoodEmoji = getRandomEmoji(foodEmojis); // New food type } // Update snake array snake.unshift(head); // Add new head if (!ateFood) { snake.pop(); // Remove tail if no food eaten } else { // If food eaten, the last segment (which was the second to last before unshift) // needs its emoji updated to the collected mood. // The head keeps its '🤔' emoji. // The new segment added implicitly by not popping gets the new mood. // We need to assign the new mood to the *second* element (the old head position) if (snake.length > 1) { snake[1].emoji = collectedMoods[collectedMoods.length - 1]; // Assign new mood to the segment that was the head } } // Ensure head always has the '🤔' emoji snake[0].emoji = '🤔'; draw(); } function getRandomFoodPosition() { let newFoodPosition; do { newFoodPosition = { x: Math.floor(Math.random() * gridSize), y: Math.floor(Math.random() * gridSize) }; } while (isPositionOnSnake(newFoodPosition)); // Ensure food doesn't spawn on snake return newFoodPosition; } function isPositionOnSnake(position) { return snake.some(segment => segment.x === position.x && segment.y === position.y); } function changeDirection(event) { const key = event.key; let newDx = dx; let newDy = dy; switch (key) { case 'ArrowUp': case 'w': case 'W': if (dy === 0) { newDx = 0; newDy = -1; } // Prevent moving directly down if moving up break; case 'ArrowDown': case 's': case 'S': if (dy === 0) { newDx = 0; newDy = 1; } // Prevent moving directly up if moving down break; case 'ArrowLeft': case 'a': case 'A': if (dx === 0) { newDx = -1; newDy = 0; } // Prevent moving directly right if moving left break; case 'ArrowRight': case 'd': case 'D': if (dx === 0) { newDx = 1; newDy = 0; } // Prevent moving directly left if moving right break; case 'r': // Restart game case 'R': if (isGameOver) { restartGame(); } return; // Don't change snake direction on restart key default: return; // Ignore other keys } // Start game on first valid move if (dx === 0 && dy === 0 && (newDx !== 0 || newDy !== 0)) { startGameLoop(); } dx = newDx; dy = newDy; } function startGameLoop() { if (gameInterval) clearInterval(gameInterval); // Clear existing interval if any gameInterval = setInterval(moveSnake, gameSpeed); } function endGame() { isGameOver = true; clearInterval(gameInterval); gameOverMessage.style.display = 'block'; console.log("Game Over!"); console.log("Final Moods:", collectedMoods.join(' ')); } function restartGame() { snake = [{ x: 5, y: 5, emoji: '🤔' }]; food = getRandomFoodPosition(); currentFoodEmoji = getRandomEmoji(foodEmojis); dx = 0; dy = 0; isGameOver = false; collectedMoods = []; gameOverMessage.style.display = 'none'; // No need to call startGameLoop here, it starts on first move draw(); // Draw initial state } // Initial setup createBoard(); draw(); // Draw initial snake and food document.addEventListener('keydown', changeDirection); }); Now you have the HTML, CSS, and JavaScript files for the Emoji Snake game. Open the `index.html` file in your browser preview. Use the arrow keys or WASD keys to control the snake. Collect the food items (🍏, 🍓, etc.) to grow longer and add random mood emojis to your snake's body and the Mood Chart. If you hit the wall or yourself, the game ends. Press 'R' to restart after a game over.