Visual Symphony

{"name":"Spike Jump","description":"Jump over da spike\n(Copy of dino game)","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/obuvvwqkofv80fssgfi4","view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-06-05T14:42:46.956593Z","updated_at":"2025-06-05T14:42:46.956595Z","user_id":385,"status":"PRIVATE","parent_id":8092,"id":8162,"user":{"photo":null,"email":"jackson.wiley@alpha.school","recess_id":null,"created_at":"2025-03-09T02:28:39.062938Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"jacksonwiley","id":385,"password_hash":"$2b$12$VoI.3Qt054cVpzyZy7bAieJbndjoZw6NCgJ936UW.3ruTkPvktjgu","updated_at":"2025-03-09T02:28:39.062944Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let player;\n\nlet spikes = [];\n\nlet gameOver = false;\n\nlet spikeSpawner;\n\nlet score = 0;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n player = new Player(); // Initialize the player object\n spikeSpawner = new SpikeSpawner(); // Initialize the spike spawner\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n if (gameOver) {\n displayGameOver();\n } else {\n background(135, 206, 235);\n player.update();\n player.display();\n\n spikeSpawner.update(); // Update the spike spawner\n\n for (let i = spikes.length - 1; i >= 0; i--) {\n spikes[i].update();\n spikes[i].display();\n\n if (collidesWithSpike(player, spikes[i])) {\n gameOver = true;\n }\n\n if (spikes[i].offscreen()) {\n spikes.splice(i, 1);\n }\n\n // Check if the player has successfully jumped over the spike\n if (spikes[i].x + spikes[i].size < player.x && !spikes[i].counted) {\n score++;\n spikes[i].counted = true; // Mark the spike as counted\n }\n }\n\n displayScore(); // Display the score\n }\n}\n\nclass Player {\n constructor() {\n this.size = 50;\n this.x = 100;\n this.y = height - this.size;\n this.velocity = 0;\n this.gravity = 1;\n this.jumpCount = 0; // Track the number of jumps\n this.maxJumps = 2; // Allow a maximum of 2 jumps (double jump)\n }\n\n update() {\n this.y += this.velocity;\n this.velocity += this.gravity;\n\n if (this.y > height - this.size) {\n this.y = height - this.size;\n this.velocity = 0;\n this.jumpCount = 0; // Reset jump count when on the ground\n }\n }\n\n jump() {\n if (this.jumpCount < this.maxJumps) { // Check if the player can jump\n this.velocity = -15;\n this.jumpCount++; // Increment the jump count\n }\n }\n\n display() {\n fill(0); // Black color for the player\n rect(this.x, this.y, this.size, this.size);\n }\n}\n\nclass SpikeSpawner {\n constructor() {\n this.spawnInterval = this.getRandomInterval(); // Get a random interval for spawning\n this.timer = 0; // Timer to track time passed\n this.minimumDistance = 200; // Increased minimum distance between spikes\n }\n\n update() {\n this.timer += deltaTime; // Increment timer by the time passed since last frame\n\n if (this.timer > this.spawnInterval) {\n this.spawnSpike(); // Spawn a spike when timer exceeds interval\n this.timer = 0; // Reset timer\n this.spawnInterval = this.getRandomInterval(); // Get a new random interval\n }\n }\n\n getRandomInterval() {\n return Math.floor(Math.random() * 2000) + 500; // Random interval between 500ms and 2500ms\n }\n\n spawnSpike() {\n let canSpawn = true; // Flag to check if the spike can be spawned\n\n // Check if the last spike is far enough\n if (spikes.length > 0) {\n let lastSpike = spikes[spikes.length - 1]; // Get the last spike\n if (lastSpike.x - lastSpike.size < width - this.minimumDistance) {\n canSpawn = false; // If the last spike is too close, don't spawn\n }\n }\n\n if (canSpawn) {\n let numberOfSpikes = Math.floor(Math.random() * 2) + 1; // Either 1 or 2 spikes\n for (let i = 0; i < numberOfSpikes; i++) {\n spikes.push(new Spike());\n }\n }\n }\n}\n\nclass Spike {\n constructor() {\n this.size = 50; // Size of the spike\n this.hitboxSize = 20; // Reduced hitbox size for easier collision detection\n this.x = width; // Start off-screen\n this.y = height - this.size; // Position at ground level\n this.speed = 5; // Speed of the spike moving left\n }\n\n update() {\n this.x -= this.speed; // Move the spike left\n }\n\n display() {\n fill(255, 0, 0); // Red color for the spike\n triangle(this.x, this.y, this.x - this.size / 2, this.y + this.size, this.x + this.size / 2, this.y + this.size); // Draw the spike shape\n }\n\n offscreen() {\n return this.x < -this.size; // Check if the spike is off the screen\n }\n}\n\nsetInterval(createSpike, 1000);\n\nfunction createSpike() {\n // Randomly decide whether to create one or two spikes\n let numberOfSpikes = Math.floor(Math.random() * 2) + 1; // Either 1 or 2 spikes\n for (let i = 0; i < numberOfSpikes; i++) {\n spikes.push(new Spike());\n }\n}\n\nfunction displayGameOver() {\n fill(255, 0, 0); // Red color for the message\n textSize(48);\n textAlign(CENTER, CENTER);\n text(\"You Lose!\", width / 2, height / 2); // Display \"You Lose!\" message\n}\n\nfunction keyPressed() {\n if (keyCode === UP_ARROW) {\n player.jump();\n }\n}\n\nfunction collidesWithSpike(player, spike) {\n return (player.x < spike.x + spike.hitboxSize && // Use smaller hitbox size for detection\n player.x + player.size > spike.x &&\n player.y < spike.y + spike.hitboxSize && // Use smaller hitbox size for detection\n player.y + player.size > spike.y);\n}\n\nfunction displayScore() {\n fill(0); // Black color for the text\n textSize(32);\n textAlign(LEFT, TOP);\n text(\"Score: \" + score, 10, 10); // Display the score at the top left\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Visual Symphony\n \n \n \n\n\n \n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":8162,"created_at":"2025-06-05T14:42:52.536856Z","output_tokens":null,"sender":"client_script","code_id":248122,"deleted":0,"input_tokens":null,"id":146555},{"message":"Great! You already have a working game with a player character and spikes that appear. Could you tell me more about what you'd like to add or change in your game? For example, do you want to add more obstacles, power-ups, or change the visuals?","project_id":8162,"created_at":"2025-06-05T14:42:53.089766Z","output_tokens":61,"sender":"ai","code_id":248122,"deleted":0,"input_tokens":4017,"id":146556},{"message":"can you add a counter that goes up for every spike you jump over","project_id":8162,"created_at":"2025-06-05T14:43:24.491334Z","output_tokens":null,"sender":"human","code_id":248122,"deleted":0,"input_tokens":null,"id":146557},{"message":"Adding a counter for each spike you successfully jump over is a great idea! Let's implement this feature. I'll help you add a counter that increments every time the player jumps over a spike. \n\nHere's how we can do it:\n\n1. We'll create a global variable to keep track of the score.\n2. We'll update the score whenever the player successfully jumps over a spike.\n3. We'll display the score on the screen.\n\nLet's go ahead and implement these changes.\n\n```javascript\n// script.js\nlet score = 0; // Global variable to keep track of the score\n```\n\n```javascript\n// script.js\nfunction draw() {\n if (gameOver) {\n displayGameOver();\n } else {\n background(135, 206, 235);\n player.update();\n player.display();\n\n spikeSpawner.update(); // Update the spike spawner\n\n for (let i = spikes.length - 1; i >= 0; i--) {\n spikes[i].update();\n spikes[i].display();\n\n if (collidesWithSpike(player, spikes[i])) {\n gameOver = true;\n }\n\n if (spikes[i].offscreen()) {\n spikes.splice(i, 1);\n }\n\n // Check if the player has successfully jumped over the spike\n if (spikes[i].x + spikes[i].size < player.x && !spikes[i].counted) {\n score++;\n spikes[i].counted = true; // Mark the spike as counted\n }\n }\n \n displayScore(); // Display the score\n }\n}\n```\n\n```javascript\n// script.js\nfunction displayScore() {\n fill(0); // Black color for the text\n textSize(32);\n textAlign(LEFT, TOP);\n text(\"Score: \" + score, 10, 10); // Display the score at the top left\n}\n```\n\n- We've added a `score` variable to keep track of how many spikes the player has jumped over.\n- The `draw` function now checks if the player has passed a spike and updates the score.\n- The `displayScore` function draws the current score at the top left corner of the canvas.","project_id":8162,"created_at":"2025-06-05T14:43:24.936128Z","output_tokens":486,"sender":"ai","code_id":248122,"deleted":0,"input_tokens":4026,"id":146558},{"message":"can you reduce the size of the hitbox for the spikes just a little bit","project_id":8162,"created_at":"2025-06-05T14:44:35.863637Z","output_tokens":null,"sender":"human","code_id":248128,"deleted":0,"input_tokens":null,"id":146561},{"message":"Reducing the hitbox size for the spikes is definitely possible. This can make the game a bit easier, as it gives the player more room to avoid the spikes. Let's adjust the hitbox size for the spikes.\n\nI'll help you modify the `Spike` class to reduce the `hitboxSize`. Here's how you can do it:\n\n```javascript\n// script.js\nclass Spike {\n constructor() {\n this.size = 50; // Size of the spike\n this.hitboxSize = 20; // Reduced hitbox size for easier collision detection\n this.x = width; // Start off-screen\n this.y = height - this.size; // Position at ground level\n this.speed = 5; // Speed of the spike moving left\n }\n\n update() {\n this.x -= this.speed; // Move the spike left\n }\n\n display() {\n fill(255, 0, 0); // Red color for the spike\n triangle(this.x, this.y, this.x - this.size / 2, this.y + this.size, this.x + this.size / 2, this.y + this.size); // Draw the spike shape\n }\n\n offscreen() {\n return this.x < -this.size; // Check if the spike is off the screen\n }\n}\n```\n\n- The `hitboxSize` has been reduced from 30 to 20, which makes the collision detection area smaller. \n- This change means that the player has more leeway when jumping over spikes, making the game slightly easier.","project_id":8162,"created_at":"2025-06-05T14:44:36.271335Z","output_tokens":318,"sender":"ai","code_id":248128,"deleted":0,"input_tokens":4157,"id":146562}],"assets":[{"project_id":8162,"creator":null,"cloudinary_id":"obuvvwqkofv80fssgfi4","deleted":false,"id":75270,"created_at":"2025-06-05T14:42:46.961794Z","name":"game_tumbnail","resource_type":"image","tags":null}],"messages_sent":2,"comments":[],"steps":[]}