Platformer Game

{"name":"Platformer Game 8-16-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":0,"fork_count":0,"expires_at":null,"created_at":"2024-08-16T17:37:35.803467Z","updated_at":"2024-08-16T17:37:35.803470Z","user_id":5,"status":"PRIVATE","parent_id":1387,"id":2728,"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('hazard1')\");\n assets['enemy1'] = loadImage(\"@asset('enemy1')\");\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 level = [\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 3, 0],\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]\n];\n\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 // 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 if (keyCode === 32 && player.onGround) { // Spacebar key\n player.jump();\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 = 2; // How fast the player moves\n this.velY = 0; // Player's vertical speed\n this.gravity = 0.3; // 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 if (keyIsDown(65) || keyIsDown(LEFT_ARROW)) { // A key or Left arrow\n this.x -= this.speed; // Move left by subtracting speed from position\n }\n if (keyIsDown(68) || keyIsDown(RIGHT_ARROW)) { // D key or Right arrow\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 if (!this.onGround) {\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 }\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 this.lives -= 1;\n if (this.lives <= 0) {\n // Reset the game or level when lives run out\n initializeLevel();\n this.lives = 3; // Reset lives to 3\n }\n }\n\n gainLife() {\n if (this.lives < 3) {\n this.lives += 1; // Increase lives by 1\n }\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Platformer Game\n \n\n\n\n \n \n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"bafdjnuzp0g8mddqlg5y","name":"player_walk1","deleted":false,"id":17596,"created_at":"2024-08-16T17:37:35.836439Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"jpvuvf5wcpjfttqdww28","name":"player_walk2","deleted":false,"id":17595,"created_at":"2024-08-16T17:37:35.835083Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"zkfpqzt0ml0rxpm5rv8l","name":"platform","deleted":false,"id":17594,"created_at":"2024-08-16T17:37:35.833782Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"frwufedhbwwc4g1mnk2o","name":"itemBox","deleted":false,"id":17593,"created_at":"2024-08-16T17:37:35.832378Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"garmpxdkiecoegjftdmd","name":"startPosition","deleted":false,"id":17592,"created_at":"2024-08-16T17:37:35.830698Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"wfanr2gbnspwtkdynutv","name":"flag_animation1","deleted":false,"id":17591,"created_at":"2024-08-16T17:37:35.829277Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"pbtb2rfs3puuyogbmmja","name":"flag_animation2","deleted":false,"id":17590,"created_at":"2024-08-16T17:37:35.827886Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"egeiqojret86pmn6rnyg","name":"coin","deleted":false,"id":17589,"created_at":"2024-08-16T17:37:35.826660Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"phqlhmv9wg4clmnmq7wz","name":"fullHeart","deleted":false,"id":17588,"created_at":"2024-08-16T17:37:35.825216Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"ngjahgwsax7q5puyqqke","name":"halfHeart","deleted":false,"id":17587,"created_at":"2024-08-16T17:37:35.823613Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"m0wwzkr2h13jxai00fng","name":"emptyHeart","deleted":false,"id":17586,"created_at":"2024-08-16T17:37:35.822112Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"orykhepxhhjjb3trudlt","name":"powerUp1","deleted":false,"id":17585,"created_at":"2024-08-16T17:37:35.820557Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"nszyfye8yht6bdjstly2","name":"hazard1","deleted":false,"id":17584,"created_at":"2024-08-16T17:37:35.818399Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"hcdg1avvcutu7zabhj0a","name":"enemy1","deleted":false,"id":17583,"created_at":"2024-08-16T17:37:35.817047Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"gnuxhs2mnzmztt98tyhm","name":"enemy2","deleted":false,"id":17582,"created_at":"2024-08-16T17:37:35.815749Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"ethrie9krox1f1vjtpnc","name":"enemy3","deleted":false,"id":17581,"created_at":"2024-08-16T17:37:35.814456Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"kix1cbhoxmfavzhz1jzy","name":"coverimg","deleted":false,"id":17580,"created_at":"2024-08-16T17:37:35.812976Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"dmahr0bgnl6toxsasfyw","name":"coverimg2","deleted":false,"id":17579,"created_at":"2024-08-16T17:37:35.811594Z","project_id":2728,"resource_type":"image"},{"cloudinary_id":"udxw7toywr7fvb02uulc","name":"gifThumbnail","deleted":false,"id":17578,"created_at":"2024-08-16T17:37:35.810036Z","project_id":2728,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}