How to make objects interact-able?

So I’m making a escape room style game for a school class but i have no real idea how to make it work properly.
I have a ton of classes for different objects that i can place in different parts of the room, but i need to be able to have the character interact with them e.g. make it so when I go up to a desk a menu will pop up or when I go to the door with the key it will take you to a different room.

Here’s all of the code I’ve written. most of it is just the classes to make the different objects

var mmenu = true;
var menu=true;
var room1 = false;
var room2 = false;
var room3 = false;
var room4 = false;

function setup() {
  createCanvas(400, 400);
  bed = new Bed(130,75);
  clo = new Closet();
  chest = new Chest(50, 35);
  kp = new Keypad(width / 2, height / 2, 16, 5);
  kp2 = new Keypad2();
  rug = new Rug(60, 90);
  td = new Trapdoor(width / 2, height / 2, 60, 70, 15, 11);
  step = new Step(width / 2, height / 2, 60, 70);
  mir = new Mirror(width / 2, height / 2, 50, 6);
  desk = new Desk(85, 47, 150, 75);
  chair = new Chair(90, 95, 40, 35);
  brb = new BIGREDBUTTON(width / 2, height / 2, 15, 15);
  butt = new Button(width / 2, height / 2, 16,5);
  pap= new Paper(width / 2, height / 2, 25,30);
  ak= new Antiquekey(width / 2, height / 2,1,1);
  nkey=new Key(width / 2, height / 2,1,1);
  clock=new Clock(width / 2, height / 2,20,20);
  walltb=new Wall(width/2,height-5,width/2,height-height+5,width,10);
  walls=new Wall(width-5,height/2,width-width+5,height/2,10,height);
  trash= new Trash(180,20,20,15);
  flr=new Floor(0,200,10,height);
  sprite= new Sprite();
}                 

