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":1,"fork_count":0,"expires_at":null,"created_at":"2025-04-04T20:28:36.302231Z","updated_at":"2025-04-04T20:28:36.302235Z","user_id":70,"status":"PRIVATE","parent_id":7144,"id":7158,"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 joystickCenter, joystickRadius, activeTouch;\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 // Create a full-screen canvas\n let cnv = createCanvas(windowWidth, windowHeight);\n cnv.parent('canvas-container');\n\n // Check for portrait mode and rotate the canvas if necessary\n if (windowHeight > windowWidth) {\n window.alert('rotate your phone and reload to play.');\n return;\n }\n\n frameRate(5);\n snake = new Snake();\n food = new Food();\n bgColor = color(173, 216, 230);\n\n // Initialize joystick parameters at the bottom right\n joystickCenter = createVector(width - 120, height - 200); // Move to bottom right\n joystickRadius = 50;\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 drawDPad();\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 drawJoystick() {\n // Draw joystick base\n fill(150);\n ellipse(joystickCenter.x, joystickCenter.y, joystickRadius * 2);\n\n // Draw joystick handle (active touch)\n if (activeTouch) {\n fill(255, 0, 0);\n ellipse(activeTouch.x, activeTouch.y, joystickRadius);\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 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\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight); // Resize the canvas to full window size\n\n // Check for portrait mode and rotate the canvas if necessary\n if (windowHeight > windowWidth) {\n rotate(HALF_PI); // Rotate the canvas 90 degrees\n } else {\n // Reset rotation if back to landscape\n resetMatrix();\n }\n}\n\nfunction drawDPad() {\n const buttonSize = 50; // Size of each button\n\n // Calculate the position for each button\n const upButton = createVector(joystickCenter.x, joystickCenter.y - buttonSize);\n const downButton = createVector(joystickCenter.x, joystickCenter.y + buttonSize);\n const leftButton = createVector(joystickCenter.x - buttonSize, joystickCenter.y);\n const rightButton = createVector(joystickCenter.x + buttonSize, joystickCenter.y);\n\n // Draw each button as a rectangle\n fill(200, 200, 200, 127);\n rect(upButton.x, upButton.y, buttonSize, buttonSize);\n rect(downButton.x, downButton.y, buttonSize, buttonSize);\n rect(leftButton.x, leftButton.y, buttonSize, buttonSize);\n rect(rightButton.x, rightButton.y, buttonSize, buttonSize);\n\n // Draw the direction labels on the buttons\n fill(0);\n textAlign(CENTER, CENTER);\n text(\"U\", upButton.x + buttonSize / 2, upButton.y + buttonSize / 2);\n text(\"D\", downButton.x + buttonSize / 2, downButton.y + buttonSize / 2);\n text(\"L\", leftButton.x + buttonSize / 2, leftButton.y + buttonSize / 2);\n text(\"R\", rightButton.x + buttonSize / 2, rightButton.y + buttonSize / 2);\n}\n\nfunction touchMoved() {\n return false; // Prevent default behavior\n}\n\nfunction touchEnded() {\n return false; // Prevent default behavior\n}\n\nfunction touchStarted() {\n if (touches.length > 0) {\n let touch = touches[0];\n const buttonSize = 50;\n\n // Calculate the center of each button for accurate detection\n const upButtonCenter = createVector(joystickCenter.x, joystickCenter.y - buttonSize * 1.5);\n const downButtonCenter = createVector(joystickCenter.x, joystickCenter.y + buttonSize * 1.5);\n const leftButtonCenter = createVector(joystickCenter.x - buttonSize * 1.5, joystickCenter.y);\n const rightButtonCenter = createVector(joystickCenter.x + buttonSize * 1.5, joystickCenter.y);\n\n // Check if the touch point is within any of the D-pad buttons\n if (dist(touch.x, touch.y, upButtonCenter.x, upButtonCenter.y) < buttonSize / 2) {\n moveSnake('UP');\n } else if (dist(touch.x, touch.y, downButtonCenter.x, downButtonCenter.y) < buttonSize / 2) {\n moveSnake('DOWN');\n } else if (dist(touch.x, touch.y, leftButtonCenter.x, leftButtonCenter.y) < buttonSize / 2) {\n moveSnake('LEFT');\n } else if (dist(touch.x, touch.y, rightButtonCenter.x, rightButtonCenter.y) < buttonSize / 2) {\n moveSnake('RIGHT');\n }\n\n return false; // Prevent default behavior\n }\n return true; // Allow other default behaviors if not touching the D-pad\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"},"chat_history":[{"project_id":7158,"sender":"human","message":"make the d pad buttons semi transparent","deleted":0,"created_at":"2025-04-04T20:49:14.270103Z","output_tokens":null,"code_id":230272,"input_tokens":null,"id":130906},{"project_id":7158,"sender":"ai","message":"To make the D-pad buttons semi-transparent, you'll need to update the CSS for the D-pad buttons. Let's modify the CSS file to include a semi-transparent background color for the buttons.\n\nHere's how you can update the CSS:\n\n```css\n/* style.css */\n/* 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.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 background-color: rgba(200, 200, 200, 0.5); /* Semi-transparent background */\n border: none; /* Remove default border */\n border-radius: 5px; /* Optional: rounded corners */\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 background-color: rgba(200, 200, 200, 0.5); /* Semi-transparent background */\n border: none; /* Remove default border */\n border-radius: 5px; /* Optional: rounded corners */\n }\n}\n\n@media screen and (orientation: portrait) {\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 background-color: rgba(200, 200, 200, 0.5); /* Semi-transparent background */\n border: none; /* Remove default border */\n border-radius: 5px; /* Optional: rounded corners */\n }\n}\n```\n\n- This code updates the background color of the D-pad buttons to be semi-transparent using `rgba(200, 200, 200, 0.5)`, where `0.5` is the opacity level.\n- The buttons are also given rounded corners with `border-radius: 5px`, and the default border is removed with `border: none`. \n\nYou can update your `style.css` file with this code, and the D-pad buttons should appear semi-transparent.","deleted":0,"created_at":"2025-04-04T20:49:14.396343Z","output_tokens":977,"code_id":230272,"input_tokens":9952,"id":130907},{"project_id":7158,"sender":"human","message":"no in p5","deleted":0,"created_at":"2025-04-04T20:49:44.795600Z","output_tokens":null,"code_id":230272,"input_tokens":null,"id":130908},{"project_id":7158,"sender":"ai","message":"To make the D-pad buttons semi-transparent using p5.js, you can adjust the `fill()` function's alpha value in the `drawDPad()` function. Let's update the `drawDPad()` function to make the D-pad buttons semi-transparent.\n\nHere's how you can do it:\n\n```javascript\n// script.js\nfunction drawDPad() {\n const buttonSize = 50; // Size of each button\n\n // Calculate the position for each button\n const upButton = createVector(joystickCenter.x, joystickCenter.y - buttonSize);\n const downButton = createVector(joystickCenter.x, joystickCenter.y + buttonSize);\n const leftButton = createVector(joystickCenter.x - buttonSize, joystickCenter.y);\n const rightButton = createVector(joystickCenter.x + buttonSize, joystickCenter.y);\n\n // Draw each button as a rectangle with semi-transparency\n fill(200, 200, 200, 127); // Semi-transparent fill\n rect(upButton.x, upButton.y, buttonSize, buttonSize);\n rect(downButton.x, downButton.y, buttonSize, buttonSize);\n rect(leftButton.x, leftButton.y, buttonSize, buttonSize);\n rect(rightButton.x, rightButton.y, buttonSize, buttonSize);\n\n // Draw the direction labels on the buttons\n fill(0); // Solid fill for text\n textAlign(CENTER, CENTER);\n text(\"U\", upButton.x + buttonSize / 2, upButton.y + buttonSize / 2);\n text(\"D\", downButton.x + buttonSize / 2, downButton.y + buttonSize / 2);\n text(\"L\", leftButton.x + buttonSize / 2, leftButton.y + buttonSize / 2);\n text(\"R\", rightButton.x + buttonSize / 2, rightButton.y + buttonSize / 2);\n}\n```\n\n### Explanation:\n- The `fill(200, 200, 200, 127)` line sets a semi-transparent color for the D-pad buttons. The last parameter `127` is the alpha value, which controls transparency (0 is fully transparent, 255 is fully opaque).\n- The rest of the function draws the D-pad buttons and their labels as before, but now the buttons will appear semi-transparent.","deleted":0,"created_at":"2025-04-04T20:49:44.801922Z","output_tokens":471,"code_id":230272,"input_tokens":9949,"id":130909},{"project_id":7158,"sender":"human","message":"i move the buttons a little and theyre not quite detecting right","deleted":0,"created_at":"2025-04-04T20:51:05.046773Z","output_tokens":null,"code_id":230274,"input_tokens":null,"id":130914},{"project_id":7158,"sender":"ai","message":"To ensure the D-pad buttons detect touches accurately, we need to adjust the detection logic in the `touchStarted` function. This involves checking the touch points against the correct positions of the buttons.\n\nLet's update the `touchStarted` function to improve touch detection:\n\n```javascript\n// script.js\nfunction touchStarted() {\n if (touches.length > 0) {\n let touch = touches[0];\n const buttonSize = 50;\n\n // Calculate the center of each button for accurate detection\n const upButtonCenter = createVector(joystickCenter.x, joystickCenter.y - buttonSize * 1.5);\n const downButtonCenter = createVector(joystickCenter.x, joystickCenter.y + buttonSize * 1.5);\n const leftButtonCenter = createVector(joystickCenter.x - buttonSize * 1.5, joystickCenter.y);\n const rightButtonCenter = createVector(joystickCenter.x + buttonSize * 1.5, joystickCenter.y);\n\n // Check if the touch point is within any of the D-pad buttons\n if (dist(touch.x, touch.y, upButtonCenter.x, upButtonCenter.y) < buttonSize / 2) {\n moveSnake('UP');\n } else if (dist(touch.x, touch.y, downButtonCenter.x, downButtonCenter.y) < buttonSize / 2) {\n moveSnake('DOWN');\n } else if (dist(touch.x, touch.y, leftButtonCenter.x, leftButtonCenter.y) < buttonSize / 2) {\n moveSnake('LEFT');\n } else if (dist(touch.x, touch.y, rightButtonCenter.x, rightButtonCenter.y) < buttonSize / 2) {\n moveSnake('RIGHT');\n }\n\n return false; // Prevent default behavior\n }\n return true; // Allow other default behaviors if not touching the D-pad\n}\n```\n\n### Explanation:\n- **Button Centers**: We calculate the center of each button with `1.5 * buttonSize` adjustment to match the drawing position in `drawDPad()`.\n- **Touch Detection**: We use `dist()` to check if the touch is within a radius of `buttonSize / 2` from the button's center. This ensures accurate touch detection based on the button's position and size. \n\nReplace the existing `touchStarted` function with this updated version, and it should improve the touch detection for your D-pad buttons.","deleted":0,"created_at":"2025-04-04T20:51:05.146748Z","output_tokens":538,"code_id":230274,"input_tokens":9967,"id":130915}],"assets":[{"cloudinary_id":"usct5v1xph0kbxx31gke","name":"Arcadelogo","deleted":false,"id":67631,"created_at":"2025-04-04T20:28:36.757688Z","project_id":7158,"resource_type":"image"},{"cloudinary_id":"fjkwyrexazzsoe4fgesw","name":"4key","deleted":false,"id":67630,"created_at":"2025-04-04T20:28:36.756163Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"z8y24ir0j1hsraxgsbqu","name":"3key","deleted":false,"id":67629,"created_at":"2025-04-04T20:28:36.754846Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"zzzit1gsbkghvhsxs2co","name":"2key","deleted":false,"id":67628,"created_at":"2025-04-04T20:28:36.753393Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"yg2ayycidicto1uzqkva","name":"1key","deleted":false,"id":67627,"created_at":"2025-04-04T20:28:36.751794Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"gzhv2czwcfkyrldrmcep","name":"tiktok","deleted":false,"id":67626,"created_at":"2025-04-04T20:28:36.739459Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"ui2lkd8swjj0bm7gq8dw","name":"emoji2","deleted":false,"id":67625,"created_at":"2025-04-04T20:28:36.728020Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"znzx0feqrippsy6v4iof","name":"emoji","deleted":false,"id":67624,"created_at":"2025-04-04T20:28:36.636467Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"zkuvswedq8mktsyc0ujy","name":"megsong3","deleted":false,"id":67623,"created_at":"2025-04-04T20:28:36.605247Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"njml7ftzfravd1hznfg1","name":"megsong2","deleted":false,"id":67622,"created_at":"2025-04-04T20:28:36.579239Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"h5chmthzmfxfcs726i5a","name":"megsong","deleted":false,"id":67621,"created_at":"2025-04-04T20:28:36.559845Z","project_id":7158,"resource_type":"video"},{"cloudinary_id":"dz7s02jcdocyiikyc49r","name":"meg3","deleted":false,"id":67620,"created_at":"2025-04-04T20:28:36.538258Z","project_id":7158,"resource_type":"image"},{"cloudinary_id":"cmshsxyfbax5aanmkref","name":"meg2","deleted":false,"id":67619,"created_at":"2025-04-04T20:28:36.415336Z","project_id":7158,"resource_type":"image"},{"cloudinary_id":"upsjwff549qzw8nra0gs","name":"meg","deleted":false,"id":67618,"created_at":"2025-04-04T20:28:36.389604Z","project_id":7158,"resource_type":"image"}],"messages_sent":15,"comments":[],"steps":[]}