Platformer Game

{"name":"Kristen's Platformer","description":"use arrows and space","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/nh1z2vz15omhq7mwqzlq","view_count":5,"fork_count":0,"expires_at":null,"created_at":"2025-08-21T18:47:00.260705Z","updated_at":"2025-08-21T18:47:00.260707Z","user_id":70,"status":"PUBLIC","parent_id":1387,"id":9711,"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":200,"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":{"Player.js":"// 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\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}","script.js":"// A player variable. We will make this a richer object with attributes and abilities soon.\nlet player;\n\n// This number stores which frame of the flag animation we're on. We'll use it later.\nlet flagAnimationFrame = 0;\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, 1, 1, 1, 1, 1, 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// 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\nfunction setup() {\n createCanvas(400, 370); // Create a 400x370 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\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.5 - 8; // Adjusted for zoom\n let camY = -player.y + height / 2.5 - 8; // Adjusted for zoom\n\n // Apply camera transformation with zoom\n push(); // Enter new drawing settings.\n scale(1.25); // Zoom in 1.25x\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\n\n\n// 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\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// 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\nfunction keyPressed() {\n if (keyCode === 32 && player.onGround) { // Spacebar key\n player.jump();\n }\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":[{"creator":null,"project_id":9711,"cloudinary_id":"ebcvvgby8ukugi9bh6qk","deleted":false,"id":85035,"name":"player_walk1","created_at":"2025-08-21T18:44:28.861911Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"nrsp9nqflxhdrobttagb","deleted":false,"id":85034,"name":"player_walk2","created_at":"2025-08-21T18:44:28.814075Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"owsnh888corvp2ntlknj","deleted":false,"id":85033,"name":"platform","created_at":"2025-08-21T18:44:28.765948Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"k1fsatybdsahmkybuwj7","deleted":false,"id":85032,"name":"itemBox","created_at":"2025-08-21T18:44:28.717921Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"pcbvqpaihakxtx5x9ugp","deleted":false,"id":85031,"name":"startPosition","created_at":"2025-08-21T18:44:28.669779Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"xr8spqwcp5aql8ntocov","deleted":false,"id":85030,"name":"flag_animation1","created_at":"2025-08-21T18:44:28.619163Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"ft7kclijl0rvpzfaxz3p","deleted":false,"id":85029,"name":"flag_animation2","created_at":"2025-08-21T18:44:28.570954Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"cbhthf0avkt0cherdmeg","deleted":false,"id":85028,"name":"coin","created_at":"2025-08-21T18:44:28.520975Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"pfwvd91h7rvzqwjsj09i","deleted":false,"id":85027,"name":"fullHeart","created_at":"2025-08-21T18:44:28.471621Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"pddbtbdoo5ormcik2mjr","deleted":false,"id":85026,"name":"halfHeart","created_at":"2025-08-21T18:44:28.421996Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"m7mpcjkzliggqbht6c2n","deleted":false,"id":85025,"name":"emptyHeart","created_at":"2025-08-21T18:44:28.373449Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"h0ejuhhfutotthtpq6pr","deleted":false,"id":85024,"name":"powerUp1","created_at":"2025-08-21T18:44:28.325511Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"xlxqdmezx3pkz7orzm0a","deleted":false,"id":85023,"name":"hazard1","created_at":"2025-08-21T18:44:28.275438Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"gpgx98ew1aodosvxvxes","deleted":false,"id":85022,"name":"enemy1","created_at":"2025-08-21T18:44:28.225756Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"elehoziqcpztycuemj3f","deleted":false,"id":85021,"name":"enemy2","created_at":"2025-08-21T18:44:28.177370Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"zxronmhnkn4fyczak4ja","deleted":false,"id":85020,"name":"enemy3","created_at":"2025-08-21T18:44:28.129413Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"nh1z2vz15omhq7mwqzlq","deleted":false,"id":85019,"name":"coverimg","created_at":"2025-08-21T18:44:28.081588Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"nh1z2vz15omhq7mwqzlq","deleted":false,"id":85018,"name":"coverimg2","created_at":"2025-08-21T18:44:28.033330Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9711,"cloudinary_id":"nh1z2vz15omhq7mwqzlq","deleted":false,"id":85017,"name":"gifThumbnail","created_at":"2025-08-21T18:44:27.985211Z","resource_type":"image","tags":[]}],"messages_sent":0,"comments":[],"steps":[]}