Platformer Game

{"name":"Platformer Game 10-29-2024","description":"Embark on a retro pixelated quest! Explore a grid-based world filled with quirky characters and challenging platforms, and conquer the pixelated realm in this nostalgic journey.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/udxw7toywr7fvb02uulc","view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-10-29T14:16:25.360960Z","updated_at":"2024-10-29T14:16:25.360962Z","user_id":5,"status":"PRIVATE","parent_id":1387,"id":4236,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// NEXT STEPS:\n// Idea 1: Update the level! Add more platforms, and make the level more interesting so the player can jump around from platform to platform!\n// Idea 2: Add an end screen when the player reaches the flag/endTrigger, telling them they won!\n// Idea 3: Add a different end screen when the player falls too far off the world, or loses all 3 lives, telling them they died\n// Idea 4: Add enemies that move back and forth, and hurt the player if they collide!\n// Idea 5: Make the player able to defeat enemies by jumping on top of them; so collisions where they player is on top defeat enemies, but other collisions hurt the player!\n// Idea 6: Add multiple levels, and a start screen to select which level to play!\n// Idea 7: Add item boxes, opened by hitting them from the bottom with a jump, like Mario. They can hosue items like coins and power ups!\n// Idea 8: Update player jump velocity and gravity to tune how the jump feels!\n\n// NOTE! You can move the player with WASD or arrow keys, spacebar to jump.\n\n// PLATFORMER TEMPLATE\n// ————— by Kristen —————\n// Assets by Kenney -- https://kenney.nl/assets/pixel-platformer\n\n// An empty list. We will add assets (images) to this.\nassets = {};\n\n// Here we load and store assets on our list.\nfunction preload() {\n assets['player_walk1'] = loadImage(\"@asset('player_walk1')\");\n assets['player_walk2'] = loadImage(\"@asset('player_walk2')\");\n assets['platform'] = loadImage(\"@asset('platform')\");\n assets['rightArrow'] = loadImage(\"@asset('startPosition')\");\n assets['flag1'] = loadImage(\"@asset('flag_animation1')\");\n assets['flag2'] = loadImage(\"@asset('flag_animation2')\");\n assets['fullHeart'] = loadImage(\"@asset('fullHeart')\");\n assets['halfHeart'] = loadImage(\"@asset('halfHeart')\");\n assets['emptyHeart'] = loadImage(\"@asset('emptyHeart')\");\n assets['itemBox'] = loadImage(\"@asset('itemBox')\");\n assets['coin'] = loadImage(\"@asset('coin')\");\n assets['powerUp1'] = loadImage(\"@asset('powerUp1')\");\n assets['hazard1'] = loadImage(\"@asset('enemy1')\");\n\n assets['enemy2'] = loadImage(\"@asset('enemy2')\");\n assets['enemy3'] = loadImage(\"@asset('enemy3')\");\n}\n\n// A player variable. We will make this a richer object with attributes and abilities soon.\nlet player;\n// This number stores which frame of the flag animation we're on. We'll use it later.\nlet flagAnimationFrame = 0;\n\n\nfunction setup() {\n createCanvas(400, 400); // Create a 400x400 pixel game window\n noSmooth(); // Disable smoothing for pixel art\n background(0, 150, 210); // Set the background color\n flagAnimationFrame = 0; // Initialize the animation frame counter\n initializeLevel(); // We call this function to set up the level and player position. The function is written lower down.\n}\n\n/*\n We are going to use a *matrix* (a grid of numbers) to describe and set up our level.\n The matrix grid represents the complete game world as blocks. Each block is one number.\n\n 0: a block of empty space\n 1: a safe platform\n 2: the starting position\n 3: the flag\n 4: a block of hazardous spikes \n\n The row of 1s at the bottom represents a long safe platform, for example.\n The big field of zeros (the first 9 rows) is the empty sky.\n Try putting some platforms in the sky: changes 0s to 1s.\n Or open up gaps in the ground: change some bottom 1s to 0s.\n*/\nlet levels = [\n [\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,3],\n [0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0,0],\n [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4],\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\n ],\n \n];\nlet currentLevelIndex = 0; // Keep track of the current level\nlet level = levels[currentLevelIndex]; // Set the initial level\n// We use our level matrix to position the player in the right spot.\n// We basically convert from \"matrix counting\" to \"pixel counting.\"\nfunction initializeLevel() {\n level = levels[currentLevelIndex]; // Update the level\n // Find start position and initialize player\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n if (level[i][j] === 2) { // Start position\n player = new Player(j * 16, i * 16); // Create a new player at the start position\n return; // Exit after positioning the player\n }\n }\n }\n}\n\n// Then we draw the level, once again converting from matrix to pixels.\nfunction drawLevel() {\n //Two for loops, one for rows, one for columns. This way we hit every number in the level matrix.\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n //Once we reach this line, cell[i][j] represents a single block in the world, with coordinates (i, j).\n let cell = level[i][j];\n //Draw the correct asset for this block:\n switch (cell) {\n case 1:\n image(assets['platform'], j * 16, i * 16, 16, 16); // Draw a platform\n break;\n case 2:\n image(assets['rightArrow'], j * 16, i * 16, 16, 16); // Draw start position\n break;\n case 3:\n // Animate the flag\n let flagAsset = (flagAnimationFrame < 30) ? assets['flag1'] : assets['flag2'];\n image(flagAsset, j * 16, i * 16, 16, 16); // Draw the flag\n break;\n case 4:\n image(assets['hazard1'], j * 16, i * 16, 16, 16); // Draw a hazard\n break;\n }\n }\n }\n\n // Update the flag animation frame, and reset every 60 frames to cycle the animation.\n flagAnimationFrame = (flagAnimationFrame + 1) % 60;\n}\n\n// This function runs over and over (every frame) to draw the game\nfunction draw() {\n background(0, 150, 210); // Clear the screen with a blue background\n\n // Calculate how the camera should follow the player\n let camX = -player.x + width / 2 - 8; // Center player and adjust by half the width of sprite\n let camY = -player.y + height / 2 - 8; // Center player and adjust by half the height of sprite\n\n // Apply camera transformation\n push(); // Enter new drawing settings.\n translate(camX, camY); // Shift the world over so that the player remains in the center of the screen.\n\n // Draw level with the camera following the player\n drawLevel();\n\n // Draw player\n player.display();\n\n pop(); // Return to original drawing settings.\n\n // Draw UI elements like lives\n player.displayLives();\n\n // Move the player\n player.move();\n\n // Restart level if player falls below the screen\n let threshold = 10;\n let restartThreshold = level.length * 16 + threshold * 16;\n if (player.y > restartThreshold) {\n initializeLevel(); // Reset the level and player position\n }\n}\n\nfunction keyPressed() {\n\n}\n\n// This is the recipe for the Player.\n//The constructor gives the player its attributes...\nclass Player {\n constructor(x, y) {\n this.x = x; // Player's x position\n this.y = y; // Player's y position\n this.speed = 10; // How fast the player moves\n this.velY = 0; // Player's vertical speed\n this.gravity = 15; // Gravity pulling the player down\n this.onGround = false; // Is the player on the ground?\n this.currentSprite = assets['player_walk1']; // The player's current image\n this.spriteCounter = 0; // Counter for switching images\n this.lives = 3; // Player's lives\n this.invulnerabilityTime = 0; // Time when player is invulnerable\n this.isInvulnerable = false; // Is the player invulnerable?\n }\n\n //...and these methods give the player its actions.\n\n display() {\n push();\n if (this.isInvulnerable) {\n // Flash the player when invulnerable\n let alpha = map(sin(frameCount * 0.1), -1, 1, 128, 255); //sin() is for *oscillation*\n tint(255, alpha); // Apply alpha effect\n }\n image(this.currentSprite, this.x, this.y, 16, 16); // Actually draw the player\n pop();\n this.animate(); // Animate the player\n }\n\n jump() {\n this.velY = -5; // Set a negative velocity to initiate the jump\n this.onGround = false; // Player is no longer on the ground\n }\n\n move() {\n\n this.x += this.speed; // Move right by adding speed to position\n\n\n // Apply gravity if *not* on the ground. (! is NOT)\n\n this.y += this.velY;\n this.velY += this.gravity;\n\n\n // Check for ground and hazards\n this.checkCollision();\n\n // Handle invulnerability timing\n if (this.isInvulnerable && millis() > this.invulnerabilityTime) {\n this.isInvulnerable = false; // End invulnerability\n }\n }\n\n // Is the player touching the ground or a hazard?\n checkCollision() {\n this.onGround = false; // Assume player not on the ground until collision detected\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n let cell = level[i][j];\n // Calculate platform position\n let platformX = j * 16;\n let platformY = i * 16;\n\n if (cell === 1) { // Platform\n // Horizontal overlap check\n if (this.x + 16 > platformX && this.x < platformX + 16) {\n // Check if falling onto the platform\n if (this.y + 16 <= platformY + this.velY && this.y + 16 + this.velY >= platformY) {\n this.y = platformY - 16; // Land on the platform\n this.velY = 0; // Stop falling\n this.onGround = true; // Player is on the ground\n }\n // Check if hitting the bottom of the platform with player's head\n else if (this.y >= platformY && this.y + this.velY <= platformY + 16 && this.velY < 0) {\n this.y = platformY + 16; // Move player below the platform\n this.velY = 0; // Stop upward movement\n }\n // Check if hitting the side of the platform\n if (this.x < platformX + 16 && this.x + 16 > platformX && this.y + 12 > platformY && this.y < platformY + 16) {\n if (this.x + 16 > platformX && this.x < platformX + 8) { // Hitting left side\n this.x = platformX - 16; // Move player to the left of the platform\n } else if (this.x < platformX + 16 && this.x + 16 > platformX + 8) { // Hitting right side\n this.x = platformX + 16; // Move player to the right of the platform\n }\n }\n }\n } else if (cell === 4 && !this.isInvulnerable) { // Hazard\n if (this.x < platformX + 16 && this.x + 16 > platformX && this.y + 12 > platformY && this.y < platformY + 16) {\n this.loseLife(); // Lose a life\n this.y = platformY - 8; // Bump player slightly above the hazard\n this.velY = 0; // Stop falling\n this.invulnerabilityTime = millis() + 3000; // Set up 3 seconds of invulnerability\n this.isInvulnerable = true; // Become invulnerable\n }\n } // Add this in the checkCollision function within the Player class\nelse if (cell === 3) { // Flag\n currentLevelIndex = (currentLevelIndex + 1) % levels.length; // Move to the next level, looping back to the first\n initializeLevel(); // Initialize the new level\n}\n }\n } \n\n // add check for flag collisions here...\n // add check for enemy collisions here...\n }\n\n // This function animates the player by cycling through images.\n animate() {\n if (keyIsDown(65) || keyIsDown(68) || keyIsDown(LEFT_ARROW) || keyIsDown(RIGHT_ARROW)) { // A or D key or L/R arrows\n this.spriteCounter++;\n if (this.spriteCounter >= 10) { // Change sprite every 10 frames\n this.currentSprite = (this.currentSprite === assets['player_walk1']) ? assets['player_walk2'] : assets['player_walk1'];\n this.spriteCounter = 0;\n }\n }\n }\n\n\n displayLives() {\n for (let i = 0; i < this.lives; i++) {\n image(assets['fullHeart'], 5 + i * 20, 5, 16, 16); // Draw hearts for lives, in a row, with some spacing.\n }\n }\n\n\n loseLife() {\n\n // Reset the game or level when lives run out\n initializeLevel();\n this.lives = 311; // Reset lives to 3\n }\n\n gainLife() {\n if (this.lives < 3) {\n this.lives += 1; // Increase lives by 1\n }\n }\n}\nfunction mousePressed() {\n player.gravity *= -1\n}","style.css":"","index.html":"\n\n\n\n \n \n Platformer Game\n \n\n\n\n \n \n game version: 0.02\n \n\n\n"},"chat_history":[{"project_id":4236,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-10-29T14:28:01.597708Z","output_tokens":null,"code_id":174221,"input_tokens":null,"id":85348},{"project_id":4236,"sender":"ai","message":"","deleted":0,"created_at":"2024-10-29T14:28:01.618111Z","output_tokens":null,"code_id":174221,"input_tokens":null,"id":85349},{"project_id":4236,"sender":"human","message":"lets add a system for there to be more than 1 levlel","deleted":0,"created_at":"2024-10-29T14:28:18.645293Z","output_tokens":null,"code_id":174222,"input_tokens":null,"id":85350},{"project_id":4236,"sender":"ai","message":"To add a system for multiple levels, we need to make some adjustments to your code. We'll create a structure to manage different levels and allow the player to transition between them. Let's get started!\n\n### Step 1: Define Multiple Levels\n\nFirst, we'll define multiple levels using matrices, similar to how your current level is set up. We'll store these levels in an array and manage the current level index.\n\n```javascript\nlet levels = [\n [\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],\n [0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0],\n [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],\n [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\n ],\n [\n // Add another level matrix here\n ]\n];\n\nlet currentLevelIndex = 0; // Keep track of the current level\nlet level = levels[currentLevelIndex]; // Set the initial level\n```\n\n### Step 2: Update Level Transition\n\nModify the `initializeLevel()` function to update the level based on the current index.\n\n```javascript\nfunction initializeLevel() {\n level = levels[currentLevelIndex]; // Update the level\n // Find start position and initialize player\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n if (level[i][j] === 2) { // Start position\n player = new Player(j * 16, i * 16); // Create a new player at the start position\n return; // Exit after positioning the player\n }\n }\n }\n}\n```\n\n### Step 3: Add Level Progression Logic\n\nAdd logic to progress to the next level when the player reaches the flag.\n\n```javascript\n// Add this in the checkCollision function within the Player class\nelse if (cell === 3) { // Flag\n currentLevelIndex = (currentLevelIndex + 1) % levels.length; // Move to the next level, looping back to the first\n initializeLevel(); // Initialize the new level\n}\n```\n\n### Explanation:\n- We now have an array `levels` containing multiple level matrices.\n- `currentLevelIndex` keeps track of which level the player is currently on.\n- When the player reaches a flag, the game progresses to the next level by updating `currentLevelIndex` and re-initializing the level.\n\nWould you like to add a specific design or challenge to the additional levels?","deleted":0,"created_at":"2024-10-29T14:28:18.975406Z","output_tokens":null,"code_id":174222,"input_tokens":null,"id":85351}],"assets":[{"cloudinary_id":"bafdjnuzp0g8mddqlg5y","name":"player_walk1","deleted":false,"id":40453,"created_at":"2024-10-29T14:16:25.391800Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"jpvuvf5wcpjfttqdww28","name":"player_walk2","deleted":false,"id":40452,"created_at":"2024-10-29T14:16:25.390594Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"zkfpqzt0ml0rxpm5rv8l","name":"platform","deleted":false,"id":40451,"created_at":"2024-10-29T14:16:25.389362Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"frwufedhbwwc4g1mnk2o","name":"itemBox","deleted":false,"id":40450,"created_at":"2024-10-29T14:16:25.387834Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"garmpxdkiecoegjftdmd","name":"startPosition","deleted":false,"id":40449,"created_at":"2024-10-29T14:16:25.386662Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"wfanr2gbnspwtkdynutv","name":"flag_animation1","deleted":false,"id":40448,"created_at":"2024-10-29T14:16:25.385387Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"pbtb2rfs3puuyogbmmja","name":"flag_animation2","deleted":false,"id":40447,"created_at":"2024-10-29T14:16:25.384132Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"egeiqojret86pmn6rnyg","name":"coin","deleted":false,"id":40446,"created_at":"2024-10-29T14:16:25.382759Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"phqlhmv9wg4clmnmq7wz","name":"fullHeart","deleted":false,"id":40445,"created_at":"2024-10-29T14:16:25.381618Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"ngjahgwsax7q5puyqqke","name":"halfHeart","deleted":false,"id":40444,"created_at":"2024-10-29T14:16:25.380340Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"m0wwzkr2h13jxai00fng","name":"emptyHeart","deleted":false,"id":40443,"created_at":"2024-10-29T14:16:25.378974Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"orykhepxhhjjb3trudlt","name":"powerUp1","deleted":false,"id":40442,"created_at":"2024-10-29T14:16:25.377718Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"nszyfye8yht6bdjstly2","name":"hazard1","deleted":false,"id":40441,"created_at":"2024-10-29T14:16:25.376369Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"hcdg1avvcutu7zabhj0a","name":"enemy1","deleted":false,"id":40440,"created_at":"2024-10-29T14:16:25.375099Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"gnuxhs2mnzmztt98tyhm","name":"enemy2","deleted":false,"id":40439,"created_at":"2024-10-29T14:16:25.373857Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"ethrie9krox1f1vjtpnc","name":"enemy3","deleted":false,"id":40438,"created_at":"2024-10-29T14:16:25.371811Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"kix1cbhoxmfavzhz1jzy","name":"coverimg","deleted":false,"id":40437,"created_at":"2024-10-29T14:16:25.370513Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"dmahr0bgnl6toxsasfyw","name":"coverimg2","deleted":false,"id":40436,"created_at":"2024-10-29T14:16:25.369088Z","project_id":4236,"resource_type":"image"},{"cloudinary_id":"udxw7toywr7fvb02uulc","name":"gifThumbnail","deleted":false,"id":40435,"created_at":"2024-10-29T14:16:25.367629Z","project_id":4236,"resource_type":"image"}],"messages_sent":2,"comments":[],"steps":[]}