Возникли проблемы при использовании режима экземпляра - PullRequest
Новая
       27

Возникли проблемы при использовании режима экземпляра

0 голосов
/ 16 декабря 2018

Я получаю ошибки, когда использую режим экземпляра в своем коде.Моя мини-игра не отображается. Я не уверен, откуда исходит ошибка.Он прекрасно работает без режима экземпляра, но мне нужно использовать режим экземпляра, чтобы я мог ссылаться на этот код в другом файле.Я использую эту ссылку в качестве ссылки.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;
    }
  }

1 Ответ

0 голосов
/ 16 декабря 2018

Хотя 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, а let 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>
...