P5.JS 草图无法在浏览器中加载

Question

我有一个简单的程序，但是我有一个问题。我以前遇到过页面显示“正在加载...”的问题，但我解决了这个问题。每当我现在尝试加载时，我都会收到“localhost refused to connect”。我试过互联网，但所有的修复似乎都是针对第一个错误。我如何让它加载？这是代码：

let pew;
let crosshair;
let imgConst = 100;
var imgSize = imgConst;
var imgChange = [4, (6 + 2/3), 10, -10, -10, -10, -10, -20, (-33 - 1/3), -50];
for(var i = 0; i = imgChange.length; i++) {
  imgChange[i] = imgSize + imgConst/imgChange[i]
  console.log(i)
}
function preload() {
  crosshair = loadImage('crosshair.png')
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(10);
    noStroke();
    noCursor();
    pew = new bullet();
}

function draw() {
  background(50, 89, 100);
    //Shrink bullets
    pew.shrink()
    
    //crosshair
    image(crosshair, mouseX - imgSize/2, mouseY - imgSize/2, imgSize, imgSize);
}

// bullet class
class bullet {
  constructor() {
    this.x = [];
        this.y = [];
        this.size = [];
        this.shrinkSpeed = 1;
        this.diameter = 10;
  }

  shrink() {
        fill(61, 41, 15)
        for(var i = 0; i < this.x.length; i++) {
            if(this.size[i] <= 1) {
                this.size.splice(i);
            } else {
                ellipse(this.x[i], this.y[i], this.size[i], this.size[i]);
                this.size[i] = this.size[i] - this.shrinkSpeed;
            }
        }
  }
    add() {
        this.x.push(mouseX);
        this.y.push(mouseY);
        this.size.push(this.diameter)
        for( i = 0; i < imgChange.length * 1; i ++) {
          imgSize = imgChange[floor(i)]
          console.log(imgSize);
        }
    }
}

function mousePressed() {
  //add bullet
    pew.add();
}

Answer 1

你在 for 循环中有 2 个问题。

首先，在您的第一个 for 循环中，将 i = imgChange.length 更改为 i < imgChange.length。其次，您在项目符号 class 的 add() 函数中缺少 var：for( i = 0.

现在，您的代码应该运行。

P5.JS 草图无法在浏览器中加载

P5.JS Sketch Won't Load in Browser

browser

loading

p5.js