JavaScript冲突检测不适用于简单矩形

Question

I'm trying to create a on load random background with triangles. But I'm trying to exclude any collision and if there is any revoke the createDiamond() function.

I tried it with various functions from: Javascript: Collision detection

Here is my current code: https://codepen.io/mikeyhaklander/pen/OeONOz My current collision code is:

    {
    (x <= cx && x + size >= cx && y <= cy && y + size >= cy) 
 || (x <= cx + cSize && x + size >= cx + cSize && y <= cy && y + size >= cy) 
 || (x <= cx && x + size >= cx && y <= cy + cSize && y + size >= cy + cSize) 
 || (x <= cx + cSize && x + size >= cx + cSize && y <= cy + cSize && y + size >= cy + cSize)
    }

When refreshing the codepen, you can see it still sometimes collides.

Answer 1

Got it fixed myself. I was calculating with the wrong sizes. In css I used bigger sizes then I gave the object with JavaScipt. And then I've got the collision correct with this formula:

if ( x < cx + cSize && x + size > cx && y < cy + cSize && y + size > cy ) {
      return createDiamond(diamondArray, bgHeight, parent)
    }