在p5.js实例模式下实例化对象

时间:2019-03-12 03:33:50

标签: javascript object instance p5.js mode

我试图在p5.js实例模式下实例化一个对象,但是在对象的属性和功能上存在很多错误。

var sketch1 = function(p){

    var dados = [];

    p.setup = function(){
        var canvas = p.createCanvas(640, 480);
        canvas.parent('area-sketch');

        p.button = p.createButton('Rolar dado');
        p.button.position(p.width, p.height);
        p.button.parent('area-sketch');
        p.button.mouseClicked(p.rolaDado);
    };

    p.draw = function(){
        if(dados.length>0){
            for(var i=0;i<dados.length;i++){
                dados[i].show();
            }
        }
    };

    p.rolaDado = function(){
        var total=0;
        if(dados.length>0){
            for(var i=0;i<dados.length;i++){
                dados[i].shuffle();
                total+=dados[i].getValor();
            }

            return(total);
        }
    };

    p.limpaDados = function(){
        dados = [];
    };

    p.criaDados = function(num){
        for(var i=0;i<num;i++){
            dados.push(new Dado());
        }
    };

    p.limpaTela = function(){
        p.clear();    
    };
};

var mesa_dados = new p5(sketch1);

function Dado(){   

    this.lado = 80;
    this.x = random(1,width-this.lado);
    this.y = random(1,height-this.lado);

    this.type = 6;

    this.show = function(){
        stroke(0,0,0);
        p.fill(255,255,255);

        p.rect(this.x,this.y, this.lado, this.lado);

        switch(this.type){
            case 1:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 2:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                break;
            case 3:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 4:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                break;
            case 5:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.5, this.y+this.lado*0.5, 10, 10);
                break;
            case 6:
                fill(0,0,0);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, (this.y+this.lado)-this.lado*0.25, 10, 10);
                ellipse(this.x+this.lado*0.25, this.y+this.lado*0.5, 10, 10);
                ellipse((this.x+this.lado)-this.lado*0.25, this.y+this.lado*0.5, 10, 10);
                break;
        }

    }

    this.clear = function(){

    }

    this.shuffle = function(){
        this.type = ceil(random(0,6));
    }

    this.shufflePos = function(){
        times = 100;
        speed = 50;
        this.xdirection = random(-1,1);
        this.ydirection = random(-1,1);
    }

    this.getValor = function(){
        return(this.type);
    }
}

当我尝试运行这些代码时,出现错误:

  

未捕获的ReferenceError:未定义随机       在新的Dado(dado.js:4)       在p5.p.criaDados(sketch.js:41)

我在对象Dado中的每个函数都遇到此错误。当我测试代码但在p5.js全局模式下时,我没有得到这些错误。

1 个答案:

答案 0 :(得分:0)

函数 CustomLabel.prototype = new google.maps.OverlayView(); CustomLabel.prototype.onAdd = function() { var div = this.div = document.createElement('div'); div.className = 'markerlabel'; this.getPanes().floatPane.appendChild(div); // top level pane type }; CustomLabel.prototype.draw = function() { var div = this.div; if (this.args.text != ' ') { div.innerHTML = this.args.text; all_custom_labels['_'+this.args.site] = this; var point = this.getProjection().fromLatLngToDivPixel(this.latlng); console.log('this.args.site: ['+this.args.site+'] point: ['+point+'] this.args.text: ['+this.args.text+'] this.latlng: ['+this.latlng+']'); if (point) { div.style.left = point.x + 'px'; div.style.top = point.y + 'px'; console.log(this.args.site+' '+point.x+' '+point.y); } } }; 以及对randomstrokefill的调用都试图使用p5为您提供的全局函数。 >

要在实例模式下使用它们,请将您的ellipse定义移到素描函数中,并使用传递到该函数中的Dado实例:

p