Platformer Game

{"name":"Platformer Game 3-24-2025","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":1,"fork_count":0,"expires_at":null,"created_at":"2025-03-24T17:11:24.303775Z","updated_at":"2025-03-24T17:11:24.303779Z","user_id":70,"status":"PRIVATE","parent_id":1387,"id":6499,"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":100,"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":{"Enemy.js":"class Enemy {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 1; // Speed of enemy movement\n this.direction = 1; // Direction of movement: 1 for right, -1 for left\n }\n\n move() {\n // Update enemy position\n this.x += this.speed * this.direction;\n\n // Change direction when reaching bounds (for simplicity, we assume screen bounds)\n if (this.x <= 0 || this.x >= width / 2 - 16) {\n this.direction *= -1; // Reverse direction\n }\n }\n\n display() {\n // Display enemy as a simple shape (or replace with an image if desired)\n image(assets['enemy1'], this.x, this.y, 16, 16);\n }\n}\n\n","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 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 } else if (cell === 3) {\n if (this.x < platformX + 16 && this.x + 16 > platformX && this.y + 12 > platformY && this.y < platformY + 16) {\n gameIsOver = true; // Set game over state\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 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 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 gameIsOver = true; // Set game over state\n }\n }\n\n gainLife() {\n if (this.lives < 3) {\n this.lives += 1; // Increase lives by 1\n }\n }\n}","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\n// PLATFORMER TEMPLATE\n// ————— by Kristen —————\n// Assets by Kenney -- https://kenney.nl/assets/pixel-platformer\n\n// 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\nlet gameIsOver = false;\n\nlet enemies = [];\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, 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, 5, 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\nlet initialLevel = [\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, 5, 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);\n noSmooth();\n background(0, 150, 210);\n flagAnimationFrame = 0;\n initializeLevel();\n initializeEnemies(); // Initialize enemies\n}\n\nfunction draw() {\n if (gameIsOver) {\n displayGameOverScreen();\n } else {\n background(0, 150, 210);\n\n let camX = -player.x + width / 2.5 - 8;\n let camY = -player.y + height / 2.5 - 8;\n\n push();\n scale(1.25);\n translate(camX, camY);\n\n drawLevel();\n player.display();\n updateEnemies(); // Update and display enemies\n\n pop();\n\n player.displayLives();\n player.move();\n\n // Check if the player falls too far\n let fallThreshold = height + 50; // Set a threshold below the canvas height\n if (player.y > fallThreshold) {\n gameIsOver = true; // Set game over state\n }\n }\n}\n\nfunction displayGameOverScreen() {\n background(0, 0, 0, 150); // Semi-transparent black background\n textSize(32);\n fill(255);\n textAlign(CENTER, CENTER);\n text(\"Game Over\", width / 2, height / 2 - 20);\n textSize(16);\n text(\"Click to Play Again\", width / 2, height / 2 + 20);\n}\n\n// An empty list. We will add assets (images) to this.\nassets = {};\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\nfunction updateEnemies() {\n for (let enemy of enemies) {\n enemy.move();\n enemy.display();\n checkPlayerEnemyCollision(enemy);\n }\n}\n\nfunction initializeEnemies() {\n // Loop through the level matrix and create enemies where we find the value 5\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n if (level[i][j] === 5) { // Check for enemy value\n enemies.push(new Enemy(j * 16, i * 16)); // Add enemy at the corresponding pixel position\n }\n }\n }\n}\n\nfunction checkPlayerEnemyCollision(enemy) {\n // Simple collision detection\n if (player.x < enemy.x + 16 && player.x + 16 > enemy.x &&\n player.y < enemy.y + 16 && player.y + 16 > enemy.y) {\n if (!player.isInvulnerable) { // Check if player is not already invulnerable\n player.loseLife(); // Player loses a life\n player.invulnerabilityTime = millis() + 3000; // Set invulnerability for 3 seconds\n player.isInvulnerable = true; // Make player invulnerable\n }\n }\n}\n\nfunction mousePressed() {\n if (gameIsOver) {\n gameIsOver = false;\n initializeLevel(); // Restart the game and reset level\n }\n}\n\nfunction initializeLevel() {\n // Reset level to initial state\n level = JSON.parse(JSON.stringify(initialLevel)); // Deep copy to reset level\n\n // Initialize an empty enemies array\n enemies = [];\n\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 break; // Exit after positioning the player\n }\n }\n }\n\n // Initialize enemies based on the new level\n initializeEnemies();\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\n"},"chat_history":[{"project_id":6499,"sender":"ai","message":"It sounds like there might be an issue with how the enemies are being initialized, displayed, or moved. Let's troubleshoot and ensure that enemies are created correctly and visible on the screen.\n\n### Step 1: Check Initialization of Enemies\n\nMake sure that the enemies are being initialized correctly in the `initializeEnemies` function. Ensure that the level matrix has the correct value to spawn the enemies and that the enemy's `x` coordinate is calculated based on the pixel position.\n\nMake sure your level matrix includes enemies at specific coordinates (e.g., the value `5` for enemies):\n\n```javascript\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, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 2, 0, 0, 0, 0, 5, 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\n### Step 2: Update the `initializeEnemies` Function\n\nEnsure that the `initializeEnemies` function reads the level matrix correctly and spawns enemies at their intended positions:\n\n```javascript\nfunction initializeEnemies() {\n // Loop through the level matrix and create enemies where we find the value 5\n for (let i = 0; i < level.length; i++) {\n for (let j = 0; j < level[i].length; j++) {\n if (level[i][j] === 5) { // Check for enemy value\n enemies.push(new Enemy(j * 16, i * 16)); // Add enemy at the corresponding pixel position\n }\n }\n }\n}\n```\n\n### Step 3: Debug the `display` Method in the `Enemy` Class\n\nMake sure the `display` method in the `Enemy` class is correctly rendering the enemy image. Here is the relevant part of the `Enemy` class:\n\n```javascript\ndisplay() {\n // Display enemy as a simple shape (or replace with an image if desired)\n image(assets['enemy1'], this.x, this.y, 16, 16); // Ensure the image is assigned correctly\n}\n```\n\n### Step 4: Check Asset Loading\n\nEnsure that the enemy images are being loaded correctly in the `preload` function:\n\n```javascript\nfunction preload() {\n assets['enemy1'] = loadImage(\"@asset('enemy1')\"); // Ensure this line exists\n // Load other assets...\n}\n```\n\n### Step 5: Test Visibility\n\nFinally, you can add a debug statement to check the position of enemies after initialization:\n\n```javascript\nconsole.log(enemies); // Add this in the console to see if enemies are created\n```\n\n### Summary\n\n- Ensure the level matrix contains the correct values for enemies.\n- Verify the `initializeEnemies` function correctly creates enemies based on the matrix.\n- Check that the `display` method is rendering the enemy images.\n- Confirm that the asset loading in the `preload` function is correct.\n\nLet me know if you still have issues after these checks, and we can troubleshoot further!","deleted":0,"created_at":"2025-03-24T17:27:04.698366Z","output_tokens":745,"code_id":220827,"input_tokens":6616,"id":120997}],"assets":[{"cloudinary_id":"bafdjnuzp0g8mddqlg5y","name":"player_walk1","deleted":false,"id":62634,"created_at":"2025-03-24T17:11:24.669463Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"jpvuvf5wcpjfttqdww28","name":"player_walk2","deleted":false,"id":62633,"created_at":"2025-03-24T17:11:24.653349Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"zkfpqzt0ml0rxpm5rv8l","name":"platform","deleted":false,"id":62632,"created_at":"2025-03-24T17:11:24.636753Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"frwufedhbwwc4g1mnk2o","name":"itemBox","deleted":false,"id":62631,"created_at":"2025-03-24T17:11:24.607765Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"garmpxdkiecoegjftdmd","name":"startPosition","deleted":false,"id":62630,"created_at":"2025-03-24T17:11:24.580058Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"wfanr2gbnspwtkdynutv","name":"flag_animation1","deleted":false,"id":62629,"created_at":"2025-03-24T17:11:24.558142Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"pbtb2rfs3puuyogbmmja","name":"flag_animation2","deleted":false,"id":62628,"created_at":"2025-03-24T17:11:24.528524Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"egeiqojret86pmn6rnyg","name":"coin","deleted":false,"id":62627,"created_at":"2025-03-24T17:11:24.502669Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"phqlhmv9wg4clmnmq7wz","name":"fullHeart","deleted":false,"id":62626,"created_at":"2025-03-24T17:11:24.492763Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"ngjahgwsax7q5puyqqke","name":"halfHeart","deleted":false,"id":62625,"created_at":"2025-03-24T17:11:24.467426Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"m0wwzkr2h13jxai00fng","name":"emptyHeart","deleted":false,"id":62624,"created_at":"2025-03-24T17:11:24.466263Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"orykhepxhhjjb3trudlt","name":"powerUp1","deleted":false,"id":62623,"created_at":"2025-03-24T17:11:24.465044Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"nszyfye8yht6bdjstly2","name":"hazard1","deleted":false,"id":62622,"created_at":"2025-03-24T17:11:24.461905Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"hcdg1avvcutu7zabhj0a","name":"enemy1","deleted":false,"id":62621,"created_at":"2025-03-24T17:11:24.459574Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"gnuxhs2mnzmztt98tyhm","name":"enemy2","deleted":false,"id":62620,"created_at":"2025-03-24T17:11:24.432068Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"ethrie9krox1f1vjtpnc","name":"enemy3","deleted":false,"id":62619,"created_at":"2025-03-24T17:11:24.404291Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"kix1cbhoxmfavzhz1jzy","name":"coverimg","deleted":false,"id":62618,"created_at":"2025-03-24T17:11:24.379359Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"dmahr0bgnl6toxsasfyw","name":"coverimg2","deleted":false,"id":62617,"created_at":"2025-03-24T17:11:24.338843Z","project_id":6499,"resource_type":"image"},{"cloudinary_id":"udxw7toywr7fvb02uulc","name":"gifThumbnail","deleted":false,"id":62616,"created_at":"2025-03-24T17:11:24.337498Z","project_id":6499,"resource_type":"image"}],"messages_sent":10,"comments":[],"steps":[]}