{"name":"NO PYTHON REQUIRED (mobile v2)","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":1,"fork_count":0,"expires_at":null,"created_at":"2025-05-13T18:32:59.100163Z","updated_at":"2025-05-13T18:32:59.100164Z","user_id":70,"status":"PRIVATE","parent_id":7792,"id":7943,"user":{"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","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":200},"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\n let x, y;\n\n if (isMobile) {\n // Restrict to the middle 50% of the screen\n let middleWidth = width / 2;\n let startX = middleWidth / 2; // Start x position\n let endX = middleWidth + startX; // End x position\n\n let middleHeight = height / 2;\n let startY = middleHeight / 2; // Start y position\n let endY = middleHeight + startY; // End y position\n\n x = floor(random(startX, endX) / gridSize) * gridSize;\n y = floor(random(startY, endY) / gridSize) * gridSize;\n } else {\n // Spawn anywhere on the screen for non-mobile\n x = floor(random(cols)) * gridSize;\n y = floor(random(rows)) * gridSize;\n }\n\n return { x, y }; // Return the new position\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":"// Snake.js\nclass 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 = windowWidth <= 764 ? customAttributes.speed / 100 : 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 this.lastUpdate = 0; // Track the last update time\n this.updateInterval = windowWidth <= 764 ? 200 : 50; // Time in milliseconds for snake movement\n this.growNext = false; // Flag to indicate if the snake should grow\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 = windowWidth <= 764 ? 0.25 / 100 : 0.25; // Slower speed on mobile\n this.lastUpdate = 0; // Track the last update time\n this.updateInterval = windowWidth <= 764 ? 200 : 50; // Time in milliseconds for snake movement\n this.growNext = false; // Flag to indicate if the snake should grow\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 // Check if enough time has passed since the last update\n if (millis() - this.lastUpdate < this.updateInterval) {\n return; // Skip update if interval hasn't passed\n }\n\n if (this.xspeed === 0 && this.yspeed === 0) return;\n\n // Determine the new head position\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.growNext) {\n this.growNext = false; // Reset flag after growing\n } else {\n this.body.pop(); // Remove the last segment if not growing\n }\n\n this.lastUpdate = millis();\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 this.growNext = true; // Set the flag to grow on next move\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 isMobile = false;\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, bgMusic, 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\nlet gameStarted = false;\n\nlet tiktokTimer;\n\nlet isMuted = false;\n\nfunction preload() {\n bgImage = loadImage(\"@asset('meg3')\"); // Load background image\n bgMusic = loadSound(\"@asset('megsong')\"); // Load background music\n tiktok = loadSound(\"@asset('tiktok')\"); // Load TikTok sound\n sound1 = loadSound(\"@asset('1key')\"); // Load 1key sound\n sound2 = loadSound(\"@asset('2key')\"); // Load 2key sound\n sound3 = loadSound(\"@asset('3key')\"); // Load 3key sound\n sound4 = loadSound(\"@asset('4key')\"); // Load 4key sound\n logo = loadImage(\"@asset('Arcadelogo')\"); // Load the Arcadelogo image\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n frameRate(10);\n food = new Food();\n joystick = new Joystick(); // Create a joystick instance\n bgColor = color(173, 216, 230); // Set background color\n\n // Check if the device is mobile-sized\n if (windowWidth <= 764) {\n isMobile = true;\n }\n\n // Flashing message every 500 milliseconds\n setInterval(() => {\n showBonusMessage = !showBonusMessage; // Toggle visibility\n }, 500);\n\n // Add event listener to the start button\n const startButton = select('#startButton');\n startButton.mousePressed(() => {\n gameStarted = true;\n resetGame();\n loop();\n hideStartScreen(); // Hide the start screen elements\n });\n\n // Add event listener to mute button\n const muteButton = select('#muteButton');\n muteButton.mousePressed(() => {\n toggleMute(); // Call toggleMute function on button press\n });\n}\n\nfunction draw() {\n if (gameStarted) {\n background(bgColor);\n\n if (bgImage) {\n image(bgImage, 0, 0, width, height);\n }\n\n snake.update();\n snake.show();\n food.show();\n\n // Update and draw the joystick if on mobile\n // script.js\n if (isMobile) {\n const joystickMargin = 50; // Distance from the edges\n const joystickSize = 200; // Size of the joystick (to ensure it fits)\n joystick.setPosition(width - joystickSize / 2 - joystickMargin, height - joystickSize / 2 - joystickMargin); // Position at bottom right corner\n joystick.update(); // Update joystick state\n joystick.draw(); // Draw the joystick\n\n // Get the joystick direction and set the snake's direction\n const direction = joystick.getDirection();\n // Only set the direction if there is movement\n if (direction.x !== 0 || direction.y !== 0) {\n snake.setDirection(direction.x, direction.y); // Set the direction based on joystick input\n }\n }\n handleControls();\n\n if (checkCollision()) {\n return;\n }\n\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);\n console.log(`Food eaten: ${food.type.emoji}, Total eaten: ${eatenFoodTypes.length}`);\n }\n\n snake.grow();\n score++;\n food.reposition();\n checkForNewHighScore();\n checkForCombos();\n\n // Log the contents of the eatenFoodTypes array\n console.log(`Eaten food types: ${eatenFoodTypes}`);\n\n if (eatenFoodTypes.length === 24) {\n noLoop();\n displayLeaderboard();\n }\n }\n\n if (eatenFoodTypes.length === 2) {\n showWarning = true;\n setTimeout(() => {\n showWarning = false;\n }, 4000);\n }\n\n if (showWarning) {\n fill(255);\n textSize(48);\n textAlign(CENTER, CENTER);\n text(\"Watch out! This snake is mischievous!\", width / 2, height / 2);\n }\n\n fill(0);\n textSize(24);\n text(`Score: ${score}`, 60, 30);\n text(`High Score: ${highScore}`, 95, 60);\n\n if (drawGrid) {\n drawDebugGrid();\n }\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 bgMusic.stop(); // Stop music on game end\n displayLeaderboard(); // Show leaderboard\n noLoop(); // Stop the game loop\n console.log('boundary collision');\n return true; // Collision detected\n }\n\n // Self-collision\n for (let i = 1; i < snake.body.length; i++) {\n if (snake.growNext === false && snake.body[0].x === snake.body[i].x && snake.body[0].y === snake.body[i].y) {\n bgMusic.stop(); // Stop music on game end\n displayLeaderboard(); // Show leaderboard\n noLoop(); // Stop the game loop\n console.log('self collision')\n return true; // Collision detected\n }\n }\n return false; // No collision detected\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 = .25; // 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 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 if (bgMusic) {\n bgMusic.loop();\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 if (bgMusic) {\n bgMusic.loop(); // Resume music when game restarts\n }\n}\n\nfunction updateLeaderboard(nickname) {\n const playerName = nickname.trim() !== \"\" ? nickname : \"Player\";\n\n // Predefined scores to display\n const predefinedScores = [\n { name: \"Meg\", score: 74 },\n { name: \"stustu\", score: 67 },\n { name: \"maze.in.games\", score: 56 }, // Updated score to 56\n ];\n\n // Add the new player's score if it's higher than zero\n if (highScore > 0) {\n predefinedScores.push({ name: playerName, score: highScore });\n }\n\n // Sort the scores in descending order\n predefinedScores.sort((a, b) => b.score - a.score);\n\n // Keep only the top 3 scores\n topScores = predefinedScores.slice(0, 3);\n\n // Save to local storage\n localStorage.setItem('topScores', JSON.stringify(topScores));\n}\n\nfunction showRemixButton() {\n const remixButton = createButton('REMIX!'); // Change the button text to \"REMIX!\"\n\n // Set the size for the button\n const buttonWidth = 150; // Specify the button width\n const buttonHeight = 70; // Specify the button height\n remixButton.size(buttonWidth, buttonHeight); // Set the size of the button\n\n // Position the button at the center of the canvas below the leaderboard\n remixButton.position((width - buttonWidth) / 2, height / 2 + 40); // Centered horizontally and positioned below the leaderboard\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.25-5):\")) || 1; // 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 keyPressed() {\n if (key === 'Enter' && !gameStarted) {\n gameStarted = true; // Set game started to true\n resetGame(); // Reset the game state\n loop(); // Start the game loop\n } else if (key === 'R') {\n if (bgMusic) {\n bgMusic.loop(); // Restart music when the game resets\n }\n resetGame();\n loop();\n } else if (key === 'G') {\n drawGrid = !drawGrid; // Toggle grid drawing\n }\n}\n\nfunction handleControls() {\n if (keyIsDown(LEFT_ARROW) && snake.xspeed === 0) {\n snake.setDirection(-1, 0); // Move left\n startGame(); // Start the game actions\n } else if (keyIsDown(RIGHT_ARROW) && snake.xspeed === 0) {\n snake.setDirection(1, 0); // Move right\n startGame(); // Start the game actions\n } else if (keyIsDown(UP_ARROW) && snake.yspeed === 0) {\n snake.setDirection(0, -1); // Move up\n startGame(); // Start the game actions\n } else if (keyIsDown(DOWN_ARROW) && snake.yspeed === 0) {\n snake.setDirection(0, 1); // Move down\n startGame(); // Start the game actions\n }\n}\n\nfunction startGame() {\n if (!bgMusic.isPlaying()) {\n bgMusic.loop(); // Start background music\n }\n\n // Start the TikTok sound timer if it's not already set\n if (!tiktokTimer) {\n tiktokTimer = setTimeout(() => {\n tiktok.play(); // Play TikTok sound after 26 seconds\n\n // Play 1key sound 10 seconds after TikTok sound\n setTimeout(() => {\n sound1.play(); // Play the 1key sound\n\n // Play 2key sound 15 seconds after 1key sound\n setTimeout(() => {\n sound2.play(); // Play the 2key sound\n\n // Play 3key sound 15 seconds after 2key sound\n setTimeout(() => {\n sound3.play(); // Play the 3key sound\n\n // Play 4key sound 15 seconds after 3key sound\n setTimeout(() => {\n sound4.play(); // Play the 4key sound\n }, 15000); // 15000 milliseconds (15 seconds)\n\n }, 15000); // 15000 milliseconds (15 seconds)\n\n }, 10000); // 10000 milliseconds (10 seconds)\n\n }, 10000); // 10000 milliseconds (10 seconds)\n }, 26000); // 26000 milliseconds (26 seconds)\n }\n}\n\nfunction drawDPad() {\n const dPadWidth = Math.max(width, height) * 0.2; // 20% of the canvas width\n const dPadHeight = dPadWidth; // Make it square\n const dPadX = width - dPadWidth - 10; // Positioned 10 pixels from the right edge\n const dPadY = height / 2 - dPadHeight / 2; // Centered vertically\n\n // Draw the up button\n fill(255, 255, 255, 150); // White with transparency\n noStroke();\n rect(dPadX + dPadWidth / 3, dPadY, dPadWidth / 3, dPadHeight / 3);\n\n // Draw the down button\n rect(dPadX + dPadWidth / 3, dPadY + 2 * (dPadHeight / 3), dPadWidth / 3, dPadHeight / 3);\n\n // Draw the left button\n rect(dPadX, dPadY + dPadHeight / 3, dPadWidth / 3, dPadHeight / 3);\n\n // Draw the right button\n rect(dPadX + 2 * (dPadWidth / 3), dPadY + dPadHeight / 3, dPadWidth / 3, dPadHeight / 3);\n\n // Handle touch input\n for (let i = 0; i < touches.length; i++) {\n const touch = touches[i];\n if (touch.x > dPadX + dPadWidth / 3 && touch.x < dPadX + 2 * (dPadWidth / 3) && touch.y > dPadY && touch.y < dPadY + dPadHeight / 3) {\n snake.setDirection(0, -1); // Up\n } else if (touch.x > dPadX + dPadWidth / 3 && touch.x < dPadX + 2 * (dPadWidth / 3) && touch.y > dPadY + 2 * (dPadHeight / 3) && touch.y < dPadY + 3 * (dPadHeight / 3)) {\n snake.setDirection(0, 1); // Down\n } else if (touch.x > dPadX && touch.x < dPadX + dPadWidth / 3 && touch.y > dPadY + dPadHeight / 3 && touch.y < dPadY + 2 * (dPadHeight / 3)) {\n snake.setDirection(-1, 0); // Left\n } else if (touch.x > dPadX + 2 * (dPadWidth / 3) && touch.x < dPadX + 3 * (dPadWidth / 3) && touch.y > dPadY + dPadHeight / 3 && touch.y < dPadY + 2 * (dPadHeight / 3)) {\n snake.setDirection(1, 0); // Right\n }\n }\n}\n\nfunction displayLeaderboard() {\n if (isMobile) {\n bgMusic.stop(); // Stop background music\n background(0); // Set background color to black\n\n // Only display the logo if it has been loaded\n if (logo) {\n const logoWidth = logo.width * 0.5; // Set new width to 80% of original\n const logoHeight = logo.height * 0.5; // Set new height to 80% of original\n image(logo, width / 2 - logoWidth / 2, height / 3 - logoHeight + 50, logoWidth, logoHeight); // Center the smaller logo\n }\n\n showRemixButton(); // Call to display the \"REMIX!\" button\n } else {\n bgMusic.stop(); // Stop background music\n background(0); // Set background color to black\n\n // Only display the logo if it has been loaded\n if (logo) {\n const logoWidth = logo.width * 0.8; // Set new width to 80% of original\n const logoHeight = logo.height * 0.8; // Set new height to 80% of original\n image(logo, width / 2 - logoWidth / 2, height / 3 - logoHeight - 20, logoWidth, logoHeight); // Center the smaller logo above the title\n }\n\n // Set the pixel font for the leaderboard\n textFont('Press Start 2P'); // Use the pixel font\n\n // Adjust the title position\n textSize(20); // Title size\n fill(232, 229, 225); // Title color\n noStroke(); // Remove outline from title\n textAlign(CENTER, CENTER);\n const titleY = height / 3; // Y position for the title\n text('Leaderboard', width / 2, titleY); // Center title\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: 56 },\n ];\n\n textSize(18); // Adjusted score size\n fill(109, 138, 123); // Score color\n const scoreYStart = height / 2 - 50; // Starting Y position for scores\n for (let i = 0; i < predefinedScores.length; i++) {\n const playerName = predefinedScores[i].name; // Get player name\n const playerScore = predefinedScores[i].score; // Get player score\n noStroke(); // Remove outline for scores\n text(`${playerName}: ${playerScore}`, width / 2, scoreYStart + i * 30); // Center scores\n }\n\n // Update the message to display with new content\n textSize(20); // Message size\n fill(255); // Message color\n textAlign(CENTER, BOTTOM); // Center align the message\n const messageY = height - 50; // Y position for the message\n text(\"BONUS:\\nHelp us co-create a game w/ Jippity right now!\\nAn online coding platform for learners.\\nPractice prompting w/ A.I.\\nNO CODING EXPERIENCE REQUIRED\", width / 2, messageY); // Center message\n\n showRemixButton(); // Call to display the \"PRESS ME!\" button\n }\n\n}\n\nfunction toggleMute() {\n isMuted = !isMuted; // Toggle the mute state\n if (isMuted) {\n bgMusic.stop(); // Stop the background music\n select('#muteButton').html('UNMUTE'); // Change button text\n } else {\n bgMusic.loop(); // Resume the background music\n select('#muteButton').html('MUTE'); // Change button text\n }\n}\n\nfunction showStartScreen() {\n // Draw the background image covering the entire screen\n if (bgImage) {\n image(bgImage, 0, 0, width, height);\n }\n\n // Create and position title, description, and controls\n fill('yellow');\n textAlign(CENTER, CENTER);\n\n // Title text\n textSize(32);\n text('CREATED WITH ARTIFICIAL INTELLIGENCE', width / 2, height / 4);\n\n // Description text\n textSize(24);\n text('Description', width / 2, height / 3);\n\n // Controls explanation\n textSize(18);\n text('Controls:\\n⬅️ : Move left\\n➡️ : Move right\\n⬆️ : Move up\\n⬇️ : Move down', width / 2, height / 2);\n\n // Show the start button with CSS class\n const startButton = select('#startButton');\n startButton.show();\n}\n\nfunction hideStartScreen() {\n // Select the start screen element and hide it\n const startScreen = select('.start-screen');\n if (startScreen) {\n startScreen.hide();\n }\n noCanvasTouchDefaults();\n}\n\nfunction noCanvasTouchDefaults() {\n // Prevent scrolling on touch devices\n document.addEventListener('touchstart', (event) => {\n }, { passive: false });\n\n document.addEventListener('touchmove', (event) => {\n event.preventDefault();\n }, { passive: false });\n\n document.addEventListener('touchend', (event) => {\n }, { passive: false });\n}\n\n","style.css":".leaderboard-container {\n background-color: rgba(0, 0, 0, 0.8);\n\n border: 5px solid #00FF00;\n\n border-radius: 10px;\n\n padding: 20px;\n\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);\n\n position: absolute;\n\n top: 50%;\n\n left: 50%;\n\n transform: translate(-50%, -50%);\n\n}\n\n.remix-button {\n background: radial-gradient(circle, #6A0DAD, #DA70D6);\n\n border: 5px solid #5E2B8A;\n\n border-radius: 50%;\n\n color: white;\n\n font-size: 24px;\n\n font-family: 'Press Start 2P', cursive;\n\n text-align: center;\n\n padding: 10px;\n\n cursor: pointer;\n\n box-shadow: 0 0 20px rgba(138, 43, 226, 0.5), 0 0 30px rgba(138, 43, 226, 0.6);\n\n transition: transform 0.2s;\n\n position: relative;\n\n z-index: 1;\n\n}\n\ncanvas {\n display: block;\n}\n\n.remix-button:hover {\n transform: scale(1.1);\n box-shadow: 0 0 40px rgba(138, 43, 226, 0.7), 0 0 50px rgba(255, 20, 147, 0.7);\n}\n\n.leaderboard-container {\n background-color: rgba(0, 0, 0, 0.8);\n border: 5px solid #00FF00;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.start-screen-text {\n color: yellow;\n\n text-align: center;\n\n font-family: 'Press Start 2P', cursive;\n\n}\n\n.mute-button-container {\n position: absolute;\n\n top: 10px;\n\n left: 10px;\n\n z-index: 1;\n\n}\n\nbody {\n margin: 0;\n height: 100vh;\n background: url('@asset(\"meg3\")') no-repeat center center fixed;\n background-size: cover;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.start-screen {\n text-align: center;\n color: yellow;\n font-family: 'Press Start 2P', cursive;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n max-width: 80%;\n width: 90%;\n box-sizing: border-box;\n padding: 5px;\n}\n\n.start-screen h1 {\n font-weight: bold;\n font-size: 3.5vw;\n color: yellow;\n background-color: #5E2B8A80;\n display: inline-block;\n padding: 3px;\n}\n\n.start-screen h2 {\n background-color: #00ffffa0;\n color: black;\n padding: 3px;\n margin: 5px auto;\n font-size: 3vw;\n}\n\n.start-screen p {\n color: yellow;\n font-style: italic;\n font-family: 'Courier New', monospace;\n font-size: 2.5vw;\n}\n\n.start-button {\n margin-top: 15px;\n background: radial-gradient(circle, #6A0DAD, #DA70D6);\n border: 2px solid #5E2B8A;\n border-radius: 10px;\n color: white;\n font-size: 3vw;\n padding: 6px 12px;\n cursor: pointer;\n box-shadow: 0 0 8px rgba(138, 43, 226, 0.5), 0 0 10px rgba(138, 43, 226, 0.6);\n transition: transform 0.2s;\n font-family: cursive;\n}\n\n.start-button:hover {\n transform: scale(1.03);\n}\n\n.mute-button {\n position: absolute;\n top: 5px;\n left: 5px;\n background: radial-gradient(circle, #6A0DAD, #DA70D6);\n border: 2px solid #5E2B8A;\n border-radius: 50%;\n color: white;\n font-size: 2.5vw;\n padding: 6px;\n cursor: pointer;\n box-shadow: 0 0 8px rgba(138, 43, 226, 0.5), 0 0 10px rgba(138, 43, 226, 0.6);\n transition: transform 0.2s;\n z-index: 1;\n}\n\n.mute-button:hover {\n transform: scale(1.03);\n}","index.html":"\n\n\n\n \n \n Snake Game\n \n \n \n \n \n\n\n\n\n

\n \n

\"CODED WITH ARTIFICIAL INTELLIGENCE\"

\n Find 24 types of food to feed your snake.
Avoid walls and yourself.
\n Compete for the high score.\n

Controls: ← → ↑ ↓\n

\n \n

\n \n \n \n \n\n\n","Joystick.js":"class Joystick {\n constructor() {\n this.radius = 50; // Radius of the joystick\n this.position = { x: 0, y: 0 }; // Center position of the joystick\n this.angle = 0; // Angle of the joystick's direction\n this.force = 0; // The force applied on the joystick\n this.lastUpdateTime = 0; // Track the last update time\n }\n\n setPosition(x, y) {\n this.position.x = x;\n this.position.y = y;\n }\n\n draw() {\n // Draw the joystick base\n fill(200, 200, 200, 150); // Light gray with transparency\n noStroke();\n ellipse(this.position.x, this.position.y, this.radius * 2);\n\n // Draw the joystick knob\n const knobX = this.position.x + this.force * cos(this.angle);\n const knobY = this.position.y + this.force * sin(this.angle);\n fill(255); // White color for the knob\n ellipse(knobX, knobY, this.radius / 1.5); // Draw the knob\n }\n\n update() {\n // Handle touch input for joystick\n let isTouched = false; // Variable to track if the joystick is being touched\n for (let touch of touches) {\n const distance = dist(touch.x, touch.y, this.position.x, this.position.y);\n if (distance < this.radius) {\n this.angle = atan2(touch.y - this.position.y, touch.x - this.position.x); // Update angle\n this.force = constrain(distance, 0, this.radius); // Limit force to the radius\n isTouched = true; // Mark as touched\n break; // Only handle one touch\n }\n }\n\n // Reset if no touch is within the joystick radius\n if (!isTouched) {\n this.force = 0; // Reset force\n }\n\n // Update the last update time\n this.lastUpdateTime = millis();\n }\n\n // Joystick.js\n getDirection() {\n let direction = { x: 0, y: 0 };\n\n // Check if there is any force applied\n if (this.force > 0) {\n // Determine the angle of the joystick\n const angle = atan2(sin(this.angle), cos(this.angle)); // Normalize angle\n\n // Map the angle to cardinal directions\n if (angle >= -PI / 4 && angle < PI / 4) {\n direction.x = 1; // Right\n } else if (angle >= PI / 4 && angle < 3 * PI / 4) {\n direction.y = 1; // Down\n } else if (angle >= 3 * PI / 4 || angle < -3 * PI / 4) {\n direction.x = -1; // Left\n } else if (angle >= -3 * PI / 4 && angle < -PI / 4) {\n direction.y = -1; // Up\n }\n }\n\n return direction;\n }\n}\n\n"},"chat_history":[],"assets":[{"name":"Arcadelogo","created_at":"2025-05-13T18:05:58.381402Z","resource_type":"image","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"usct5v1xph0kbxx31gke","deleted":false,"id":74000},{"name":"4key","created_at":"2025-05-13T18:05:58.380241Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"fjkwyrexazzsoe4fgesw","deleted":false,"id":73999},{"name":"3key","created_at":"2025-05-13T18:05:58.378748Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"z8y24ir0j1hsraxgsbqu","deleted":false,"id":73998},{"name":"2key","created_at":"2025-05-13T18:05:58.377291Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"zzzit1gsbkghvhsxs2co","deleted":false,"id":73997},{"name":"1key","created_at":"2025-05-13T18:05:58.375848Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"yg2ayycidicto1uzqkva","deleted":false,"id":73996},{"name":"tiktok","created_at":"2025-05-13T18:05:58.373288Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"gzhv2czwcfkyrldrmcep","deleted":false,"id":73995},{"name":"emoji2","created_at":"2025-05-13T18:05:58.372098Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"ui2lkd8swjj0bm7gq8dw","deleted":false,"id":73994},{"name":"emoji","created_at":"2025-05-13T18:05:58.370381Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"znzx0feqrippsy6v4iof","deleted":false,"id":73993},{"name":"megsong3","created_at":"2025-05-13T18:05:58.369322Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"zkuvswedq8mktsyc0ujy","deleted":false,"id":73992},{"name":"megsong2","created_at":"2025-05-13T18:05:58.368209Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"njml7ftzfravd1hznfg1","deleted":false,"id":73991},{"name":"megsong","created_at":"2025-05-13T18:05:58.367108Z","resource_type":"audio","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"h5chmthzmfxfcs726i5a","deleted":false,"id":73990},{"name":"meg3","created_at":"2025-05-13T18:05:58.365798Z","resource_type":"image","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"dz7s02jcdocyiikyc49r","deleted":false,"id":73989},{"name":"meg2","created_at":"2025-05-13T18:05:58.364083Z","resource_type":"image","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"cmshsxyfbax5aanmkref","deleted":false,"id":73988},{"name":"meg","created_at":"2025-05-13T18:05:58.361124Z","resource_type":"image","tags":null,"project_id":7943,"creator":null,"cloudinary_id":"upsjwff549qzw8nra0gs","deleted":false,"id":73987}],"messages_sent":14,"comments":[],"steps":[]}

\"CODED WITH ARTIFICIAL INTELLIGENCE\"

\n Find 24 types of food to feed your snake. Avoid walls and yourself.\n Compete for the high score.\n

\n Find 24 types of food to feed your snake.
Avoid walls and yourself.
\n Compete for the high score.\n