trying to get my boxes to not touch each other

[anaismveras]

What's the problem you're trying to solve?

so when i play the game, there is trash and there are Beach goers but sometimes the trash goes under the Beach Goer where either I cant see it or I cant get to it to get the point

Post any code you think might be relevant (one fenced block per file)

function Trash (x, y, color, width, height) {
    this.x = x
    this.y = y
    this.height = height
    this.color = color
    this.width = width
    this.alive = true
    this.render = function() {
        ctx.fillStyle = this.color
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}

// creating a trash and letting it slide into the screen at random y-axis
const createTrash = () => {
    let generateRandomY = Math.floor(Math.random() * ctx.height)
    let garbage = new Trash(1, generateRandomY, 'red', 10, 20)
    if (garbage.y <=0) {
        garbage.y = 0
    }
    if (garbage.y + garbage.height >= ctx.height) {
        garbage.y = ctx.height - garbage.height
    }
    trashArray.push(garbage)
}
const trashInterval = setInterval(createTrash, 1500)

// BeachGoer Movement
function BeachGoer (x, y, color, width, height) {
    this.x = x
    this.y = y
    this.color = color
    this.height = height
    this.width = width
    this.alive = true
    this.render = function() {
        ctx.fillStyle = this.color
        ctx.fillRect(this.x, this.y, this.width, this.height)
    }
}

const createBeachGoer = () => {
    let generateRandomY = Math.floor(Math.random() * ctx.height)
    let beachGoers = new BeachGoer(1, generateRandomY, 'lightgreen', 20, 40)
    if (beachGoers.y <=0) {
        beachGoers.y = 0
    }
    if (beachGoers.y + beachGoers.height >= ctx.height) {
        beachGoers.y = ctx.height - beachGoers.height
    }
    beachGoerArray.push(beachGoers)
}
const beachGoerInterval = setInterval(createBeachGoer, 2000)

// detecting if trash is hit than one point will add to trash points
const ditectTrashHit = () => {
    for(let i = 0; i < trashArray.length; i++) {
        if (galleria.x < trashArray[i].x + trashArray[i].width &&
            galleria.x + galleria.width > trashArray[i].x && 
            galleria.y < trashArray[i].y + trashArray[i].height &&
            galleria.y + galleria.height > trashArray[i].y) {
                trashArray[i].alive = false 
                if (trashArray[i].alive === false) {
                    trashArray.splice(i, 1)
                    points++
                }
            }
        }
    }

// detecting if beachGoers are hit than points will minus trash points
const ditectBeachGoerHit = () => {
    for(let i = 0; i < beachGoerArray.length; i++) {
        if (galleria.x < beachGoerArray[i].x + beachGoerArray[i].width &&
            galleria.x + galleria.width > beachGoerArray[i].x && 
            galleria.y < beachGoerArray[i].y + beachGoerArray[i].height &&
            galleria.y + galleria.height > beachGoerArray[i].y) {
                beachGoerArray[i].alive = false 
            if (beachGoerArray[i].alive === false) {
                beachGoerArray.splice(i, 1)
                if (points >= 2) {
                    points--
                    points--
                } else if (points == 1) {
                    points--
                }
            }
        }
    }
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no errors

What is your best guess as to the source of the problem?

What things have you already tried to solve the problem?

I tried doing like a hit detection function for both the trash array and the Beach Goers array with for loop but it doesnt work

[timmshinbone]

Hey Ana, add a little description of how we solved this problem, and then close the issue. Thanks!

[anaismveras]

solved the issue by writing logic that the trash or the beachGoers can only be pushed into their arrays only if they show on the canvas in an empty spot

const findEmptySpot = (thing, thingArr) => {
  for (let i = 0; i < thingArr.length; i++) {
    if (
      thing.x < thingArr[i].x + thingArr[i].width &&
      thing.x + thing.width > thingArr[i].x &&
      thing.y < thingArr[i].y + thingArr[i].height &&
      thing.y + thing.height > thingArr[i].y
    ) {
      return false;
    }
  }
  return true;
};

// the if statement below is in my class function to create trash, there is also another one in create beachGoers 

if (
    findEmptySpot(garbage, trashArray) &&
    findEmptySpot(garbage, beachGoerArray)
  ) {
    trashArray.push(garbage);
  }