Question

我正在尝试通过单击按钮来启动一个对象，但是每次单击按钮时，对象并不是顺畅地下降，而是下降了一点。要单击按钮，只需单击“放置”的地方，我没有包含样式表，因此它看起来不像按钮，但仍然可以使用。问题出在函数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>

Answer 1

您需要有一个游戏循环，该循环在每帧上运行。 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。

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

循环事件监听器功能

1 个答案: