Функция прослушивания событий цикла - PullRequest
Новая
       1

Функция прослушивания событий цикла

0 голосов
/ 29 марта 2019

Я пытаюсь инициировать объект, падающий вниз по нажатию кнопки, но вместо того, чтобы плавно падать вниз, он падает немного при каждом нажатии кнопки.Чтобы нажать кнопку, просто щелкните там, где написано «перетаскивание», я не включил таблицу стилей, поэтому она не будет выглядеть как кнопка, но она все еще работает.Вопрос заключается в функции this.update.Я хочу, чтобы блок выпал полностью одним нажатием кнопки. 

let canvas = document.getElementById("canvas");
let dist = document.getElementById("Dist");
let m = document.getElementById("Mass");
let meter = 1;
let start = document.getElementById("start");

canvas.height = 800;
canvas.width = 900;
canvas.style.backgroundColor = "rgb(65, 163, 193)";
canvas.style.marginLeft = "500px";
canvas.style.marginTop = "75px";

let c = canvas.getContext('2d');

let x = 400;
let y = 200;
let h = 40;
let w = 20;
let xSpeed = 0;
let ySpeed = meter;

function Thing(x, y, xSpeed, ySpeed, h, w){
    this.x = x;
    this.y = y;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.h = h;
    this.w = w;

    this.draw = function(){
        c.beginPath();
        c.rect(this.x, this.y, this.w, this.h);
        c.fillStyle = "black";
        c.fill();
        c.stroke();
        c.closePath();
    };

    this.update = function(){
        start.addEventListener("click", () => { 
            if (this.y + this.h > canvas.height){
                this.y -= this.ySpeed;
            };
            this.y += this.ySpeed;
            this.x += this.xSpeed;
            this.draw();
        });
        this.draw()
    };
};

let obj;

function init(){
    obj = new Thing(x, y, xSpeed, ySpeed, h, w,);
    anim();
};

function anim(){
    requestAnimationFrame(anim);
    c.clearRect(0, 0, canvas.width, canvas.height);
    obj.update();
};

init();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Physics Drop</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <div id="X/Y title"></div>
        <table>
            <tc>
                <tr>
                    <input id="Mass" placeholder="Mass"> 
                </tr>
            </tc>
            <tc>
                <tr>
                    <input id="Dist" placeholder="Height of drop">
                </tr>
            </tc>
        </table>
        <div id="start">
            <div id="startT">Drop</div>
        </div>
        <script src="app.js"></script>
    </body>
</html>

1 Ответ

1 голос
/ 29 марта 2019

У вас должен быть игровой цикл, функция, которая запускается в каждом кадре. Типичная структура gameloop выглядит следующим образом: 

while(1) {
    update() // update the state of object
    draw()   // redraw the object based on updated state
}

Я сделал несколько вещей, чтобы исправить код

  • Добавить прослушиватель событий на init()

  • обновить obj.y в методе обновления

  • создать игровой цикл, который вызывает obj.update() каждые 100 мс.

  • Начальный obj.ySpeed = 0, поэтому он не начинает падать. Теперь вы можете контролировать падение, просто обновляя obj.ySpeed, поэтому просто установите obj.ySpeed на событие щелчка, чтобы объект начал падать, и установите его в 0, когда он достигнет конца холста.

Попробуйте новый код здесь JSfiddle 

let canvas = document.getElementById("canvas");
let dist = document.getElementById("Dist");
let m = document.getElementById("Mass");
let meter = 10;
let start = document.getElementById("start");

canvas.height = 800;
canvas.width = 900;
canvas.style.backgroundColor = "rgb(65, 163, 193)";
canvas.style.marginLeft = "500px";
canvas.style.marginTop = "75px";

let c = canvas.getContext('2d');

let x = 400;
let y = 200;
let h = 40;
let w = 20;
let xSpeed = 0;
let ySpeed = meter;

function Thing(x, y, xSpeed, ySpeed, h, w){
    this.x = x;
    this.y = y;
    this.xSpeed = xSpeed;
    this.ySpeed = 0;
    this.h = h;
    this.w = w;    

    this.draw = function(){
        c.beginPath();
        c.rect(this.x, this.y, this.w, this.h);
        c.fillStyle = "black";
        c.fill();
        c.stroke();
        c.closePath();
    };

    this.update = function(){

        if (this.y + this.h > canvas.height){
          this.y = canvas.height - this.h;
          this.ySpeed = 0;
        };
        this.y += this.ySpeed;
        this.x += this.xSpeed;

        this.draw()
    };
};

let obj;

function init(){
    obj = new Thing(x, y, xSpeed, ySpeed, h, w,);
    anim();
    start.addEventListener('click', () => {
        obj.ySpeed = ySpeed;
    });
    setInterval(() => {
            obj.update();
    }, 100)
};

function anim(){
    requestAnimationFrame(anim);
    c.clearRect(0, 0, canvas.width, canvas.height);
    obj.update();
};

init();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...