Snake.io-inspired Game

{"name":"Snake.io-inspired Game","description":"Dive into the classic world of snake.io with a fun twist! This project lets you create a simple yet engaging game using p5.js, where you control a snake that grows longer as it consumes food. Navigate through the arena, avoid collisions, and strive to achieve the highest score. Perfect for those new to programming, this project provides a step-by-step guide to building your own addictive snake-like game!","photo":null,"view_count":4,"fork_count":0,"expires_at":null,"created_at":"2025-06-20T19:08:41.769971Z","updated_at":"2025-06-20T19:08:41.769973Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":8279,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"food.js":"class Food {\r\n constructor() {\r\n // Randomly place food on the canvas within the map dimensions\r\n this.position = {\r\n x: random(0, mapWidth), // Ensure food spawns within the width\r\n y: random(0, mapHeight) // Ensure food spawns within the height\r\n };\r\n this.size = 10; // Size of the food item\r\n this.color = color(random(255), random(255), random(255)); // Random color\r\n }\r\n\r\n display() {\r\n fill(this.color);\r\n ellipse(this.position.x, this.position.y, this.size, this.size); // Draw food as a circle\r\n }\r\n}\r\n\r\n","snake.js":"class Snake {\r\n constructor(color1, color2) {\r\n this.body = [{ x: mapWidth / 2, y: mapHeight / 2 }];\r\n this.direction = { x: 0, y: 0 };\r\n this.baseSpeed = 4; // Base speed of the snake\r\n this.minSpeed = 2.5; // Minimum speed\r\n this.slowDownRate = 0.01; // Rate at which speed slows down per score point\r\n this.color1 = color1; // First color\r\n this.color2 = color2; // Second color\r\n }\r\n\r\n update() {\r\n let targetX = mouseX - (width / 2 - this.body[0].x);\r\n let targetY = mouseY - (height / 2 - this.body[0].y);\r\n\r\n let deltaX = targetX - this.body[0].x;\r\n let deltaY = targetY - this.body[0].y;\r\n\r\n let length = sqrt(deltaX * deltaX + deltaY * deltaY);\r\n if (length > 0) {\r\n this.direction.x = deltaX / length;\r\n this.direction.y = deltaY / length;\r\n }\r\n\r\n // Calculate speed based on the score\r\n let speedReduction = this.slowDownRate * score;\r\n let currentSpeed = constrain(this.baseSpeed - speedReduction, this.minSpeed, this.baseSpeed);\r\n\r\n let newHead = {\r\n x: this.body[0].x + this.direction.x * currentSpeed,\r\n y: this.body[0].y + this.direction.y * currentSpeed\r\n };\r\n\r\n if (newHead.x < 0 || newHead.x > mapWidth || newHead.y < 0 || newHead.y > mapHeight) {\r\n newHead.x = constrain(newHead.x, 0, mapWidth);\r\n newHead.y = constrain(newHead.y, 0, mapHeight);\r\n }\r\n\r\n this.body.unshift(newHead);\r\n\r\n for (let i = foods.length - 1; i >= 0; i--) {\r\n let segmentSize = 20 + this.body.length * growthFactor;\r\n if (dist(newHead.x, newHead.y, foods[i].position.x, foods[i].position.y) < segmentSize) {\r\n this.grow();\r\n score++;\r\n foods.splice(i, 1);\r\n }\r\n }\r\n\r\n this.body.pop();\r\n }\r\n\r\n grow() {\r\n const tail = this.body[this.body.length - 1];\r\n this.body.push({ x: tail.x, y: tail.y });\r\n }\r\n\r\n display() {\r\n noStroke();\r\n let baseSize = 20;\r\n for (let i = 0; i < this.body.length; i++) {\r\n let segmentSize = baseSize + this.body.length * growthFactor;\r\n if (Math.floor(i / 10) % 2 === 0) {\r\n fill(this.color1); // Use the chosen color for even segments\r\n } else {\r\n fill(this.color2); // Use the chosen color for odd segments\r\n }\r\n rect(this.body[i].x, this.body[i].y, segmentSize, segmentSize);\r\n }\r\n }\r\n}\r\n\r\n","script.js":"let snake;\n\nlet score = 0;\n\nlet foods = [];\n\nlet foodSpawnRate = 10;\n\nlet mapWidth;\n\nlet mapHeight;\n\nlet growthFactor = 0.1;\n\nlet snakeColor1;\nlet snakeColor2;\n\nfunction setup() {\n mapWidth = windowWidth * 2; // Double the width\n mapHeight = windowHeight * 2; // Double the height\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n\n showColorSelection(); // Show color selection screen\n\n snake = new Snake();\n spawnFood(10); // Spawn initial food items\n\n // Log the current speed every second\n setInterval(() => {\n // Calculate speed based on the score for logging\n let speedReduction = snake.slowDownRate * score; // Use the same logic as in update()\n let currentSpeed = constrain(snake.baseSpeed - speedReduction, snake.minSpeed, snake.baseSpeed);\n console.log(\"Current Speed: \" + currentSpeed);\n }, 1000);\n}\n\nfunction draw() {\n background(135, 206, 235);\n\n translate(width / 2 - snake.body[0].x, height / 2 - snake.body[0].y);\n\n snake.update();\n snake.display();\n displayFood();\n spawnMoreFood();\n\n drawWalls(); // Draw the walls\n\n // Reset translation to ensure the score remains fixed\n resetMatrix();\n displayScore();\n}\n\nfunction showColorSelection() {\n background(200); // Show a background for the selection screen\n fill(0);\n textSize(32);\n text(\"Choose Snake Colors\", width / 2 - 100, height / 2 - 50); // Title\n\n // Create color selection buttons\n fill(255, 0, 0); // Red\n rect(width / 2 - 100, height / 2, 80, 40);\n fill(0, 255, 0); // Green\n rect(width / 2 + 20, height / 2, 80, 40);\n fill(0, 0, 255); // Blue\n rect(width / 2 - 100, height / 2 + 50, 80, 40);\n fill(255, 255, 0); // Yellow\n rect(width / 2 + 20, height / 2 + 50, 80, 40);\n\n fill(0);\n textSize(16);\n text(\"Red\", width / 2 - 70, height / 2 + 25);\n text(\"Green\", width / 2 + 50, height / 2 + 25);\n text(\"Blue\", width / 2 - 70, height / 2 + 75);\n text(\"Yellow\", width / 2 + 50, height / 2 + 75);\n}\n\n\nfunction displayScore() {\n fill(255); // Set text color to white\n textSize(24); // Set text size\n text(\"Score: \" + score, width - 150, 30); // Display score at the top right\n}\n\nfunction displayFood() {\n for (let food of foods) {\n food.display(); // Display each food item\n }\n}\n\nfunction spawnFood(count) {\n for (let i = 0; i < count; i++) {\n foods.push(new Food()); // Add new food items to the array\n }\n}\n\nfunction spawnMoreFood() {\n // Spawn one new food item every 'foodSpawnRate' frames\n if (frameCount % foodSpawnRate === 0) {\n spawnFood(1); // Spawn one food item\n }\n}\n\nfunction drawWalls() {\n fill(0); // Set wall color to black\n noStroke();\n // Draw rectangles on each edge of the map\n rect(-10, 0, 10, mapHeight); // Left wall\n rect(mapWidth, 0, 10, mapHeight); // Right wall\n rect(0, -10, mapWidth, 10); // Top wall\n rect(0, mapHeight, mapWidth, 10); // Bottom wall\n}\n\nfunction mousePressed() {\n if (!gameStarted) {\n // Check if a color button was clicked\n if (mouseX > width / 2 - 100 && mouseX < width / 2 - 20 && mouseY > height / 2 && mouseY < height / 2 + 40) {\n snakeColor1 = color(255, 0, 0); // Red\n snakeColor2 = color(150, 0, 0); // Darker Red\n startGame();\n } else if (mouseX > width / 2 + 20 && mouseX < width / 2 + 100 && mouseY > height / 2 && mouseY < height / 2 + 40) {\n snakeColor1 = color(0, 255, 0); // Green\n snakeColor2 = color(0, 150, 0); // Darker Green\n startGame();\n } else if (mouseX > width / 2 - 100 && mouseX < width / 2 - 20 && mouseY > height / 2 + 50 && mouseY < height / 2 + 90) {\n snakeColor1 = color(0, 0, 255); // Blue\n snakeColor2 = color(0, 0, 150); // Darker Blue\n startGame();\n } else if (mouseX > width / 2 + 20 && mouseX < width / 2 + 100 && mouseY > height / 2 + 50 && mouseY < height / 2 + 90) {\n snakeColor1 = color(255, 255, 0); // Yellow\n snakeColor2 = color(150, 150, 0); // Darker Yellow\n startGame();\n }\n }\n}\n\nfunction startGame() {\n snake = new Snake(snakeColor1, snakeColor2); // Create snake with selected colors\n spawnFood(10); // Spawn initial food items\n gameStarted = true; // Mark that the game has started\n}\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n Snake.io-inspired Game\n \n \n \n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":41,"comments":[],"steps":[]}