[TEMPLATE] Top-Down Adventure

{"name":"TEMPLATE Top Down Adventure","description":"Embark on an epic journey through a grid-based world in Screen Hopper Adventure! Explore and navigate through interconnected screens as you uncover hidden secrets and overcome challenges. With seamless screen transitions and a dynamic map system, every step you take brings new and exciting adventures!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/pnchukbwxzwkrjc0eyub","view_count":21,"fork_count":41,"expires_at":null,"created_at":"2025-08-06T08:50:28.479280Z","updated_at":"2025-08-06T08:50:28.479282Z","user_id":246,"status":"DELETED","parent_id":null,"id":1359,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"Bug.js":"class Bug {\n constructor(x, y, angleOffset) {\n this.x = x;\n this.y = y;\n this.size = 50;\n this.angle = angleOffset; // Each bug starts at a different angle in the circle\n this.img = bugImage;\n this.rotationSpeed = 0.03; // How fast the bugs rotate around the circle (radians per frame)\n this.baseRadius = 100; // Base radius of the circle\n this.radiusVariance = 50; // Maximum amount the radius can vary from the base\n this.centerMovementSpeed = 0.02; // Speed at which the center moves in its own circle\n this.centerCircleRadius = 30; // Radius of the circle the center moves in\n }\n\n update(centerX, centerY, elapsedTime) {\n this.angle += this.rotationSpeed; // Update the bug's angle\n\n // Update for center moving in a small circle\n let centerAngle = elapsedTime * this.centerMovementSpeed * 0.001; // Adjust the speed of center movement\n let movingCenterX = centerX + this.centerCircleRadius * cos(centerAngle);\n let movingCenterY = centerY + this.centerCircleRadius * sin(centerAngle);\n\n // Calculate radius using sine wave for shrinking and growing effect\n let currentRadius = this.baseRadius + sin(elapsedTime * 0.002) * this.radiusVariance; // 0.002 to adjust the sine wave speed for radius change\n\n // Calculate the bug's new position around a moving circle centered at (movingCenterX, movingCenterY)\n this.x = movingCenterX + currentRadius * Math.cos(this.angle);\n this.y = movingCenterY + currentRadius * Math.sin(this.angle);\n }\n\n draw() {\n image(this.img, this.x, this.y, this.size, this.size);\n }\n}","NPC.js":"class NPC {\n constructor(x, y, image, name, dialogue) {\n this.x = x;\n this.y = y;\n this.image = image;\n this.scaleFactor = 1;\n this.name = name;\n this.dialogue = dialogue; // Dialogue text\n this.dialogueOpen = false; // Track whether the dialogue is open\n }\n\n draw() {\n image(this.image, this.x - this.image.width * this.scaleFactor / 2, this.y - this.image.height * this.scaleFactor, this.image.width * this.scaleFactor, this.image.height * this.scaleFactor); // Adjust size as needed\n }\n\n toggleDialogue() {\n this.dialogueOpen = !this.dialogueOpen; // Toggle \n }\n\n isNear(player) {\n let d = dist(player.x, player.y, this.x, this.y - this.image.height * this.scaleFactor / 2); // Calculate distance to the NPC's feet\n return d < 100; // Returns true if player is within 100 pixels\n }\n\n displayDialogue() {\n if (!this.dialogueOpen) return; // Only display dialogue if dialogueOpen is true\n\n push(); // Save the current drawing style settings and configurations\n fill(245, 245, 220);\n stroke(0);\n strokeWeight(2);\n rectMode(CORNER);\n let dialogueWidth = width;\n let dialogueHeight = 100;\n let dialogueYPosition = height - dialogueHeight;\n rect(0, dialogueYPosition, dialogueWidth, dialogueHeight);\n fill(0);\n noStroke();\n textSize(18);\n textAlign(LEFT, CENTER);\n text(`${this.name}: ${this.dialogue}`, 20, dialogueYPosition + dialogueHeight / 2, dialogueWidth - 40); // Render the dialogue text with padding\n pop(); // Restore previous drawing style settings and configurations\n };\n}","Item.js":"////////// #CLASSES ///////////\n\n//Generic Item\nclass Item {\n constructor(name, icon) {\n this.name = name;\n this.icon = icon;\n }\n\n draw(x, y) {\n if (this.icon) {\n let imgSize = inventoryGrid.slotSize - 10; // Subtract a bit for padding\n image(this.icon, x - imgSize / 2, y - imgSize / 2, imgSize, imgSize);\n } else {\n // If icon is not available, display placeholder text\n fill(255);\n noStroke();\n textSize(16);\n textAlign(CENTER, CENTER);\n text('?', x, y);\n }\n }\n\n use() {\n console.log(this.name + \\\" used!\\\");\n }\n}","Enemy.js":"class Enemy {\n constructor(x, y, img) {\n this.x = x;\n this.y = y;\n this.img = img\n this.hp = 1;\n this.speed = 2;\n this.moveDirection = 'down';\n this.lastMoveTime = 0; // Last time the enemy moved in a direction\n this.moveInterval = 1000; // Enemy moves every 1 second\n }\n\n draw() {\n image(this.img, this.x, this.y, 100, 75);\n }\n\n\n moveTowardsPlayer(player) {\n if (millis() - this.lastMoveTime > this.moveInterval) {\n // Calculate direction towards player\n let xDiff = player.x - this.x;\n let yDiff = player.y - this.y;\n\n // Choose direction based on which axis has the greater difference\n //This way they move in cardinal directions, not diagonal\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n this.moveDirection = xDiff > 0 ? 'right' : 'left';\n } else {\n this.moveDirection = yDiff > 0 ? 'down' : 'up';\n }\n\n this.lastMoveTime = millis();\n }\n\n // Move enemy in chosen direction\n switch (this.moveDirection) {\n case 'up':\n this.y -= this.speed;\n break;\n case 'down':\n this.y += this.speed;\n break;\n case 'left':\n this.x -= this.speed;\n break;\n case 'right':\n this.x += this.speed;\n break;\n }\n }\n\n //If hitting the player\n update(player) {\n this.moveTowardsPlayer(player);\n this.draw();\n if (checkCollision({ x: this.x, y: this.y, w: 100, h: 75 }, { x: player.x, y: player.y, w: player.size, h: player.size })) {\n if (millis() - player.lastHurtTime >= player.hurtCooldown) {\n player.hp -= 1; // Decrement player's HP\n player.lastHurtTime = millis(); // Update the last hurt time\n console.log(\\\"That's gotta hurt!\\\");\n }\n }\n }\n //If get hit.\n takeDamage() {\n this.hp -= 1;\n if (this.hp <= 0) {\n console.log(\\\"R.I.P\\\");\n } else {\n console.log(\\\"Got 'em!\\\");\n }\n\n }\n\n checkCollisionWithHitbox(hitbox) {\n const enemyHitbox = { x: this.x, y: this.y, w: 100, h: 75 }; // Assuming these dimensions fit the drawn enemy\n return checkCollision(enemyHitbox, hitbox);\n }\n}","Grass.js":"class Grass {\n constructor(x, y, size) {\n this.x = x;\n this.y = y;\n this.size = size;\n }\n\n draw() {\n noStroke()\n fill('green');\n image(grassImage, this.x, this.y, this.size, this.size);\n }\n}","script.js":"// NEXT STEPS:\n// Idea 1: Expand the world to include more screens.\n// Idea 2: Add new items with new abilities.\n// Idea 3: Add chests, keys, and (locked) doors.\n// Idea 4: Create more enemies that behave differently.\n// Idea 5: Create a world map or a mini-map.\n\n/*\n TOP-DOWN ADVENTURE\n-----Template by Jippity-----\n\nModify this template to make your own adventure game!\n\nWalk, chat, attack, and play the flute in this Zelda-1-style template.\n\nEmails questions or bugs to support@jippity.pro\n*/\n\n//The player object, with all the stats and properties it needs\nlet player = {\n x: 400,\n y: 350,\n size: 30,\n speed: 5,\n hp: 3,\n direction: 'down',\n //so that the sprite can change with direction:\n upSprite: null,\n downSprite: null,\n leftSprite: null,\n rightSprite: null,\n lastHurtTime: 0,\n hurtCooldown: 1000, //in ms\n};\n\n//Some other variables we'll need\n\nlet keyPressState = { Q: false, E: false };\nlet jeff;\nlet fluteSong;\nlet walkingAnimation = { timer: 0, offset: 0, interval: 1000 / 12, range: 3 };\nlet flipSprite = -1;\nlet lastFlipTime = 0;\nlet lastGrassTouchTime = 0;\nlet gameState = \\\"playing\\\"; // Possible values: \\\"playing\\\", \\\"inventory\\\"\n//Setting up an inventory system\nlet inventory = {\n items: [],\n selected: 0,\n equipSlots: { Q: null, E: null }\n};\nconst inventoryGrid = {\n rows: 4,\n cols: 4,\n startX: 300, // X position of the grid's top-left corner\n startY: 150, // Y position of the grid's top-left corner\n slotSize: 50, // Size of each slot in the grid\n spacing: 10, // Spacing between slots\n};\nconst equippedSlotDimensions = {\n startX: 680, // Adjusted to place slots in the top right\n startY: 20, // Starting Y position for both slots\n size: 50, // Size of each square slot\n spacing: 10, // Spacing between slots\n};\n\n//lists of on-screen elements\nlet bombs = [];\nlet grasses = [];\nlet enemies = [];\nlet bugs = [];\n\nlet lastEnemySpawnTime = 0;\nlet enemySpawnInterval = 5000; // 5 seconds\nlet showInstructions = false;\n\n//The nine screens in the world, for now.\nlet screens = [\n [{ label: \\\"NW\\\" }, { label: \\\"N\\\" }, { label: \\\"NE\\\" }],\n [{ label: \\\"W\\\" }, { label: \\\"WELCOME\\\" }, { label: \\\"E\\\" }],\n [{ label: \\\"SW\\\" }, { label: \\\"S\\\" }, { label: \\\"SE\\\" }]\n];\n\nlet currentScreen = { row: 1, col: 1 }; //middle of 3x3 grid\n\n\n\n//image holders\nlet bombImage;\nlet swordImage;\nlet fluteImage;\nlet jeffImage;\nlet heartImage;\nlet grassImage;\nlet boomImage;\nlet tileImage;\nlet crabImage;\nlet bugImage;\n\n//Just load all the images and the flute sound.\nfunction preload() {\n player.upSprite = loadImage(\\\"@asset('up')\\\");\n player.downSprite = loadImage(\\\"@asset('down')\\\");\n player.leftSprite = loadImage(\\\"@asset('left')\\\");\n player.rightSprite = loadImage(\\\"@asset('right')\\\");\n jeffImage = loadImage(\\\"@asset('jeff')\\\")\n bombImage = loadImage(\\\"@asset('bomb')\\\");\n swordImage = loadImage(\\\"@asset('sword')\\\");\n fluteImage = loadImage(\\\"@asset('flute')\\\");\n heartImage = loadImage(\\\"@asset('heart')\\\");\n grassImage = loadImage(\\\"@asset('grass')\\\");\n boomImage = loadImage(\\\"@asset('BOOM')\\\");\n tileImage = loadImage(\\\"@asset('tile_0')\\\");\n crabImage = loadImage(\\\"@asset('crab')\\\")\n bugImage = loadImage(\\\"@asset('bug_dance')\\\")\n fluteSong = loadSound(\\\"@asset('fluteSong')\\\")\n}\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n loadScreenFeatures();\n\n inventory.items.push(new Sword(), new Bomb(), new Flute());\n}\n\n\nfunction draw() {\n if (gameState === \\\"playing\\\") {\n // Tile the ground\n for (let x = 0; x < width; x += tileImage.width) {\n for (let y = 0; y < height; y += tileImage.height) {\n image(tileImage, x, y);\n }\n }\n //background(220);\n displayScreenLabel();\n drawGrasses();\n handleMovement();\n\n drawBorders();\n drawInstructionsButton(); // Draw instructions button on playing state\n\n if (jeff) {\n jeff.draw(); // Draw Jeff if he exists in the current screen\n jeff.displayDialogue(); //And his dialogue\n }\n\n //For crab enemies\n if (currentScreen.row === 1 && currentScreen.col === 0) {\n let currentTime = millis();\n if (currentTime - lastEnemySpawnTime >= enemySpawnInterval) {\n let spawnPosition = getRandomCorner();\n enemies.push(new Enemy(spawnPosition.x, spawnPosition.y, crabImage));\n lastEnemySpawnTime = currentTime;\n }\n\n for (let i = enemies.length - 1; i >= 0; i--) {\n enemies[i].update(player);\n if (enemies[i].hp <= 0) {\n enemies.splice(i, 1); // Remove enemy if defeated\n }\n }\n }\n\n //For dancing bugs\n if (currentScreen.row === 1 && currentScreen.col === 2) {\n bugs.forEach(bug => {\n let elapsedTime = millis();\n bug.update(width / 2, height / 2, elapsedTime);\n bug.draw();\n });\n }\n\n drawPlayer();\n drawPlayerHP();\n updateEquippedItems();\n drawBombs();\n\n } else if (gameState === \\\"inventory\\\") {\n displayInventory();\n } else if (gameState === \\\"paused\\\") {\n displayInstructions();\n }\n //Show equipped slots regardless of gameState\n displayEquippedSlots();\n}\n\n//For screen transitions\nfunction changeScreen(direction) {\n let newRow = currentScreen.row;\n let newCol = currentScreen.col;\n\n // Determine the new screen based on direction\n if (direction === 'left' && newCol > 0) newCol--;\n else if (direction === 'right' && newCol < screens[0].length - 1) newCol++;\n else if (direction === 'up' && newRow > 0) newRow--;\n else if (direction === 'down' && newRow < screens.length - 1) newRow++;\n\n // Check if the new screen position is different from the current one\n if (newRow != currentScreen.row || newCol != currentScreen.col) {\n currentScreen.row = newRow;\n currentScreen.col = newCol;\n\n // Reset the player's position to the opposite side of the screen\n if (direction === 'left') player.x = width - player.size - 5;\n else if (direction === 'right') player.x = player.size + 5;\n else if (direction === 'up') player.y = height - player.size - 5;\n else if (direction === 'down') player.y = player.size + 5;\n\n loadScreenFeatures(); // Load the features of the new screen\n }\n}\n\n\nfunction updateEquippedItems() {\n Object.values(inventory.equipSlots).forEach(item => {\n if (item && typeof item.update === \\\"function\\\") {\n item.update();\n }\n });\n}\n\n//Draws the text on the ground\nfunction displayScreenLabel() {\n fill('yellow');\n stroke('green');\n strokeWeight(4);\n textSize(32);\n textAlign(CENTER, CENTER);\n text(screens[currentScreen.row][currentScreen.col].label, width / 2, height / 2);\n noStroke();\n}\n\n//For black borders at the edge of the world\nfunction drawBorders() {\n stroke('black');\n strokeWeight(15);\n\n // Draw top border if there's no neighbor above\n if (currentScreen.row === 0) {\n line(0, 0, width, 0);\n }\n // Draw bottom border if there's no neighbor below\n if (currentScreen.row === screens.length - 1) {\n line(0, height, width, height);\n }\n // Draw left border if there's no neighbor to the left\n if (currentScreen.col === 0) {\n line(0, 0, 0, height);\n }\n // Draw right border if there's no neighbor to the right\n if (currentScreen.col === screens[0].length - 1) {\n line(width, 0, width, height);\n }\n}\n\n//This loads whatever you should see on each screen.\nfunction loadScreenFeatures() {\n // Clear out the old stuff.\n grasses = [];\n enemies = [];\n bombs = [];\n jeff = null;\n\n //This just for the West screen...you could pop this out into its own function\n if (currentScreen.row === 1 && currentScreen.col === 0) {\n if (enemies.length === 0) {\n // Spawn an enemy from a random corner\n let initialEnemyPosition = getRandomCorner();\n enemies.push(new Enemy(initialEnemyPosition.x, initialEnemyPosition.y, crabImage)); // Assuming crabImage is the loaded image for the crab\n }\n }\n //North\n else if (currentScreen.row === 0 && currentScreen.col === 1) {\n //Make the NPC Jeff\n jeff = new NPC(width / 2, height / 3, jeffImage, \\\"Jeff\\\", \\\"I'm Jeff.\\\");\n jeff.scaleFactor = 0.25;\n } //Middle \n else if (currentScreen.row === 1 && currentScreen.col === 1) {\n let gridSize = 3; // 3x3 grid\n let grassSize = 60; // Define the size of each grass\n let gap = 50; // Gap between grasses\n let startX = (width - (gridSize * grassSize + (gridSize - 1) * gap)) / 2; // Center the grid horizontally\n let startY = (height - (gridSize * grassSize + (gridSize - 1) * gap)) / 2; // Center the grid vertically\n\n for (let i = 0; i < gridSize; i++) {\n for (let j = 0; j < gridSize; j++) {\n // Skip the middle grass to create a ring\n if (i === 1 && j === 1) continue;\n\n let x = startX + j * (grassSize + gap);\n let y = startY + i * (grassSize + gap);\n grasses.push(new Grass(x, y, grassSize));\n }\n }\n }\n //South\n else if (currentScreen.row === 2 && currentScreen.col === 1) {\n populateGrassesInSpiral();\n }\n}\n\n//Makes a spiral of grass\nfunction populateGrassesInSpiral() {\n let centerPoint = { x: width / 2, y: height / 2 };\n let gap = 10;\n let numRings = 4;\n\n for (let ring = 0; ring < numRings; ring++) {\n let ringRadius = ring * (60 + gap); //for spacing calculation\n let numGrassesInRing = ring === 0 ? 1 : ring * 8;\n\n for (let i = 0; i < numGrassesInRing; i++) {\n let angle = (i / numGrassesInRing) * Math.PI * 2;\n let grassSize = random(40, 70); // Randomize grass size\n let x = centerPoint.x + ringRadius * Math.cos(angle) - grassSize / 2;\n let y = centerPoint.y + ringRadius * Math.sin(angle) - grassSize / 2;\n\n grasses.push(new Grass(x, y, grassSize));\n }\n }\n}\n\nfunction drawGrasses() {\n for (let grass of grasses) {\n grass.draw();\n }\n}\n\n\nfunction drawPlayer() {\n let sprite;\n let scaleUp = 4;\n let verticalFlip = 1; // Not used yet, but prepped for consistency\n let offsetX = 0, offsetY = 0; //These will add a little bounce to the movement\n\n //For flashing effect when hit\n let transparency = 255;\n if (millis() - player.lastHurtTime < player.hurtCooldown) {\n transparency = (sin(millis() / 50) + 1) * 128;\n }\n\n // Determine if we need to flip the sprite horizontally this frame for up/down movement\n if (player.isMoving && (player.direction === 'up' || player.direction === 'down')) {\n if (millis() - lastFlipTime > 1000 / 12) { // Flip at a rate of 12x per second\n flipSprite *= -1; // Toggle between 1 and -1 for flipping horizontally\n lastFlipTime = millis();\n }\n } else if (!player.isMoving) {\n walkingAnimation.offset = 0; // Reset offset when not moving\n flipSprite = 1; // Ensure the sprite is not flipped when the player stops moving\n }\n\n // Choose the correct sprite based on the player's direction\n switch (player.direction) {\n case 'up':\n sprite = player.upSprite;\n break;\n case 'down':\n sprite = player.downSprite;\n break;\n case 'left':\n sprite = player.leftSprite;\n break;\n case 'right':\n sprite = player.rightSprite;\n break;\n default:\n sprite = player.downSprite; // Default sprite if no direction is matched\n break;\n }\n\n // Apply bouncing animation when moving left or right\n if (player.isMoving && (player.direction === 'left' || player.direction === 'right')) {\n if (millis() - walkingAnimation.timer > walkingAnimation.interval) {\n walkingAnimation.offset = walkingAnimation.offset === 0 ? walkingAnimation.range : 0;\n walkingAnimation.timer = millis();\n }\n offsetY = walkingAnimation.offset; // Apply vertical offset for left/right movement\n }\n\n // Apply horizontal flip only for up/down movement\n if (player.direction === 'up' || player.direction === 'down') {\n offsetX = flipSprite; // Use flipSprite to determine flip, with adjustment if necessary\n }\n\n if (sprite) {\n push(); // Save the current drawing state\n translate(player.x, player.y); // Apply translation to player's position\n scale(flipSprite, verticalFlip); // Apply horizontal flip if necessary\n tint(255, transparency);\n image(sprite, -sprite.width * scaleUp / 2 + offsetX, -sprite.height * scaleUp / 2 + offsetY, sprite.width * scaleUp, sprite.height * scaleUp);\n pop(); // Restore the original drawing state\n } else { //This is backup in case no sprite loads.\n fill(255, 0, 0, transparency);\n rect(player.x + offsetX, player.y + offsetY, player.size * 20, player.size * 20); // Draw a placeholder rectangle 20x bigger\n }\n}\n\nfunction drawPlayerHP() {\n for (let i = 0; i < player.hp; i++) {\n image(heartImage, 10 + i * 50, 10, 40, 40);\n }\n}\n\n//Player takes damage.\nfunction playerGetsHit() {\n if (player.hp > 0) {\n player.hp -= 1; // Decrement player's HP by 1\n console.log(\\\"Ouch! \\\" + player.hp + ' HP remaining.');\n }\n //And dies.\n if (player.hp <= 0) {\n alert(\\\"You're not feeling too hot...\\\");\n noLoop();\n\n }\n}\n\n//For player movement\nfunction handleMovement() {\n let isMoving = false;\n\n if ((keyIsDown(LEFT_ARROW) || keyIsDown(65)) && player.x > 5) {\n player.x -= player.speed;\n player.direction = 'left';\n isMoving = true;\n } else if ((keyIsDown(LEFT_ARROW) || keyIsDown(65)) && player.x <= 5) {\n changeScreen('left');\n isMoving = true;\n }\n\n if ((keyIsDown(RIGHT_ARROW) || keyIsDown(68)) && player.x < width - player.size / 2 - 5) {\n player.x += player.speed;\n player.direction = 'right';\n isMoving = true;\n } else if ((keyIsDown(RIGHT_ARROW) || keyIsDown(68)) && player.x >= width - player.size / 2 - 5) {\n changeScreen('right');\n isMoving = true;\n }\n\n if ((keyIsDown(UP_ARROW) || keyIsDown(87)) && player.y > 5) {\n player.y -= player.speed;\n player.direction = 'up';\n isMoving = true;\n } else if ((keyIsDown(UP_ARROW) || keyIsDown(87)) && player.y <= 5) {\n changeScreen('up');\n isMoving = true;\n }\n\n if ((keyIsDown(DOWN_ARROW) || keyIsDown(83)) && player.y < height - player.size / 2 - 5) {\n player.y += player.speed;\n player.direction = 'down';\n isMoving = true;\n } else if ((keyIsDown(DOWN_ARROW) || keyIsDown(83)) && player.y >= height - player.size / 2 - 5) {\n changeScreen('down');\n isMoving = true;\n }\n\n player.isMoving = isMoving;\n\n grasses.forEach((grass, index) => {\n if (checkCollision({ x: player.x, y: player.y, w: player.size, h: player.size }, { x: grass.x, y: grass.y, w: grass.size, h: grass.size })) {\n let currentMillis = millis();\n if (currentMillis - lastGrassTouchTime > 1000) {\n console.log(\\\"Touched grass.\\\"); //This could be replaced with a sound or visual effect\n lastGrassTouchTime = currentMillis;\n }\n }\n });\n}\n\n//Inventory Screen\nfunction displayInventory() {\n //background(80,80,160); \n\n //tiled background\n push();\n for (let x = 0; x < width; x += tileImage.width) {\n for (let y = 0; y < height; y += tileImage.height) {\n image(tileImage, x, y);\n }\n }\n pop();\n\n fill(80, 80, 160, 127);\n rect(0, 0, width, height);\n\n // Draw inventory background rectangle\n fill(50);\n const invWidth = inventoryGrid.cols * (inventoryGrid.slotSize + inventoryGrid.spacing) + inventoryGrid.spacing;\n const invHeight = inventoryGrid.rows * (inventoryGrid.slotSize + inventoryGrid.spacing) + inventoryGrid.spacing;\n rect(inventoryGrid.startX - inventoryGrid.spacing, inventoryGrid.startY - inventoryGrid.spacing, invWidth, invHeight, 10);\n\n // Draw inventory slots\n for (let i = 0; i < inventoryGrid.rows; i++) {\n for (let j = 0; j < inventoryGrid.cols; j++) {\n let slotX = inventoryGrid.startX + j * (inventoryGrid.slotSize + inventoryGrid.spacing);\n let slotY = inventoryGrid.startY + i * (inventoryGrid.slotSize + inventoryGrid.spacing);\n fill(100, 100, 200);\n stroke(100, 200, 100);\n strokeWeight(10);\n rect(slotX, slotY, inventoryGrid.slotSize, inventoryGrid.slotSize);\n noStroke()\n }\n }\n\n // Highlight and display items in inventory\n inventory.items.forEach((item, index) => {\n let row = Math.floor(index / inventoryGrid.cols);\n let col = index % inventoryGrid.cols;\n let itemX = inventoryGrid.startX + col * (inventoryGrid.slotSize + inventoryGrid.spacing) + inventoryGrid.slotSize / 2;\n let itemY = inventoryGrid.startY + row * (inventoryGrid.slotSize + inventoryGrid.spacing) + inventoryGrid.slotSize / 2;\n if (index === inventory.selected) { //Selected item\n fill('red');\n rect(inventoryGrid.startX + col * (inventoryGrid.slotSize + inventoryGrid.spacing), inventoryGrid.startY + row * (inventoryGrid.slotSize + inventoryGrid.spacing), inventoryGrid.slotSize, inventoryGrid.slotSize); // Redraw slot to highlight\n }\n\n // Use the draw method of the item for rendering\n item.draw(itemX, itemY);\n });\n\n displayEquippedSlots();\n}\n\n\n//Activate items with Q or E\nfunction useItem(key) {\n if (gameState !== \\\"playing\\\") return;\n\n let item = inventory.equipSlots[key];\n if (!item) return; // If no item equipped in this slot, leave the function\n\n //Otherwise, use the item\n item.use();\n}\n\n//Keyboard handling\nfunction keyPressed() {\n let keyUpper = key.toUpperCase(); // Normalize key input to uppercase\n\n if (keyUpper === 'P') {\n if (gameState === \\\"inventory\\\") {\n gameState = \\\"playing\\\";\n } else if (gameState === \\\"playing\\\") {\n gameState = \\\"inventory\\\";\n }\n return false;\n }\n\n if (gameState === \\\"inventory\\\") {\n // Handle inventory navigation and equipping\n handleInventoryControls(keyUpper);\n } else if (gameState === \\\"playing\\\") {\n // Update keyPressState for Q or E without resetting it after a timeout\n if (keyUpper === 'Q' || keyUpper === 'E') {\n keyPressState[keyUpper] = true; // Mark the key as pressed\n useItem(keyUpper);\n }\n }\n //space bar\n if (gameState === \\\"playing\\\" && key === ' ') {\n if (jeff && jeff.isNear(player)) {\n if (jeff.dialogueOpen) {\n jeff.toggleDialogue(); // Close dialogue if it's already open\n } else {\n console.log(\\\"Hey, Jeff.\\\")\n jeff.dialogueOpen = true; // Open dialogue only if it's not already open\n }\n return false; // Prevent default behavior\n }\n }\n return false; // Prevent any default behavior\n}\n\n\nfunction keyReleased() {\n let keyUpper = key.toUpperCase(); // Normalize key input to uppercase\n // Reset keyPressState for Q or E when the keys are released\n if (keyUpper === 'Q' || keyUpper === 'E') {\n keyPressState[keyUpper] = false;\n }\n return false; // Prevent any default behavior\n}\n\n//Controls on inventory screen\nfunction handleInventoryControls(keyUpper) {\n if (gameState !== \\\"inventory\\\") return;\n\n let cols = inventoryGrid.cols;\n let slots = ['Q', 'E']; // Define slots for easy navigation\n let maxIndex = inventory.items.length - 1 + slots.length; // Include equip slots in navigation\n\n // Navigate up or left\n if (keyCode === LEFT_ARROW || keyCode === UP_ARROW || keyUpper === 'W' || keyUpper === 'A') {\n if (inventory.selected === null) inventory.selected = maxIndex; // Wrap to the last item or slot\n else inventory.selected = (inventory.selected - 1 + maxIndex + 1) % (maxIndex + 1); // Cycle through items and slots\n }\n // Navigate down or right\n else if (keyCode === RIGHT_ARROW || keyCode === DOWN_ARROW || keyUpper === 'S' || keyUpper === 'D') {\n if (inventory.selected === null) inventory.selected = 0; // Start from the first item or slot\n else inventory.selected = (inventory.selected + 1) % (maxIndex + 1); // Cycle through items and slots\n }\n\n // Equipping/unequipping items with Q or E\n if ((keyUpper === 'Q' || keyUpper === 'E') && inventory.selected !== null) {\n equipItem(keyUpper);\n }\n}\n\nfunction equipItem(keyUpper) {\n // Handle special case for selecting Q or E slots directly\n let slots = ['Q', 'E'];\n let slotIndex = slots.indexOf(keyUpper);\n if (inventory.selected >= inventory.items.length) {\n // Selected one of the equip slots directly\n if (slotIndex !== -1 && inventory.equipSlots[keyUpper]) {\n inventory.items.push(inventory.equipSlots[keyUpper]); // Move to inventory\n inventory.equipSlots[keyUpper] = null; // Clear the slot\n inventory.selected = inventory.items.length - 1; // Highlight the item that was swapped off\n }\n } else {\n let selectedItem = inventory.items[inventory.selected];\n // For the Q and E slots\n if (slotIndex !== -1) {\n if (inventory.equipSlots[keyUpper]) {\n // Swap if something is already equipped\n inventory.items.push(inventory.equipSlots[keyUpper]); // Move the swapped off item back to inventory\n inventory.equipSlots[keyUpper] = selectedItem; // Equip the selected item\n inventory.items.splice(inventory.selected, 1); // Remove the newly equipped item from inventory\n inventory.selected = inventory.items.length - 1; // Highlight the item that was swapped off\n } else {\n // Equip the selected item and remove it from inventory\n inventory.equipSlots[keyUpper] = selectedItem;\n inventory.items.splice(inventory.selected, 1);\n inventory.selected = 0; // Highlight the top left item in the grid if no item was swapped off\n }\n }\n }\n}\n\nfunction displayEquippedSlots() {\n let startX = width - 120; // Adjusted for top-right positioning\n let startY = equippedSlotDimensions.startY;\n let slotSize = equippedSlotDimensions.size;\n let slotSpacing = equippedSlotDimensions.spacing;\n\n\n textSize(16);\n textAlign(CENTER, CENTER);\n textFont('Arial');\n\n function drawBezel(x, y, size, fillCol, shadowCol) {\n push();\n fill(shadowCol);\n rect(x + 2, y + 2, size, size); // Shadow layer\n fill(fillCol);\n rect(x, y, size, size); // Top layer\n pop();\n }\n\n let buttonColorQ = keyPressState.Q ? color('#FF0000') : color('#006400'); // Conditional color based on key state\n let buttonColorE = keyPressState.E ? color('#FF0000') : color('#006400');\n let shadowColor = color(0, 0, 0, 100); // Semi-transparent black for shadow\n\n drawBezel(startX, startY, slotSize, buttonColorQ, shadowColor);\n drawBezel(startX, startY + slotSize + slotSpacing, slotSize, buttonColorE, shadowColor);\n\n fill(255);\n text(\\\"Q\\\", startX + slotSize / 2, startY + slotSize / 2);\n text(\\\"E\\\", startX + slotSize / 2, startY + slotSize + slotSpacing + slotSize / 2);\n\n // Draw the equipped item icons\n if (inventory.equipSlots.Q) {\n inventory.equipSlots.Q.draw(startX + slotSize / 2, startY + slotSize / 2);\n }\n if (inventory.equipSlots.E) {\n inventory.equipSlots.E.draw(startX + slotSize / 2, startY + slotSize + slotSpacing + slotSize / 2);\n }\n}\n\n//For \\\"instruction manual\\\" in top right blue square\nfunction drawInstructionsButton() {\n let alpha = dist(mouseX, mouseY, width - 25, 25) < 20 ? 255 : 50; // Check distance from mouse to button center\n noStroke();\n fill(0, 0, 255, alpha); // Blue with variable opacity\n rect(width - 40, 10, 30, 30);\n}\n\nfunction displayInstructions() {\n if (!showInstructions) return;\n fill('rgba(100,100,100,0.9)');\n rect(width / 4, height / 4, width / 2, height / 2);\n fill(255);\n textSize(24);\n textAlign(CENTER, CENTER);\n text(\\\"Arrow keys or WASD to move.\\\\\n'P' to toggle inventory.\\\\\n'Q' and 'E' to use equipped items.\\\\\nSpace to chat.\\\", width / 2, height / 2);\n}\n\nfunction mousePressed() {\n if (dist(mouseX, mouseY, width - 25, 25) < 20 || showInstructions) {\n showInstructions = !showInstructions; // Toggle the display of instructions\n gameState = showInstructions ? \\\"paused\\\" : \\\"playing\\\";\n }\n}\n\n\n\n//Inherit Item properties then add more to the template.\nclass Sword extends Item {\n constructor() {\n super(\\\"Sword\\\", swordImage);\n this.swinging = false;\n this.swingDuration = 750;\n this.hitboxWidth = this.icon.width / 6; // fixed width for the hitbox, adjust as needed.\n this.hitboxHeight = this.icon.height / 6; // fixed height to match the sword's length, adjust.\n }\n\n use() {\n if (!this.swinging) {\n console.log(\\\"Swinging sword!\\\");\n this.swingStart = millis();\n this.swinging = true;\n this.swingEnd = this.swingStart + this.swingDuration;\n }\n }\n\n //Swing in a circle using rotate()\n update() {\n if (!this.swinging) return;\n\n let elapsed = millis() - this.swingStart;\n if (elapsed > this.swingDuration) {\n this.swinging = false;\n return;\n }\n\n let swingProgress = elapsed / this.swingDuration;\n let angle = map(swingProgress, 0, 1, -PI, PI);\n\n this.checkSwingHit(swingProgress, angle);\n\n push();\n translate(player.x, player.y);\n rotate(angle);\n image(this.icon, -this.icon.width / 12, -this.icon.height / 6, this.icon.width / 6, this.icon.height / 6);\n pop();\n };\n\n //Move hitbox to follow the swing.\n checkSwingHit(swingProgress, angle) {\n let hitbox = {\n x: player.x + cos(angle) * this.hitboxHeight / 2 - this.hitboxWidth / 2,\n y: player.y + sin(angle) * this.hitboxHeight / 2 - this.hitboxHeight / 2,\n w: this.hitboxWidth,\n h: this.hitboxHeight\n };\n\n //Did it hit an emeny?\n enemies.forEach((enemy, index) => {\n if (enemy.checkCollisionWithHitbox(hitbox)) {\n console.log(\\\"Take that!\\\");\n enemy.takeDamage();\n if (enemy.hp <= 0) {\n enemies.splice(index, 1); // Remove enemy if defeated\n }\n }\n });\n //or a grass?\n for (let i = grasses.length - 1; i >= 0; i--) {\n if (checkCollision(hitbox, { x: grasses[i].x, y: grasses[i].y, w: grasses[i].size, h: grasses[i].size })) {\n grasses.splice(i, 1); // Remove grass from the array if hit\n console.log(\\\"Cut that grass!\\\");\n }\n }\n };\n}\n\n\nclass Bomb extends Item {\n constructor() {\n super(\\\"Bomb\\\", bombImage);\n }\n\n use() {\n console.log(\\\"Throwing bomb!\\\");\n let movingDirectionX = (keyIsDown(LEFT_ARROW) || keyIsDown(65)) ? -1 : (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) ? 1 : 0;\n let movingDirectionY = (keyIsDown(UP_ARROW) || keyIsDown(87)) ? -1 : (keyIsDown(DOWN_ARROW) || keyIsDown(83)) ? 1 : 0;\n let initialSpeedX = movingDirectionX * player.speed * 2;\n let initialSpeedY = movingDirectionY * player.speed * 2;\n\n let bomb = {\n x: player.x,\n y: player.y,\n size: 60,\n deltaX: initialSpeedX, // These will be used to give the bombs the player's momentum\n deltaY: initialSpeedY,\n explodeTime: millis() + 1500, // Set to explode after 1500ms\n };\n bombs.push(bomb);\n }\n}\n\nfunction drawBombs() {\n for (let i = bombs.length - 1; i >= 0; i--) {\n let bomb = bombs[i];\n\n // Slow down the bomb by multiplying by 0.95 each frame, simulating friction\n bomb.deltaX *= 0.95;\n bomb.deltaY *= 0.95;\n\n // Stop the bomb if speed is small enough\n if (Math.abs(bomb.deltaX) < 0.01) bomb.deltaX = 0;\n if (Math.abs(bomb.deltaY) < 0.01) bomb.deltaY = 0;\n\n //The bomb slides along the ground with momentum\n bomb.x += bomb.deltaX;\n bomb.y += bomb.deltaY;\n\n // Check if the bomb is in the explosion phase\n if (bomb.exploding) {\n if (millis() - bomb.explodeTime > 500) {\n // Explosion duration has passed; remove bomb from array\n bombs.splice(i, 1);\n continue;\n } else {\n // Draw explosion hitbox\n image(boomImage, bomb.x - (bomb.size * 3 / 4), bomb.y - (bomb.size * 1 / 8), 100, 100);\n // Create a hitbox for the explosion\n let explosionHitbox = { x: bomb.x - 50, y: bomb.y - 50, w: 100, h: 100 };\n //check enemies nearby\n enemies.forEach((enemy, index) => {\n if (enemy.checkCollisionWithHitbox(explosionHitbox)) {\n console.log(\\\"Bomb hit enemy!\\\");\n enemy.takeDamage();\n if (enemy.hp <= 0) {\n enemies.splice(index, 1); // Remove enemy if defeated\n }\n }\n });\n // Check for collisions with grass and remove any that are hit\n for (let j = grasses.length - 1; j >= 0; j--) {\n if (checkCollision(explosionHitbox, { x: grasses[j].x, y: grasses[j].y, w: grasses[j].size, h: grasses[j].size })) {\n grasses.splice(j, 1);\n }\n }\n //And check player\n if (checkCollision(explosionHitbox, { x: player.x, y: player.y, w: player.size, h: player.size })) {\n if (millis() - player.lastHurtTime >= player.hurtCooldown) {\n if (player.hp > 0) {\n player.hp -= 1; // Decrement player's HP by 1\n player.lastHurtTime = millis(); // Update the last hurt time\n console.log(\\\"You just blew yourself up!\\\");\n }\n }\n }\n }\n } else if (millis() > bomb.explodeTime) {\n // Begin explosion phase\n bomb.exploding = true;\n bomb.explodeTime = millis(); // Reset explodeTime to mark the start of the explosion\n console.log(\\\"Bomb exploded at (\\\" + bomb.x + \\\", \\\" + bomb.y + \\\").\\\");\n // Add any visual or audio effects for the explosion here\n } else {\n // Draw bomb if it hasn't exploded yet\n image(bombImage, bomb.x - bombImage.width / 16, bomb.y - bombImage.height / 16 + 10, bombImage.width / 8, bombImage.height / 8);\n }\n }\n}\n\nclass Flute extends Item {\n constructor() {\n super(\\\"Flute\\\", fluteImage);\n }\n\n use() {\n console.log(\\\"Blow that flute!\\\");\n if (!fluteSong.isPlaying()) {\n fluteSong.setVolume(0.5);\n fluteSong.play(); // Play the song\n }\n\n // Check if we're on the east screen and no bugs are currently spawned\n if (currentScreen.row === 1 && currentScreen.col === 2 && bugs.length === 0) {\n const centerX = width / 2;\n const centerY = height / 2;\n const radius = 100; // Radius of the circle formed by bugs\n for (let i = 0; i < 10; i++) {\n // Calculate the angle offset for each bug to evenly space them in a circle\n let angleOffset = (Math.PI * 2 / 10) * i;\n bugs.push(new Bug(centerX, centerY, angleOffset));\n }\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n/////// HELPER FUNCTIONS\n\nfunction getRandomCorner() {\n const corners = [\n { x: 0, y: 0 },\n { x: width, y: 0 },\n { x: 0, y: height },\n { x: width, y: height }\n ];\n return corners[Math.floor(Math.random() * corners.length)];\n}\n\nfunction checkCollision(rect1, rect2) {\n return rect1.x < rect2.x + rect2.w &&\n rect1.x + rect1.w > rect2.x &&\n rect1.y < rect2.y + rect2.h &&\n rect1.y + rect1.h > rect2.y;\n}","style.css":"","index.html":"\n\n\n\n \n \n [TEMPLATE] Top-Down Adventure\n \n\n\n\n \n \n \n \n \n \n \n \n\n\n"},"chat_history":[],"assets":[{"project_id":1359,"creator":null,"cloudinary_id":"pnchukbwxzwkrjc0eyub","deleted":false,"id":16804,"created_at":"2024-08-09T17:37:36.728757Z","name":"gif","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"uhlmtsr3jup3kul2yeg4","deleted":false,"id":15773,"created_at":"2024-07-30T14:42:32.926475Z","name":"SS","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"uojzlqlokv0hopqekae4","deleted":false,"id":4075,"created_at":"2024-05-10T18:38:39.494785Z","name":"bug_dance","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"exdbzohr0afrhhkybfc9","deleted":false,"id":4068,"created_at":"2024-05-10T17:11:29.092239Z","name":"crab","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"rehbrcketvpbeg63m1vr","deleted":false,"id":4067,"created_at":"2024-05-10T17:05:02.388926Z","name":"fluteSong","resource_type":"audio","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"wgorrol5sw1ws7mplgn8","deleted":false,"id":4066,"created_at":"2024-05-10T16:14:48.027785Z","name":"tile_0","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"uspcqrnuysde0bplrfam","deleted":false,"id":4065,"created_at":"2024-05-10T16:03:38.241629Z","name":"BOOM","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"rknqkxckdafaz7jlxbxg","deleted":false,"id":4064,"created_at":"2024-05-10T15:22:24.217569Z","name":"left","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"wcehcvjipgwsd5aw3duf","deleted":false,"id":4063,"created_at":"2024-05-10T15:22:10.289055Z","name":"right","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"ugnwxszztnk6y1dcsauc","deleted":false,"id":4062,"created_at":"2024-05-10T15:21:44.433551Z","name":"up","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"u3mvapik1gfuoa3ubnaz","deleted":false,"id":4061,"created_at":"2024-05-10T15:21:27.523407Z","name":"down","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"q8hqq93kaehtvshltmw0","deleted":false,"id":4008,"created_at":"2024-05-10T14:39:40.811966Z","name":"grass","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"ygaylt3lpq1j1fiyhfwi","deleted":false,"id":4007,"created_at":"2024-05-10T14:23:06.982742Z","name":"heart","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"arw6qvmeg8mudepo4a3l","deleted":false,"id":3821,"created_at":"2024-05-08T16:38:14.447883Z","name":"jeff","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"koiyfta0h8yjhuzfcpel","deleted":false,"id":3819,"created_at":"2024-05-08T15:51:38.400277Z","name":"flute","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"pixlknkoawjhpzsjklfn","deleted":false,"id":3818,"created_at":"2024-05-08T15:24:41.218568Z","name":"sword","resource_type":"image","tags":null},{"project_id":1359,"creator":null,"cloudinary_id":"enxzsgthnhvxcuswhdvs","deleted":false,"id":3817,"created_at":"2024-05-08T15:22:48.426800Z","name":"bomb","resource_type":"image","tags":null}],"messages_sent":153,"comments":[{"content":"Oh wait is this a template?\r\n","id":775,"user_id":175,"user":{"photo":null,"email":null,"recess_id":"8c9ba9c6-bfef-5715-1533-e308e7255f5d","created_at":"2024-08-19T16:45:12.146972Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"sarran_british_boi","id":175,"password_hash":null,"updated_at":"2024-08-19T16:45:12.146981Z","reset_token_expiry":null,"subscription_status":null},"project_id":1359,"created_at":"2024-08-19T16:52:50.754575Z","updated_at":"2024-08-19T16:52:50.754577Z"}],"steps":[]}