p5.js: проблема с нажатием кнопок и перемещением объекта по холсту - PullRequest
Новая
       59

p5.js: проблема с нажатием кнопок и перемещением объекта по холсту

0 голосов
/ 04 ноября 2019

Я действительно новичок в p5.js, и я пытаюсь найти решение этой проблемы.

У меня есть кнопка. Я хочу, чтобы мой кролик появлялся на холсте и прыгал вверх и вниз при нажатии кнопки. Теперь кролик появляется только на холсте без движения при нажатии кнопки. Я буду очень признателен, если кто-то может помочь мне решить эту проблему! Спасибо!

Мой код следующий: 

let rabbit1;
function setup(){
    createCanvas(800, 600);
    rabbit1=new rabbit();
}

function draw() {
    background(51);

    button = createButton("rabbit");
    button.position(100, 100);
    button.mouseReleased(show_rect);
    stroke(rgb);
    strokeWeight(2);
}

function show_rect(){
    fill(216,143,73);
    ellipse(270,360,50,150);
    fill(37,216,37);
    ellipse(270,270,20,50);
    rabbit1.move();
    rabbit1.show();
}

class rabbit{
    constructor(){
        this.x=200;
        this.y=200;
    }
    move(){
        frameRate(10);
        if (this.y> 250.0) {//if variable d bigger than 1 
            this.y = 200.0;//variable d back to equals to 0
        } else {//otherwise
            this.y += random(20,30);
        }
    }
    show(){
        noStroke();
        fill('#FFFFFF');
        ellipse(this.x,this.y,100,100);
        ellipse(this.x-20,this.y-50,20,140);
        ellipse(this.x+10,this.y-50,20,140);
        ellipse(this.x,this.y+80,80,150);
        ellipse(this.x+20,this.y+150,40,20);
        ellipse(this.x+60,this.y+50,40,20);
        ellipse(this.x-50,this.y+100,50,50);
        fill(0);
        ellipse(this.x+30,this.y-10,30,30);
    }
}

1 Ответ

0 голосов
/ 04 ноября 2019

Вы должны нарисовать сцену в draw(). Обратный вызов draw() вызывается постоянно и действует как основной цикл приложения.

Добавьте переменную состояния draw_rabbid и установите состояние при нажатии кнопки. Например: 

let draw_rabbit = false;
function show_rect(){
    draw_rabbit = true;
}

Нарисуйте морковку и кролика в зависимости от состояния. Например: 

function draw() {
    background(51);

    if (draw_rabbit) {
        strokeWeight(2);
        fill(216,143,73);
        ellipse(270,360,50,150);
        fill(37,216,37);
        ellipse(270,270,20,50);

        rabbit1.move();
        rabbit1.show();
    }
}

См. пример, который основан на коде вопроса: 

let rabbit1;
function setup(){
    let canvas = createCanvas(800, 600);
    canvas.parent('canvas-holder');
    
    let button = select('#buttonjump');
    button.mouseReleased(show_rect);

    rabbit1=new rabbit();
}

let draw_rabbit = false;
function show_rect(){
    draw_rabbit = true;
}

function draw() {
    background(51);

    if (draw_rabbit) {
        strokeWeight(2);
        fill(216,143,73);
        ellipse(270,360,50,150);
        fill(37,216,37);
        ellipse(270,270,20,50);
        
        rabbit1.move();
        rabbit1.show();
    }
}

class rabbit{
    constructor(){
        this.x=200;
        this.y=200;
    }
    
    move(){
        frameRate(10);
        if (this.y> 250.0) {//if variable d bigger than 1 
            this.y = 200.0;//variable d back to equals to 0
        } else {//otherwise
            this.y += random(20,30);
        }
    }
    show(){
        noStroke();
        fill('#FFFFFF');
        ellipse(this.x,this.y,100,100);
        ellipse(this.x-20,this.y-50,20,140);
        ellipse(this.x+10,this.y-50,20,140);
        ellipse(this.x,this.y+80,80,150);
        ellipse(this.x+20,this.y+150,40,20);
        ellipse(this.x+60,this.y+50,40,20);
        ellipse(this.x-50,this.y+100,50,50);
        fill(0);
        ellipse(this.x+30,this.y-10,30,30);
    }
}
#buttonjump { position: absolute; top: 1; left: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
<button id= "buttonjump" >rabbit</button>
<div id = "canvas-holder"></div>
...