使用实例模式时遇到问题

Question

在代码中使用实例模式时出现错误。我的迷你游戏没有显示，我不确定错误是从哪里来的。在没有实例模式的情况下，它可以正常工作，但是我需要使用实例模式，以便可以在另一个文件中引用此代码。我正在使用此链接作为参考。 http://p5js.org/examples/instance-mode-instantiation.html

let sketch = function(p) {

    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(width/2, height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show();
            if (blob.eats(blobs[i])) {
                blobs.splice(i, 1);
            }
        }

        if (frameCount % 60 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0
            p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            p.console.log("hit");
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show();
        blob.update();
    };
};
let myp5 = new p5(sketch);

class Blob {


     constructor(x, y, r) {
            this.pos = createVector(x, y);
  this.r = r; 
  this.vel = createVector(0,0);
    }
    show(p) {
        p.ellipse(this.pos.x, this.pos.y, this.r, this.r);
    }
    eats(other) {
      let d = p5.Vector.dist(this.pos, other.pos);
        if (d < this.r + other.r) {
      let sum = PI * this.r * this.r + PI * other.r * other.r;
      score ++;
      this.r = sqrt(sum / PI);
      //this.r += other.r;
      return true;
    } else {
      return false;
    }
  }

Answer 1

width，height和frameCount是画布的属性，而console不是画布的属性。

p.translate(width/2, height/2);
p.translate(p.width/2, p.height/2);

if (frameCount % 60 == 0 && timer > 0) {
if (p.frameCount % 60 == 0 && timer > 0) {

console.log("hit");
console.log("hit");

我不知道Blob的实现。但您必须将画布对象（p）传递给show方法，并让constructor传递。

在类score中无法访问变量Blob

请参见示例，其中我将建议的更改应用于原始代码：

class Blob {
    constructor(p, x, y, r) {
        this.pos = p.createVector(x, y);
        this.r = r; 
        this.vel = p.createVector(0,0);
    }
    show(p) {
        p.ellipse(this.pos.x, this.pos.y, this.r, this.r);
    }
    eats(other) {
        let d = this.pos.dist(other.pos);
        if (d < this.r + other.r) {
            let sum = Math.pi * this.r * this.r + Math.pi * other.r * other.r;
            this.r = Math.sqrt(sum / Math.pi);
            //this.r += other.r;
            return true;
        } else {
            return false;
        }
    }
    update() {
        // ...
    }
}

let sketch = function(p) {
    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(p, 0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(p, x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(p.width/2, p.height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show(p);
            if (blob.eats(blobs[i])) {
                score ++;
                blobs.splice(i, 1);
            }
        }

        if (p.frameCount % 60 == 0 && timer > 0) { 
          p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            console.log("hit"); 
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show(p);
        blob.update();
    };
};
let myp5 = new p5(sketch)

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>