Snake Game

{"name":"NO PYTHON REQUIRED","description":"Find 24 types of food to feed your snake. Avoid walls and yourself. \nCompete for the high score. \n\nCLICK INTO WINDOW TO BEGIN","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/dz7s02jcdocyiikyc49r","view_count":7,"fork_count":3,"expires_at":null,"created_at":"2025-04-04T01:59:55.733910Z","updated_at":"2025-04-04T01:59:55.733912Z","user_id":70,"status":"PRIVATE","parent_id":6483,"id":7144,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"Food.js":"class Food {\n constructor() {\n this.foodTypes = [\n { color: 'red', emoji: '🍎' },\n { color: 'yellow', emoji: '🍌' },\n { color: 'purple', emoji: '🍇' },\n { color: 'orange', emoji: '🍊' },\n { color: 'green', emoji: '🥑' },\n { color: 'blue', emoji: '🫐' },\n { color: 'pink', emoji: '🍬' },\n { color: 'brown', emoji: '🍫' },\n { color: 'lightblue', emoji: '🧁' },\n { color: 'lightgreen', emoji: '🥝' },\n { color: 'gold', emoji: '🌟' },\n { color: 'white', emoji: '🍚' },\n { color: 'black', emoji: '🍪' },\n { color: 'grey', emoji: '🌰' },\n { color: 'cyan', emoji: '🍧' },\n { color: 'lime', emoji: '🍋' },\n { color: 'darkgreen', emoji: '🥒' },\n { color: 'navy', emoji: '🍵' },\n { color: 'teal', emoji: '🍥' },\n { color: 'violet', emoji: '🍆' },\n { color: 'magenta', emoji: '🍡' },\n { color: 'silver', emoji: '🥥' },\n { color: 'peach', emoji: '🍑' },\n { color: 'cream', emoji: '🍮' },\n { color: 'tan', emoji: '🍞' },\n { color: 'mint', emoji: '🍃' },\n ];\n this.type = this.randomType(); // Get a random food type\n this.position = this.randomPosition();\n }\n\n randomType() {\n // Randomly select a food type from the array\n return random(this.foodTypes);\n }\n\n randomPosition() {\n // Generate a random position within the grid\n let cols = floor(width / gridSize);\n let rows = floor(height / gridSize);\n return {\n x: floor(random(cols)) * gridSize,\n y: floor(random(rows)) * gridSize,\n };\n }\n\n reposition() {\n // Reposition the food to a new random location and type\n this.position = this.randomPosition();\n this.type = this.randomType(); // Select a new food type\n }\n\n show() {\n // Draw a circle background for the food only if the warning is shown or not yet shown\n if (showWarning || (eatenFoodTypes.length < 2)) {\n noStroke(); // Remove the stroke for the circle\n fill(255); // Set the fill color for the circle (white)\n ellipse(this.position.x, this.position.y, 40, 40); // Draw a circle with a diameter of 40\n }\n\n // Draw the emoji on top of the circle\n fill(this.type.color); // Use the color of the food type for the emoji\n textSize(25); // Set the size for the emoji to 25\n textAlign(CENTER, CENTER); // Center the text alignment\n text(this.type.emoji, this.position.x, this.position.y); // Draw the food with emoji\n }\n}\n\n","Snake.js":"class Snake {\n constructor() {\n const customAttributes = JSON.parse(localStorage.getItem('customSnakeAttributes'));\n\n if (customAttributes) {\n this.color = this.setColor(customAttributes.color); // Convert color string to p5.Color\n this.speedMultiplier = customAttributes.speed;\n this.body = [{ x: gridSize * 5, y: gridSize * 5 }]; // Start with one segment on the grid\n this.xspeed = 0; // Initial horizontal speed\n this.yspeed = 0; // Initial vertical speed\n this.size = 20; // Keep snake size at 20 for segments\n // Position the initial body segments based on the head's position\n for (let i = 1; i <= customAttributes.length; i++) { // Use <= to include the correct count\n const segmentX = this.body[0].x - (i * gridSize); // Calculate x position for segment\n const segmentY = this.body[0].y; // Keep y position the same as head\n\n this.body.push({\n x: segmentX,\n y: segmentY\n });\n\n }\n localStorage.removeItem('customSnakeAttributes');\n } else {\n this.body = [{ x: gridSize * 5, y: gridSize * 5 }]; // Start with one segment on the grid\n this.xspeed = 0; // Initial horizontal speed\n this.yspeed = 0; // Initial vertical speed\n this.size = 20; // Keep snake size at 20\n this.color = color(0, 255, 0); // Default color for the snake\n this.speedMultiplier = .01; // Default speed multiplier\n }\n }\n\n setColor(colorInput) {\n // Convert color string or hex to p5.Color object\n if (typeof colorInput === 'string') {\n return color(colorInput); // Convert string color to p5.Color\n }\n return colorInput; // Return as is if already a color object\n }\n\n update() {\n if (this.xspeed == 0 && this.yspeed == 0) return;\n\n // Determine the number of steps to move based on speedMultiplier\n for (let step = 0; step < this.speedMultiplier; step++) {\n const head = {\n x: this.body[0].x + this.xspeed * gridSize,\n y: this.body[0].y + this.yspeed * gridSize\n };\n\n this.body.unshift(head); // Add new head\n if (this.body.length > 1) {\n this.body.pop(); // Remove the last segment\n }\n }\n }\n\n setDirection(x, y) {\n // Prevent the snake from reversing direction\n if (this.body.length > 1) {\n const [secondSegment] = this.body.slice(1);\n if (x === -this.xspeed && y === -this.yspeed) {\n return; // Prevent reversing direction\n }\n }\n this.xspeed = x;\n this.yspeed = y;\n }\n\n grow() {\n // Add a new segment to the snake's body\n const tail = this.body[this.body.length - 1];\n this.body.push({ x: tail.x, y: tail.y }); // Add new segment at tail position\n }\n\n show() {\n // Draw the head of the snake\n fill(255, 204, 0); // Bright yellow for the head\n stroke(255); // Set the border color to white\n strokeWeight(6); // Set the thickness of the border for the head\n rect(this.body[0].x, this.body[0].y, this.size * 1.5, this.size * 1.5); // Draw the head larger\n\n // Draw the rest of the snake body\n for (let i = 1; i < this.body.length; i++) {\n fill(color(this.color)); // Use the current color of the snake for the body\n stroke(255); // Set the border color to white\n strokeWeight(4); // Set the thickness of the border for the body\n rect(this.body[i].x, this.body[i].y, this.size, this.size); // Draw each segment\n }\n }\n}","script.js":"const gridSize = 40;\n\nlet snake, food, score = 0, eatenFoodTypes = [],\n leaderboardHighScore = localStorage.getItem('leaderboardHighScore') || 0,\n highScore = localStorage.getItem('highScore') || 0,\n topScores = JSON.parse(localStorage.getItem('topScores')) || [0, 0, 0],\n bgImage, showWarning = false, bgColor, drawGrid = false, leaderboardVisible = false;\n\nconst foodThemes = {\n Confidence: ['🍎', '🍌', '🍇'],\n Strength: ['🥑', '🍫', '🥥'],\n Creativity: ['🧁', '🍬', '🌰'],\n Energy: ['🍊', '🍌', '🍋'],\n};\n\nconst powerUpCombos = {\n SpeedBoost: ['Confidence', 'Energy'],\n DanceMode: ['Creativity', 'Energy'],\n};\n\nlet logo;\n\nlet showBonusMessage = true;\n\nconst aspectRatio = 16 / 9;\n\nlet canvasWidth, canvasHeight;\n\nfunction preload() {\n bgImage = loadImage(\"https://res.cloudinary.com/dzv7hjwfn/image/upload/c_limit,w_500/f_auto/q_auto/upsjwff549qzw8nra0gs\",\n () => console.log(\"Background image loaded successfully.\"),\n () => {\n console.warn(\"Failed to load background image.\");\n bgImage = null; // Set to null to avoid using it if it fails\n }\n ); // Load background image with error handling\n\n logo = loadImage(\"https://res.cloudinary.com/dzv7hjwfn/image/upload/c_limit,w_500/f_auto/q_auto/usct5v1xph0kbxx31gke?_a=BBECd1AE0\",\n () => console.log(\"Logo loaded successfully.\"),\n () => {\n console.warn(\"Failed to load logo.\");\n logo = null; // Set to null to avoid using it if it fails\n }\n ); // Load the Arcadelogo image with error handling\n}\n\nfunction setup() {\n canvasWidth = windowWidth;\n canvasHeight = windowWidth / aspectRatio;\n\n if (canvasHeight > windowHeight) {\n canvasHeight = windowHeight;\n canvasWidth = windowHeight * aspectRatio;\n }\n\n let cnv = createCanvas(canvasWidth, canvasHeight);\n cnv.parent('canvas-container'); // 👈 Make sure canvas is placed correctly\n\n frameRate(5);\n snake = new Snake();\n food = new Food();\n bgColor = color(173, 216, 230);\n\n setInterval(() => {\n showBonusMessage = !showBonusMessage;\n }, 500);\n\n createDPadButtons(); // move this after setting canvas parent\n}\n\nfunction draw() {\n background(bgColor); // Set background color\n\n if (bgImage) {\n image(bgImage, 0, 0, width, height); // Display background image\n }\n\n snake.update();\n snake.show();\n food.show();\n handleControls();\n\n // Check for collisions and manage game state\n if (checkCollision()) {\n return; // Stop the game loop if collision occurs\n }\n\n // Handle food collection\n if (dist(snake.body[0].x, snake.body[0].y, food.position.x, food.position.y) < gridSize) {\n if (!eatenFoodTypes.includes(food.type.emoji)) {\n eatenFoodTypes.push(food.type.emoji); // Track eaten food types\n }\n\n snake.grow(); // Increase snake size\n score++; // Update score\n food.reposition(); // Relocate food\n checkForNewHighScore(); // Update high score if needed\n checkForCombos(); // Check for power-up combos\n\n if (eatenFoodTypes.length === 24) {\n noLoop(); // End game if all food types are collected\n displayLeaderboard(); // Show leaderboard on win\n }\n }\n\n // Display warning message if applicable\n if (eatenFoodTypes.length === 2) {\n showWarning = true; // Show warning\n setTimeout(() => {\n showWarning = false; // Hide warning after 4 seconds\n }, 4000);\n }\n\n if (showWarning) {\n fill(255); // Set text color\n textSize(windowWidth < 600 ? 1 : 2);\n textAlign(CENTER, CENTER); // Center text\n text(\"Watch out! This snake is mischievous!\", width / 2, height / 2); // Display warning\n }\n\n fill(0);\n textSize(24);\n text(`Score: ${score}`, 60, 30); // Display current score\n text(`High Score: ${highScore}`, 95, 60); // Display high score\n\n if (drawGrid) {\n drawDebugGrid(); // Draw grid if enabled\n }\n}\n\nfunction createDPadButtons() {\n const dpad = select('#dpad'); // p5.js select\n dpad.html(''); // Clear it if it already had content\n\n const createBtn = (label, callback) => {\n const btn = createButton(label);\n btn.mousePressed(callback);\n btn.parent(dpad);\n return btn;\n };\n\n // Create the vertical layout (Up)\n createBtn('↑', () => setDPadDirection(0, -1));\n\n // Create the middle row (Left, Spacer, Right)\n const row = createDiv().parent(dpad);\n row.style('display', 'flex');\n row.style('justify-content', 'center');\n row.child(createButton('←').mousePressed(() => setDPadDirection(-1, 0)));\n row.child(createButton('→').mousePressed(() => setDPadDirection(1, 0)));\n\n // Create the vertical layout (Down)\n createBtn('↓', () => setDPadDirection(0, 1));\n}\n\nfunction setDPadDirection(x, y) {\n if (x !== 0 && snake.xspeed === 0) {\n snake.setDirection(x, y);\n } else if (y !== 0 && snake.yspeed === 0) {\n snake.setDirection(x, y);\n }\n}\n\nfunction displayControls() {\n // This function is no longer needed\n /*\n fill(255); // Set text color to white\n textSize(20); // Set text size\n textAlign(LEFT); // Align text to the left\n text('Controls:', 10, height - 100); // Display the \"Controls:\" label\n text('← : Move Left', 10, height - 70); // Display left control\n text('→ : Move Right', 10, height - 50); // Display right control\n text('↑ : Move Up', 10, height - 30); // Display up control\n text('↓ : Move Down', 10, height - 10); // Display down control\n */\n}\n\nfunction promptForNickname() {\n const nickname = prompt(\"Congratulations! You've made it to the leaderboard! Enter your nickname:\");\n if (nickname) {\n updateLeaderboard(nickname); // Update leaderboard with the new score and nickname\n }\n}\n\nfunction checkForNewHighScore() {\n if (score > highScore) {\n highScore = score; // Update high score\n localStorage.setItem('highScore', highScore); // Save to local storage\n }\n}\n\nif (drawGrid) {\n drawDebugGrid(); // Draw the grid if drawGrid is true\n}\n\nfunction drawDebugGrid() {\n stroke(200); // Light gray color for grid lines\n for (let x = 0; x < width; x += gridSize) {\n line(x, 0, x, height); // Draw vertical lines\n }\n for (let y = 0; y < height; y += gridSize) {\n line(0, y, width, y); // Draw horizontal lines\n }\n}\n\nfunction checkCollision() {\n // Boundary collision\n if (snake.body[0].x < 0 || snake.body[0].x >= width || snake.body[0].y < 0 || snake.body[0].y >= height) {\n displayLeaderboard(); // Show leaderboard\n noLoop(); // Stop the game loop\n return true; // Collision detected\n }\n\n // Self-collision\n for (let i = 1; i < snake.body.length; i++) {\n if (snake.body[0].x === snake.body[i].x && snake.body[0].y === snake.body[i].y) {\n displayLeaderboard(); // Show leaderboard\n noLoop(); // Stop the game loop\n return true; // Collision detected\n }\n }\n return false; // No collision detected\n}\n\nfunction handleControls() {\n if (keyIsDown(LEFT_ARROW) && snake.xspeed === 0) {\n snake.setDirection(-1, 0); // Move left\n } else if (keyIsDown(RIGHT_ARROW) && snake.xspeed === 0) {\n snake.setDirection(1, 0); // Move right\n } else if (keyIsDown(UP_ARROW) && snake.yspeed === 0) {\n snake.setDirection(0, -1); // Move up\n } else if (keyIsDown(DOWN_ARROW) && snake.yspeed === 0) {\n snake.setDirection(0, 1); // Move down\n }\n}\n\nfunction checkForCombos() {\n const themesCollected = Object.keys(foodThemes).filter(theme =>\n foodThemes[theme].some(food => eatenFoodTypes.includes(food))\n );\n\n if (themesCollected.includes('Confidence') && themesCollected.includes('Energy')) {\n activateSpeedBoost(); // Activate speed boost\n }\n\n if (themesCollected.includes('Creativity') && themesCollected.includes('Energy')) {\n activateDanceMode(); // Activate dance mode\n }\n}\n\nfunction activateSpeedBoost() {\n snake.speedMultiplier = 1; // Increase speed\n console.log(\"Speed boost activated!\"); // Log activation\n setTimeout(() => {\n snake.speedMultiplier = .01; // Reset speed after 5 seconds\n console.log(\"Speed boost ended. Snake speed reset.\"); // Log reset\n }, 5000);\n}\n\nfunction activateDanceMode() {\n let pulse = 0;\n const interval = setInterval(() => {\n pulse = (pulse + 1) % 255; // Change the snake's color over time\n snake.color = color(pulse, 100, 150); // Use a pulsing color\n snake.size = 20 + 5 * sin(frameCount * 0.1); // Snake \"dances\" by changing size\n }, 100);\n\n setTimeout(() => {\n clearInterval(interval);\n snake.color = color(0, 255, 0); // Reset snake color to green\n snake.size = 20; // Reset snake size\n console.log(\"Dance mode ended. Snake color and size reset.\"); // Log end\n }, 5000);\n}\n\nfunction keyPressed() {\n if (key === 'R') {\n\n resetGame();\n loop();\n } else if (key === 'G') {\n drawGrid = !drawGrid; // Toggle grid drawing\n }\n}\n\nfunction hideLeaderboard() {\n leaderboardVisible = false; // Hide leaderboard\n background(bgColor); // Reset background color\n}\n\nfunction resetWithCustomAttributes(customAttributes) {\n hideLeaderboard(); // Hide the leaderboard before resetting\n\n snake = new Snake(); // Create a new snake object\n\n if (customAttributes) {\n snake.color = customAttributes.color;\n snake.speedMultiplier = customAttributes.speed;\n snake.body = [];\n\n for (let i = 0; i < customAttributes.length; i++) {\n snake.body.push({ x: i * gridSize, y: 0 }); // Use `gridSize` instead of `snake.size`\n }\n }\n\n food = new Food(); // Reset food\n score = 0;\n eatenFoodTypes = [];\n\n\n loop(); // Restart the game loop\n}\n\nfunction resetGame() {\n snake = new Snake(); // Reset to default attributes\n food = new Food(); // Create new food object\n score = 0; // Reset score\n eatenFoodTypes = []; // Reset eaten food types\n snake.xspeed = 0; // Stop horizontal movement\n snake.yspeed = 0; // Stop vertical movement\n}\n\nfunction displayLeaderboard() {\n background(0); // Set background color to black\n\n // Move the logo to the top-right\n if (logo) {\n const logoWidth = logo.width * 0.2; // Scale down logo size\n const logoHeight = logo.height * 0.2;\n image(logo, width - logoWidth - 20, 20, logoWidth, logoHeight); // Top-right corner\n }\n\n // Set pixel font\n textFont('Press Start 2P');\n\n // Adjust the title position (move it up)\n textSize(windowWidth < 600 ? 10 : 16);\n fill(232, 229, 225); // Light color for readability\n noStroke();\n textAlign(CENTER, CENTER);\n text('Leaderboard', width / 2, height * 0.1); // Move up\n\n // Display predefined scores directly\n const predefinedScores = [\n { name: \"Meg\", score: 74 },\n { name: \"stustu\", score: 67 },\n { name: \"maze.in.games\", score: 44 },\n ];\n\n textSize(windowWidth < 600 ? 16 : 22);\n fill(109, 138, 123);\n\n for (let i = 0; i < predefinedScores.length; i++) {\n const playerName = predefinedScores[i].name;\n const playerScore = predefinedScores[i].score;\n text(`${playerName}: ${playerScore}`, width / 2, height * 0.3 + i * (windowWidth < 600 ? 25 : 35));\n }\n\n // Update the promo message to fit better\n textSize(windowWidth < 600 ? 1 : 2);\n fill(255); // Message color\n textAlign(CENTER, BOTTOM); // Center align the message\n\n // Display each line of the promo text centered\n text(\"BONUS:\", width / 2, height - 60);\n text(\"Make your own game w/ Jippity!\", width / 2, height - 35);\n text(\"no coding experience required\", width / 2, height - 10);\n\n showRemixButton();\n}\n\nfunction showRemixButton() {\n const remixButton = createButton('REMIX!'); // Change the button text to \"REMIX!\"\n\n remixButton.size(windowWidth < 600 ? 80 : 100, windowWidth < 600 ? 60 : 80); // Adjust button size\n\n // Set the size for the button\n const buttonWidth = 200; // Specify the button width\n // Position the button at the center of the canvas below the leaderboard\n remixButton.position(\n (width - windowWidth < 600 ? 80 : 100) / 2 - 10,\n (windowWidth < 600 ? 60 : 80) - 10 // Move it lower on small screens\n );\n remixButton.mousePressed(customizeSnake); // Call customizeSnake() when clicked\n remixButton.class('remix-button'); // Add a custom class for styling\n}\n\nfunction customizeSnake() {\n // Hide the Remix button if it exists\n const remixButton = select('button');\n if (remixButton) {\n remixButton.hide(); // Hide button\n }\n\n // Prompt user for snake color\n let colorInput = prompt(\"Enter your snake color (e.g., 'red' or a hex code like '#FF5733')\");\n let newColor = colorInput; // Store as string\n\n // Validate the color input\n let isValidColor = /^#([0-9A-F]{3}){1,2}$/i.test(colorInput) || /^(red|blue|green|yellow|purple|orange|pink|brown|lightblue|lightgreen|gold|white|black|grey|cyan|lime|darkgreen|navy|teal|violet|magenta|silver|peach|cream|tan|mint)$/i.test(colorInput);\n if (!isValidColor) {\n alert(\"Invalid color! Defaulting to green.\");\n newColor = \"green\"; // Set default color as string\n }\n\n // Prompt user for snake speed and validate\n let speedInput = parseFloat(prompt(\"Enter your snake speed (0.01-1):\")) || 0.01; // Changed to 0.25\n speedInput = constrain(speedInput, .25, 5); // Ensure valid speed\n\n // Prompt user for snake length and validate\n let lengthInput = parseInt(prompt(\"Enter your snake initial length (1-10):\")) || 1; // Default to 1\n lengthInput = constrain(lengthInput, 1, 10); // Ensure valid length\n\n // Prepare custom attributes\n const customAttributes = {\n color: newColor, // Store as string\n speed: speedInput, // Ensure valid speed\n length: lengthInput, // Store length\n };\n\n // Save to local storage\n localStorage.setItem('customSnakeAttributes', JSON.stringify(customAttributes));\n window.location.reload(); // Refresh page to apply changes\n}\n\nfunction windowResized() {\n setup(); // Call setup to recalculate canvas dimensions\n}\n\nfunction moveSnake(direction) {\n switch (direction) {\n case 'UP':\n if (snake.yspeed === 0) {\n snake.setDirection(0, -1);\n }\n break;\n case 'DOWN':\n if (snake.yspeed === 0) {\n snake.setDirection(0, 1);\n }\n break;\n case 'LEFT':\n if (snake.xspeed === 0) {\n snake.setDirection(-1, 0);\n }\n break;\n case 'RIGHT':\n if (snake.xspeed === 0) {\n snake.setDirection(1, 0);\n }\n break;\n }\n}\n\n","style.css":"/* Reset page */\nbody {\n margin: 0;\n padding: 0;\n background: #000;\n font-family: sans-serif;\n}\n\n/* Wrapper: stacks canvas and D-pad vertically */\n#game-wrapper {\n display: flex;\n flex-direction: column;\n /* Default to column layout for portrait */\n align-items: flex-start;\n}\n\n/* Make sure canvas hugs the top-left */\n#canvas-container {\n margin: 0;\n padding: 0;\n}\n\n/* Full width square canvas */\ncanvas {\n display: block;\n width: 100vw;\n height: 100vw;\n}\n\n/* D-pad styles */\n#controls {\n margin-top: 10px;\n padding: 0 10px;\n}\n\n\n\n.remix-button:hover {\n transform: scale(1.1);\n /* Slightly enlarge button on hover */\n box-shadow: 0 0 40px rgba(138, 43, 226, 0.7), 0 0 50px rgba(255, 20, 147, 0.7);\n /* Stronger glow on hover */\n}\n\n/* style.css */\n.leaderboard-container {\n background-color: rgba(0, 0, 0, 0.8);\n /* Semi-transparent black */\n border: 5px solid #00FF00;\n /* Bright green border */\n border-radius: 10px;\n /* Rounded corners */\n padding: 20px;\n /* Padding for spacing */\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);\n /* Glow effect */\n position: absolute;\n /* Position it on top */\n top: 50%;\n /* Center it vertically */\n left: 50%;\n /* Center it horizontally */\n transform: translate(-50%, -50%);\n /* Adjust for centering */\n}\n\n.remix-button {\n background: radial-gradient(circle, #6A0DAD, #DA70D6);\n /* Deep purple to electric violet */\n border: 5px solid #5E2B8A;\n /* Metallic rim */\n border-radius: 50%;\n /* Circular shape */\n color: white;\n /* Text color */\n font-size: 12px;\n /* Font size */\n font-family: 'Press Start 2P', bold;\n /* Use the pixelated font for the button */\n text-align: center;\n /* Center text */\n padding: 10px;\n /* Padding for button */\n cursor: pointer;\n /* Pointer cursor on hover */\n box-shadow: 0 0 20px rgba(138, 43, 226, 0.5), 0 0 30px rgba(138, 43, 226, 0.6);\n /* Glow effect */\n transition: transform 0.2s;\n /* Transition for scaling effect */\n position: relative;\n /* Ensure the button is positioned relative */\n z-index: 1;\n /* Ensure the button appears above its background */\n}\n\n@media screen and (max-width: 600px) {\n .leaderboard-container {\n width: 90%;\n font-size: 12px;\n /* Smaller text */\n padding: 10px;\n }\n\n .remix-button {\n font-size: 10px;\n padding: 8px;\n }\n}\n\n/* D-pad styles */\n.d-pad {\n margin-top: 30vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.d-pad>button,\n.d-pad>div>button {\n width: 10vw;\n /* Reduced width */\n height: 10vw;\n /* Reduced height */\n max-width: 40px;\n /* Adjusted max width */\n max-height: 40px;\n /* Adjusted max height */\n margin: 4px;\n /* Keep some space */\n font-size: 2vw;\n /* Reduced font size */\n}\n\n.d-pad>div {\n display: flex;\n gap: 50px;\n justify-content: center;\n /* Center the buttons */\n /* Keep spacing between left and right buttons */\n}\n\n/* Landscape layout */\n@media screen and (orientation: landscape) {\n #game-wrapper {\n flex-direction: row;\n /* Change to row layout for landscape */\n }\n\n #controls {\n margin-left: 20px;\n /* Add some space between the canvas and controls */\n display: flex;\n /* Ensure the controls are displayed inline */\n flex-direction: column;\n /* Stack buttons vertically */\n }\n\n .d-pad>div {\n display: flex;\n gap: 40px;\n justify-content: center;\n }\n\n .d-pad>button,\n .d-pad>div>button {\n width: 15vw;\n /* Reduced width */\n height: 15vw;\n /* Reduced height */\n max-width: 40px;\n /* Adjusted max width */\n max-height: 40px;\n /* Adjusted max height */\n margin: 4px;\n /* Keep some space */\n font-size: 2vw;\n /* Reduced font size */\n }\n}\n\n@media screen and (orientation: portrait) {\n\n /* D-pad styles */\n .d-pad {\n margin-top: 0vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100vw;\n }\n\n .d-pad>button,\n .d-pad>div>button {\n width: 30vw;\n /* Reduced width */\n height: 30vw;\n /* Reduced height */\n max-width: 80px;\n /* Adjusted max width */\n max-height: 80px;\n /* Adjusted max height */\n margin: 4px;\n /* Keep some space */\n font-size: 6vw;\n /* Reduced font size */\n }\n}","index.html":"\n\n\n\n \n \n Snake Game\n \n \n \n\n\n\n

\n \n

\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"upsjwff549qzw8nra0gs","name":"meg","deleted":false,"id":67460,"created_at":"2025-04-04T01:59:55.766007Z","project_id":7144,"resource_type":"image"},{"cloudinary_id":"cmshsxyfbax5aanmkref","name":"meg2","deleted":false,"id":67459,"created_at":"2025-04-04T01:59:55.764732Z","project_id":7144,"resource_type":"image"},{"cloudinary_id":"dz7s02jcdocyiikyc49r","name":"meg3","deleted":false,"id":67458,"created_at":"2025-04-04T01:59:55.763556Z","project_id":7144,"resource_type":"image"},{"cloudinary_id":"h5chmthzmfxfcs726i5a","name":"megsong","deleted":false,"id":67457,"created_at":"2025-04-04T01:59:55.762403Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"njml7ftzfravd1hznfg1","name":"megsong2","deleted":false,"id":67456,"created_at":"2025-04-04T01:59:55.761240Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"zkuvswedq8mktsyc0ujy","name":"megsong3","deleted":false,"id":67455,"created_at":"2025-04-04T01:59:55.756268Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"znzx0feqrippsy6v4iof","name":"emoji","deleted":false,"id":67454,"created_at":"2025-04-04T01:59:55.753347Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"ui2lkd8swjj0bm7gq8dw","name":"emoji2","deleted":false,"id":67453,"created_at":"2025-04-04T01:59:55.751560Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"gzhv2czwcfkyrldrmcep","name":"tiktok","deleted":false,"id":67452,"created_at":"2025-04-04T01:59:55.749436Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"yg2ayycidicto1uzqkva","name":"1key","deleted":false,"id":67451,"created_at":"2025-04-04T01:59:55.748422Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"zzzit1gsbkghvhsxs2co","name":"2key","deleted":false,"id":67450,"created_at":"2025-04-04T01:59:55.747398Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"z8y24ir0j1hsraxgsbqu","name":"3key","deleted":false,"id":67449,"created_at":"2025-04-04T01:59:55.746112Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"fjkwyrexazzsoe4fgesw","name":"4key","deleted":false,"id":67448,"created_at":"2025-04-04T01:59:55.741980Z","project_id":7144,"resource_type":"video"},{"cloudinary_id":"usct5v1xph0kbxx31gke","name":"Arcadelogo","deleted":false,"id":67447,"created_at":"2025-04-04T01:59:55.740751Z","project_id":7144,"resource_type":"image"}],"messages_sent":30,"comments":[],"steps":[]}