ChatGPT-4o with canvas : Your Thoughts and Experience

ChatGPT
,
64

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);
    }
  }
}