p5js 修复点击改变形状

问题描述

如何解决这个问题，当我点击一个框时，它也会改变其他框。有什么办法可以解决这个问题吗？

const board = [0,0];
turn = 1;
locked = [0,0];

function setup() {
  createCanvas(400,400);
}

function draw() {
  background(255);

  function grid() {
    strokeWeight(2);

    //up
    u1 = rect(80,92,75,70);
    u2 = rect(155,70);
    u3 = rect(230,70);
    //middle
    rect(230,162,70);
    rect(80,70);
    rect(155,70);
    //bottom
    rect(230,232,70);

    if (board[0] === 1) {
      if (turn === 0) {
        line(90,100,145,150);
        line(90,150,100);
      } else if (turn === 1) {
        circle(118,128,50);
      }
    }

    if (board[1] === 1) {
      if (turn === 0) {
        line(165,220,150);
        line(165,100);
      } else if (turn === 1) {
        circle(193,50);
      }
    }
  }

  function cursor() {
    strokeWeight(5);
    cursor = circle(mouseX,mouseY,2);
    text("X:" + mouseX,height / 4);
    text("Y:" + mouseY,height / 2);
  }

  grid();
  cursor();
}

function mousepressed() {
  if (mouseX > 80 && mouseX < 155 && mouseY > 92 && mouseY < 160 && locked[0] === 0) {
    board[0] = 1;
    locked[0] = 1;
    if (turn === 0) {
      turn = 1;
    } else if (turn === 1) {
      turn = 0;
    }
    console.log('1');

  } else if (mouseX > 155 && mouseX < 230 && mouseY > 92 && mouseY < 160 && locked[1] === 0) {
    board[1] = 1;
    locked[1] = 1;
    if (turn === 0) {
      turn = 1;
    } else if (turn === 1) {
      turn = 0;
    }
    console.log('2');

  } else if (mouseX > 230 && mouseX < 300 && mouseY > 92 && mouseY < 160) {
    console.log('3');
  } else if (mouseX > 80 && mouseX < 155 && mouseY > 105 && mouseY < 230) {
    console.log('4');
  } else if (mouseX > 155 && mouseX < 230 && mouseY > 105 && mouseY < 230) {
    console.log('5');
  } else if (mouseX > 230 && mouseX < 300 && mouseY > 105 && mouseY < 230) {
    console.log('6');
  } else if (mouseX > 80 && mouseX < 155 && mouseY > 230 && mouseY < 300) {
    console.log('7');
  } else if (mouseX > 155 && mouseX < 230 && mouseY > 230 && mouseY < 300) {
    console.log('8');
  } else if (mouseX > 230 && mouseX < 300 && mouseY > 230 && mouseY < 300) {
    console.log('9');
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript rxjs5