为什么我在 p5play 中不断收到此错误以及如何修复它？

Question

我有一个计算机科学项目，我必须使用 p5 Play 制作一台老虎机，但我不断收到此错误：

安全错误：无法从“窗口”读取命名属性“添加”：阻止来源为“https://preview.p5js.org”的框架访问跨源框架。

这是我的代码：

//Load all images and create all of the groups/sprites
function preload() {
  a = loadImage("Images/Seven.jpg");
  b = loadImage("Images/bell.jpg");
  c = loadImage("Images/grape.jpg");
  d = loadImage("Images/onebar.jpg");
  e = loadImage("Images/threebar.jpg");
  f = loadImage("Images/twobar.jpg");

  top = new Group();
  bottom = new Group();
  middle = new Group();
  machine = new Sprite(0, 450, "static");
  machine1 = new Sprite(0, 50);

  machine.layer = 3;
  machine1.layer = 3;
  machine.visible = false;
  machine1.visible = false;
  machine1.collider = "none";

  
}

//Generate random sprites for the middle row
function ifListMid() {
  let randomize = Math.floor(random() * 6 + 1);

  if (randomize == 1) {
    bell = new Sprite();
    middle.add(bell);
    bell.addImage("normal", b);
    bell.scale = 0.03;
    bell.layer = 2;
  }

  if (randomize == 2) {
    grape = new Sprite();
    middle.add(grape);
    grape.addImage("normal", c);
    grape.scale = 0.03;
    grape.layer = 2;
  }

  if (randomize == 3) {
    seven = new Sprite();
    middle.add(seven);
    seven.addImage("normal", a);
    seven.scale = 0.03;
    seven.layer = 2;
  }

  if (randomize == 4) {
    onebar = new Sprite();
    middle.add(onebar);
    onebar.addImage("normal", d);
    onebar.scale = 0.04;
    onebar.layer = 2;
  }

  if (randomize == 5) {
    twobar = new Sprite();
    middle.add(twobar);
    twobar.addImage("normal", f);
    twobar.scale = 0.034;
    twobar.layer = 2;
  }

  if (randomize == 6) {
    threebar = new Sprite();
    middle.add(threebar);
    threebar.addImage("normal", e);
    threebar.scale = 0.03;
    threebar.layer = 2;
  }
}

//Generate random sprites for the top side
function ifListTop() {
  let randomize = Math.floor(random() * 6 + 1);

  if (randomize == 1) {
    bell = new Sprite();
    top.add(bell);
    bell.addImage("normal", b);
    bell.scale = 0.03;
    bell.layer = 2;
  }

  if (randomize == 2) {
    grape = new Sprite();
    top.add(grape);
    grape.addImage("normal", c);
    grape.scale = 0.03;
    grape.layer = 2;
  }

  if (randomize == 3) {
    seven = new Sprite();
    top.add(seven);
    seven.addImage("normal", a);
    seven.scale = 0.03;
    seven.layer = 2;
  }

  if (randomize == 4) {
    onebar = new Sprite();
    top.add(onebar);
    onebar.addImage("normal", d);
    onebar.scale = 0.04;
    onebar.layer = 2;
  }

  if (randomize == 5) {
    twobar = new Sprite();
    top.add(twobar);
    twobar.addImage("normal", f);
    twobar.scale = 0.034;
    twobar.layer = 2;
  }

  if (randomize == 6) {
    threebar = new Sprite();
    top.add(threebar);
    threebar.addImage("normal", e);
    threebar.scale = 0.03;
    threebar.layer = 2;
  }
}

//Generate random sprites for the bottom row
function ifListBottom() {
  let randomize = Math.floor(random() * 6 + 1);

  if (randomize == 1) {
    bell = new Sprite();
    bottom.add(bell);
    bell.addImage("normal", b);
    bell.scale = 0.03;
    bell.layer = 2;
  }

  if (randomize == 2) {
    grape = new Sprite();
    bottom.add(grape);
    grape.addImage("normal", c);
    grape.scale = 0.03;
    grape.layer = 2;
  }

  if (randomize == 3) {
    seven = new Sprite();
    bottom.add(seven);
    seven.addImage("normal", a);
    seven.scale = 0.03;
    seven.layer = 2;
  }

  if (randomize == 4) {
    onebar = new Sprite();
    bottom.add(onebar);
    onebar.addImage("normal", d);
    onebar.scale = 0.04;
    onebar.layer = 2;
  }

  if (randomize == 5) {
    twobar = new Sprite();
    bottom.add(twobar);
    twobar.addImage("normal", f);
    twobar.scale = 0.034;
    twobar.layer = 2;
  }

  if (randomize == 6) {
    threebar = new Sprite();
    bottom.add(threebar);
    threebar.addImage("normal", e);
    threebar.scale = 0.03;
    threebar.layer = 2;
  }
}

function setup() {
  //Create the canvas
  new Canvas(500, 500);

  //Set background color
  background(255, 255, 255);

  //Set frame rate
  setFrameRate = 60;

  machine.width = 1000;
  machine.height = 150;
  machine.color = "black";
  machine1.width = 1000;
  machine1.height = 150;
  machine1.color = "black";

  //Call all the function
  for (let i = 0; i < 3; i++) {
    ifListMid();
    ifListTop();
    ifListBottom();
  }

  //Set position to the middle row sprites
  middle[0].x = 125;
  middle[0].y = 250;

  middle[1].x = 250;
  middle[1].y = 250;

  middle[2].x = 375;
  middle[2].y = 250;

  //Set position to the top sprites
  top[0].x = 125;
  top[0].y = 160;

  top[1].x = 250;
  top[1].y = 160;

  top[2].x = 375;
  top[2].y = 160;

  //Set position for the bottom sprites
  bottom[0].x = 125;
  bottom[0].y = 340;

  bottom[1].x = 250;
  bottom[1].y = 340;

  bottom[2].x = 375;
  bottom[2].y = 340;
}

我已经尝试解决这个问题一个多小时了，但我无法弄清楚，有人可以帮助我吗？

我尝试在网上查找相关信息，但几乎没有解决我的问题。

Answer 1

我只需一行代码即可重现您的问题。将问题剥离到本质对于调试非常重要，这样您就可以准确地找出导致问题的原因：

top.add;

此片段有助于表明它与 p5 或 p5play 无关。

注意，如果我们将

top

更改为其他名称，例如

top_

，问题就会消失。问题是

window.top

是预先存在的

window

（全局）属性，不允许属性访问。

除了重命名变量之外，您可以（并且应该）始终使用

let variableName;

声明变量。这确保了不会与全局

window

对象发生冲突，该对象上有许多无法触及的通用名称。对 p5 项目尝试这样的设置：

let top;
let bottom;
let whateverOtherVarsYouNeed;

function setup() {
  top = foo();
  bottom = bar();
  whateverOtherVarsYouNeed = whatever();
}

function draw() {
  // use variables
}

因此，有两个要点：

1. 始终尽量减少问题
2. 不要使用全局变量