Javascript 循环事件侦听器函数

我试图启动一个对象在点击一个按钮时下降，但不是平稳下降，而是每次点击按钮时下降一点。要单击按钮，只需单击显示drop的位置，我没有包含样式表，因此它看起来不像按钮，但仍然有效。问题在于函数

this.update

。我希望一次点击按钮，块就可以完全放下

let canvas=document.getElementById（“canvas”）；
让dist=document.getElementById（“dist”）；
设m=document.getElementById（“质量”）；
设仪表=1；
让start=document.getElementById（“start”）；
帆布高度=800；
画布宽度=900；
canvas.style.backgroundColor=“rgb（65163193）”；
canvas.style.marginLeft=“500px”；
canvas.style.marginTop=“75px”；
设c=canvas.getContext（'2d'）；
设x=400；
设y=200；
设h=40；
设w=20；
设xSpeed=0；
让y速度=米；
函数对象（x，y，xSpeed，ySpeed，h，w）{
这个.x=x；
这个。y=y；
this.xSpeed=xSpeed；
this.ySpeed=ySpeed；
这个，h=h；
这个.w=w；
this.draw=函数（）{
c、 beginPath（）；
c、 rect（this.x，this.y，this.w，this.h）；
c、 fillStyle=“黑色”；
c、 填充（）；
c、 笔划（）；
c、 closePath（）；
};
this.update=函数（）{
start.addEventListener（“单击”，（）=>{
if（this.y+this.h>canvas.height）{
this.y-=this.y速度；
};
this.y+=this.y速度；
this.x+=this.xSpeed；
这个.draw（）；
});
这个.draw（）
};
};
让obj；
函数init（）{
obj=新事物（x，y，xSpeed，ySpeed，h，w，）；
动漫（）；
};
函数anim（）{
请求动画帧（anim）；
c、 clearRect（0，0，canvas.width，canvas.height）；
obj.update（）；
};
init（）

物理下降
滴
您需要一个gameloop，它是在每一帧上运行的函数。
gameloop的典型结构如下所示：

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

我已经做了一些事情来修复代码


在
init（）上添加事件侦听器

更新更新方法中的
obj.y

创建一个游戏循环，每100毫秒调用
obj.update（）

初始
obj.ySpeed=0
，因此它不会开始下降。现在，只需更新
obj.ySpeed
，就可以控制下落，因此只需在单击事件时设置
obj.ySpeed
，使对象开始下落，并在到达画布末端时将其设置为0


在这里尝试新代码

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();