function draw() {
  background(220);
  flr.display();
  walltb.display();
	walls.display();
  bed.display();
  clo.display();
  //chest.display();
  //kp.display();
  //kp2.display();
  //rug.display();
  //td.display();
  //step.display();
  //mir.display();
  chair.display();
  desk.display();
  //brb.display();
  //butt.display();
  //pap.display();
  //ak.display();
  //nkey.display();
  //clock.display();
  trash.display();
  sprite.display();
  sprite.move();
  
//this part was explained to me by another student and i kinda understand but not really
//if(mmenu){
//background();
//
//mousePressed(){
//	if(user clicks start){
//		mmenu=false
//		room1=true
//		}
//	}
//}
//
//etc
//
}
//
//if(mmenu){
//background();
//
//mousePressed(){
//	if(){
//		mmenu=false
//		room1=true
//		}
//	}
//}
//
//etc
//
class Bed {
  constructor(l,w) {
    this.x = 80
    this.y = 200
    this.w = w
    this.l = l
    this.d = 15
  }
  display() {
    rectMode(CENTER);
    fill(51, 31, 20);
    stroke(33, 19, 11);
    rect(this.x, this.y, this.l, this.w + 10);
    fill(237, 214, 177);
    rect(this.x, this.y, this.l, this.w);
    fill(237, 224, 203);
    rect(this.x - 42, this.y, this.l / 5, this.w / 2, 2);
    fill(63, 0, 23);
    rect(this.x + 15, this.y, this.l - 25, this.w);
    fill(51, 31, 20);
		rect(this.x - 63, this.y, this.l / 10, this.w);
    rect(this.x + 63, this.y, this.l / 10, this.w);
    ellipse(this.x - 63, this.y - 38, this.d);
    ellipse(this.x + 63, this.y - 38, this.d);
    ellipse(this.x + 63, this.y + 38, this.d);
    ellipse(this.x - 63, this.y + 38, this.d);
  }
  interact() {

  }
}
class Closet {
  constructor() {
    this.x = 365
    this.y = 300
    this.l = 50
    this.w = 75
  }
  display() {
    rectMode(CENTER);
    //fill();
    rect(this.x, this.y, this.l, this.w);
    //fill();
    rect(this.x, this.y, this.l / 1.2, this.w / 1.2);
    rect(this.x, this.y - (this.w / 2.6), this.l / 1.2, this.w / 10);
    rect(this.x, this.y - (this.w / 3.5), this.l / 1.2, this.w / 10);
    rect(this.x, this.y - (this.w / 5.4), this.l / 1.2, this.w / 10);
    rect(this.x, this.y - (this.w / 10), this.l / 1.2, this.w / 10);
    rect(this.x, this.y + (this.w / 2.6), this.l / 1.2, this.w / 10);
    rect(this.x, this.y + (this.w / 3.5), this.l / 1.2, this.w / 10);
    rect(this.x, this.y + (this.w / 5.4), this.l / 1.2, this.w / 10);
    rect(this.x, this.y + (this.w / 10), this.l / 1.2, this.w / 10);
  }
  interact() {
		function keyPressed(){
    	if(key===32){
      	if(menu){
           }
      }
    }
  }
}
class Chest {
  constructor(l, w) {
    this.x = 200
    this.y = 200
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    //fill();
    rect(this.x, this.y, this.l, this.w, 8, 8, 5, 5);
    //fill();
    rect(this.x - (this.l / 3), this.y, this.l / 10, this.w);
    rect(this.x + (this.l / 3), this.y, this.l / 10, this.w);
  }
  interact() {

  }
}
class Keypad {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    rect(this.x, this.y, this.l, this.w);
  }
  interact() {

  }
}
class Keypad2 {
  constructor() {
    this.x = 200
    this.y = 200
    this.l = 225
    this.w = 300
  }
  display() {
    rectMode(CENTER);
    //fill();
    rect(this.x, this.y, this.l, this.w);
    rect(this.x, this.y, this.l / 1.1, this.w / 1.08);
    //fill
    rect(this.x - 75, this.y, this.l / 5, this.w / 10);
    rect(this.x - 25, this.y, this.l / 5, this.w / 10);
    rect(this.x + 25, this.y, this.l / 5, this.w / 10);
    rect(this.x + 75, this.y, this.l / 5, this.w / 10);
    rect(this.x - 75, this.y + this.w / 5, this.l / 5, this.w / 10);
    rect(this.x - 25, this.y + this.w / 5, this.l / 5, this.w / 10);
    rect(this.x + 25, this.y + this.w / 5, this.l / 5, this.w / 10);
    rect(this.x + 75, this.y + this.w / 5, this.l / 5, this.w / 10);
    rect(this.x - 25, this.y + this.w / 2.55, this.l / 5, this.w / 10);
    rect(this.x + 25, this.y + this.w / 2.55, this.l / 5, this.w / 10);
    //fill();
    rect(this.x, this.y - 85, this.l / 1.2, this.w / 3);
  }
  interact() {

  }
}
class Rug {
  constructor(l, w) {
    this.x = width / 2
    this.y = height / 2
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    //fill();
    rect(this.x, this.y, this.l, this.w);
    //fill();
    rect(this.x - this.l / 2.35, this.y, this.l / 6, this.w);
    //fill();
    rect(this.x - this.l / 3.8, this.y, this.l / 6, this.w);
    //fill();
    rect(this.x - this.l / 11, this.y, this.l / 6, this.w);
    //fill();
    rect(this.x + this.l / 2.35, this.y, this.l / 6, this.w);
    //fill();
    rect(this.x + this.l / 3.8, this.y, this.l / 6, this.w);
    //fill();
    rect(this.x + this.l / 11, this.y, this.l / 6, this.w);
  }
  interact() {

  }
}
class Trapdoor {
  constructor(x, y, l, w, hw, hl) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
    this.hw = this.l / 4
    this.hl = this.w / 6.1
  }
  display() {
    rectMode(CENTER);
    rect(this.x, this.y, this.l, this.w);
    rect(this.x, this.y, this.l / 3, this.w);
    rect(this.x, this.y - this.w / 2, this.l / 1.3, this.w / 10);
    ellipse(this.x, this.y + this.w / 3, this.hw, this.hl)
    ellipse(this.x, this.y + this.w / 3, this.hw / 1.3, this.hl / 2)
  }
  interact() {

  }
}
class Step {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    fill(150);
    rect(this.x, this.y, this.l, this.w);
    fill(75);
    rect(this.x, this.y, this.l, this.w / 3);
    fill(25);
    rect(this.x, this.y + this.w / 3, this.l, this.w / 3);
  }
  interact() {

  }
}
class Mirror {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    fill(81, 51, 30);
    rect(this.x, this.y, this.l, this.w);
  }
  interact() {

  }
}
class Desk {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    fill(81, 51, 30);
    stroke(40, 24, 12);
    rect(this.x, this.y, this.l, this.w);
    rect(this.x - (this.w / 1.04), this.y - 10, this.l / 30, this.w / 2);
    rect(this.x + (this.w / 1.04), this.y - 10, this.l / 30, this.w / 2);
    rect(this.x, this.y - (this.w / 3), this.l, this.w / 3);
    fill(229, 222, 197);
    ellipse(this.x - this.w / 2, this.y - this.w / 3, this.w / 6, this.w / 6);
    noStroke();
    fill(255, 244, 96);
    ellipse(this.x + this.w / 1.2, this.y - this.w / 3, this.w / 5, this.w / 5);
    fill(255, 244, 96, 150);
    ellipse(this.x + this.w / 1.2, this.y - this.w / 3, this.w / 3, this.w / 3);
    fill(72, 91, 56);
    stroke(0);
    rect(this.x, this.y + this.w / 6, this.l / 2, this.w / 1.7);
    fill(237, 215, 201);
    rect(this.x, this.y + this.w / 6, this.l / 2.4, this.w / 2.3);
    rect(this.x + this.w / 2, this.y + this.w / 9, this.l / 8, this.w / 3);

  }
  interact() {

  }
}
class Chair {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    fill(33, 28, 20);
    rect(this.x, this.y, this.l, this.w, 10);
    fill(48, 41, 29);
    rect(this.x - this.l / 2.5, this.y, this.l / 5, this.w / 1.2, 3);
    rect(this.x + this.l / 2.5, this.y, this.l / 5, this.w / 1.2, 3);
    rect(this.x, this.y + this.w / 3, this.l, this.w / 3, 5);
  }
  interact() {

  }
}
class BIGREDBUTTON {
  constructor(x, y, l, w) {
    this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    ellipseMode(CENTER);
    rect(this.x, this.y, this.l, this.w);
    ellipse(this.x, this.y, this.l * (2 / 3), this.w * (2 / 3));
  }
  interact() {

  }
}
class Button {
  constructor(x, y, l, w) {
		this.x = x
    this.y = y
    this.l = l
    this.w = w
  }
  display() {
    rectMode(CENTER);
    rect(this.x, this.y+this.w/1.5, this.l/2, this.w);
		rect(this.x, this.y, this.l, this.w);
  }
  interact() {

  }
}
class Paper {
  constructor(x,y,l,w) {
		this.x=x
    this.y=y
    this.l=l
    this.w=w
  }
  display() {
		rectMode(CENTER);
    rect(this.x, this.y, this.l, this.w);
  }
  interact() {

  }
}
class Antiquekey {
  constructor(x,y,l,w) {
		this.x=x
    this.y=y
    this.l=l
    this.w=w
  }
  display() {
		rectMode(CENTER);
    ellipseMode(CENTER);
    //noStroke();
    fill(229, 192, 89);
    rect(this.x,this.y,this.l*4,this.w*20);
    rect(this.x-this.l*5.2,this.y-this.w*5,this.l*7,this.w*2);
    rect(this.x-this.l*5.2,this.y-this.w,this.l*7,this.w*2);
    ellipse(this.x-1,this.y+this.w*10,this.l*10,this.w*10);
  }
  interact() {

  }
}
class Key {
  constructor(x,y,l,w) {
		this.x=x
    this.y=y
    this.l=l
    this.w=w
  }
  display() {
    rectMode(CENTER);
    noStroke();
    fill(229, 192, 89);
    rect(this.x+1,this.y-6,this.l*3,this.w*12);
		ellipse(this.x,this.y,this.l*7,this.w*7);
    triangle(this.x,this.y-4,this.x-3,this.y-6,this.x,this.y-8);
    triangle(this.x,this.y-8,this.x-3,this.y-10,this.x,this.y-12)
  }
  interact() {

  }
}
class Clock {
  constructor(x,y,l,w) {
		this.x=x
    this.y=y
    this.l=l
    this.w=w
  }
  display() {
    rectMode(CENTER);
		rect(this.x,this.y,this.l,this.w/1.5,0,0,3);
  }
  interact() {

  }
}
class Wall{
	constructor(x1,y1,x2,y2,l,w) {
		this.x=x1
    this.y=y1
    this.x2=x2
    this.y2=y2
    this.l=l
    this.w=w
  }
  display() {
    rectMode(CENTER);
    fill(51, 31, 20)
    noStroke();
		rect(this.x,this.y,this.l,this.w);
    rect(this.x2,this.y2,this.l,this.w);
  }
  interact() {

  }
}
class Door {
  constructor() {

  }
  display() {
	
  }
  interact() {

  }
}
class Trash {
  constructor(x,y,l,w) {
		this.x=x
    this.y=y
    this.l=l
    this.w=w
  }

display() {
    rectMode(CENTER);
    noStroke();
    fill(255);
		rect(this.x,this.y,this.l,this.w,10);
    fill(200);
    rect(this.x,this.y,this.l/1.2,this.w/1.2,10);
  }
  interact() {

  }
}
class Floor{
  constructor(x,y,l,w){
  	this.x=x     
    this.y=y
    this.l=l
    this.w=w
  }
  display(){
    rectMode(CENTER);
  	for(this.x=0;this.x<=width;this.x+=10){
      fill(155, 76, 27);
      stroke(81, 35, 7);
    	rect(this.x,this.y,this.l,this.w);
    }
  }
}
class Sprite{
	constructor(){
		this.x=200
    this.y=200
    this.w=20
	}
	
  display(){
  	ellipse(this.x,this.y,this.w);
    //rect(this.x,this.y,this.w*1.5,this.w/2,5);
  }
  
  move(){
    if (keyIsDown(LEFT_ARROW)) {
    this.x += -1.75
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += 1.75
    }
    if (keyIsDown(UP_ARROW)) {
      this.y += -1.75
    }
    if (keyIsDown(DOWN_ARROW)) {
      this.y += 1.75
    }
  }
}
1 Like

At a high level it sounds like you’re looking for collision detection. Shameless self-promotion: here is a guide on collision detection:

It’s written for Processing, but all of the basic ideas still apply.

I’d also recommend that you get something simpler working first. Break your problem down into smaller steps and then take those steps on one at a time. Can you create a simpler example program that shows two hard-coded rectangles? Get that working before you try implementing it in your bigger project. Then if you get stuck, you can ask a more specific question. Good luck!

1 Like