Here is an 8 prompt process in canvas for a very simple p5.js game (And the resulting game) copy and paste to https://editor.p5js.org
Requests:
make a story mode rpg game in p5.js canvas
create the forest
only create everything in code, not file maps
expand the world size
add the magical herb
create an inventory
make the quest complete when the player has herb and is talking to the quest giver
make the quest giver be outside of the dark forest
'''
'''
Code In P5.js:
let player;
let npc;
let dialogueBox;
let dialogueIndex = 0;
let dialogues = [
"Hello, traveler!",
"I have a quest for you.",
"Head to the forest and find the magical herb.",
"Thank you for bringing the herb! Quest complete!"
];
let forest;
let magicalHerb;
let worldWidth = 1600;
let worldHeight = 1200;
let inventory = [];
let questComplete = false;
function setup() {
createCanvas(800, 600);
player = new Player(50, 50);
npc = new NPC(300, 200); // Place NPC outside of the forest
dialogueBox = new DialogueBox();
forest = new Forest();
magicalHerb = new MagicalHerb(random(800, worldWidth), random(400, worldHeight)); // Place the herb deeper into the forest
}
function draw() {
background(150, 200, 100); // Replace map image with a colored background to represent the map
push();
translate(width / 2 - player.x, height / 2 - player.y);
forest.display();
magicalHerb.display();
player.move();
player.display();
npc.display();
pop();
// Check for interaction
if (dist(player.x, player.y, npc.x, npc.y) < 50) {
dialogueBox.display();
}
// Check if player found the magical herb
if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
fill(0);
textSize(20);
textAlign(CENTER, CENTER);
text("You found the magical herb! Press 'E' to collect.", width / 2, height / 2);
}
// Display inventory
displayInventory();
}
function keyPressed() {
if (key === ' ') {
// Interact with NPC
if (dist(player.x, player.y, npc.x, npc.y) < 50) {
if (inventory.includes("Magical Herb") && !questComplete) {
dialogueIndex = 3; // Quest complete dialogue
questComplete = true;
} else {
dialogueIndex++;
if (dialogueIndex >= dialogues.length - 1 && !questComplete) {
dialogueIndex = 0; // End of dialogues if quest not complete
}
}
}
}
if (key === 'e' || key === 'E') {
// Collect the magical herb
if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
inventory.push("Magical Herb");
magicalHerb.collected = true;
}
}
}
function displayInventory() {
fill(255);
rect(10, 10, 200, 100);
fill(0);
textSize(16);
textAlign(LEFT, TOP);
text("Inventory:", 20, 20);
for (let i = 0; i < inventory.length; i++) {
text(`- ${inventory[i]}`, 20, 40 + i * 20);
}
}
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
}
move() {
if (keyIsDown(LEFT_ARROW)) {
this.x = max(0, this.x - 2);
}
if (keyIsDown(RIGHT_ARROW)) {
this.x = min(worldWidth, this.x + 2);
}
if (keyIsDown(UP_ARROW)) {
this.y = max(0, this.y - 2);
}
if (keyIsDown(DOWN_ARROW)) {
this.y = min(worldHeight, this.y + 2);
}
}
display() {
fill(0, 0, 255);
ellipse(this.x, this.y, this.size);
}
}
class NPC {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 40;
}
display() {
fill(255, 0, 0);
ellipse(this.x, this.y, this.size);
}
}
class DialogueBox {
display() {
fill(255);
rect(50, height - 150, width - 100, 100);
fill(0);
textSize(20);
textAlign(LEFT, TOP);
text(dialogues[dialogueIndex], 70, height - 130);
}
}
class Forest {
constructor() {
this.trees = [];
for (let i = 0; i < 200; i++) {
this.trees.push(new Tree(random(800, worldWidth), random(400, worldHeight))); // Trees are placed deeper in the forest
}
}
display() {
for (let tree of this.trees) {
tree.display();
}
}
}
class Tree {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = random(40, 80);
}
display() {
fill(34, 139, 34);
ellipse(this.x, this.y, this.size);
}
}
class MagicalHerb {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 20;
this.collected = false;
}
display() {
if (!this.collected) {
fill(0, 255, 0);
ellipse(this.x, this.y, this.size);
}
}
}