我试图在单击按钮时启动一个对象下降，但它不是平滑下降，而是每次单击按钮时下降一点。要单击按钮，只需单击显示“放置”的位置，我没有包含样式表，因此它看起来不像按钮，但它仍然有效。问题出在函数 this.update 上。我希望单击按钮即可将 block 完全下拉。
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>最佳答案
您需要有一个游戏循环，它是在每一帧上运行的函数。 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它到达了 Canvas 的末端。
在此处尝试新代码 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();
关于javascript - 循环事件监听函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55409529/