改变正方形相交区域的颜色

    var sketch = function (p) {
      with(p) {

        let squares = [];
        let dragObject = null; // variable to hold the object being dragged

        p.setup = function() {
          createCanvas(600, 520);
          button1 = createButton("Alpha");
          button2 = createButton("Bravo");
          button3 = createButton("Charlie");
          button4 = createButton("Delta");
          button5 = createButton("Echo");
          button6 = createButton("Foxtrot");
          button7 = createButton("Golf");
          button8 = createButton("Hotel");
          button9 = createButton("India");
          button10 = createButton("Juliet");

          button1.mousePressed(doSomething);
        };
    
        p.draw = function() {

          background(25, 240, 255);

          // if a square is being dragged, update its position
          if (this.dragObject != null) {
            this.dragObject.position.x = mouseX;
            this.dragObject.position.y = mouseY;
          }

          //draw all squares
          for (let i = 0; i < squares.length; i++) {
            let s = squares[i];
            s.show();
          }
          for (let i = 0; i < squares.length; i++) {
            for (let j = i + 1; j < squares.length; j++) {
              if (i != j && squares[i].collides(squares[j])) {
                squares[i].changecolor();

              }
            }
          }
        };

        p.mousePressed = function () {

          if (this.dragObject == null) {

            //ask every square if they are being "hit"
            for (let i = 0; i < squares.length; i++) {
              let s = squares[i];
              if (s.hitTest()) {
                //if so, set the drag object as this square and return
                this.dragObject = s;
                return;
              }
            }

            //no squares are hit, create a new square.
            let square = new Square(mouseX, mouseY);
            squares.push(square);
          }
        };

        //mouse is released, release the current dragged object if there is one
        p.mouseReleased = function () {
          this.dragObject = null;
        };

        class Square {
          constructor(InitialX, InitialY) {
            this.w = 60;
            this.h = 60;
            this.position = {
              x: InitialX,
              y: InitialY
            };
          }

          //basic test of mouse position against square position and if its inside the rectangle
          hitTest() {
            let x = mouseX - this.position.x;
            let y = mouseY - this.position.y;
            return (x > 0 && x < this.w) && (y > 0 && y < this.h);
          }

          show() {
            fill(50);
            rect(this.position.x, this.position.y, this.w, this.h);
          }

          collides(sqr) {
            if (this.position.x < sqr.position.x + sqr.w &&
              this.position.x + this.w > sqr.position.x &&
              this.position.y < sqr.position.y + sqr.h &&
              this.position.y + this.h > sqr.position.y) {

              return true;
            }
            return false;
          }

          changecolor() {
            fill(random(255), random(255), random(255));
            background(200, 255, 100);
            for (let i = 0; i < squares.length; i++) {
              let s = squares[i];
              s.show();
            }
          }
        }

        function doSomething() {
          // fill(230, 170, 90);
          // ellipse(random(600), random(410), 30, 30);
          squares.pop();
        }

     
      }
    };
    
    let node = document.createElement('div');
    window.document.getElementById('p5-container').appendChild(node);
    new p5(sketch, node);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-container"></div>