我如何计算自上次渲染以来的秒数？答案

【问题标题】：How can i count my seconds since last render?我如何计算自上次渲染以来的秒数？
【发布时间】：2021-07-24 08:54:13
【问题描述】：

我正在尝试用 Javascript 制作一个蛇游戏，这个数学 *if(secondsSinceLastRender

让我有点困惑，我不太明白它的作用...谁能解释一下？非常感谢！

这是我的 js，实际上是：

let lastRenderTime = 0
const SNAKE_SPEED = 2

function main(currentTime) {
    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
    window.requestAnimationFrame(main)
    
    if(secondsSinceLastRender < 1 / SNAKE_SPEED) return

    lastRenderTime = currentTime

    console.log(secondsSinceLastRender)

}
window.requestAnimationFrame(main)

这是我的html和css：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Snake</title>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: black;
        }
        
        #game-board {
            background-color: #CCC;
            width: 100vmin;
            height: 100vmin;
            display: grid;
            grid-template-rows: repeat(21, 1fr);
            grid-template-columns: repeat(21, 1fr);
        }
        
        #snake {
            background-color: hsl(200, 100%, 50%);
            border: .25vmin solid black;
        }
        
        #food {
            background-color: hsl(50, 100%, 50%);
            border: .25vmin solid black;
        }
    </style>

</head>

<body>
    <div id="game-board"></div>

    <script src="game.js" type="module"></script>
</body>

</html>

【问题讨论】：

标签： javascript render requestanimationframe

【解决方案1】：

让我们试试。下面的行只是找到最后一次运行的内容。 (currentTime - lastRenderTime)，结果以毫秒为单位，因此除以 1000 以将其转换为秒。

const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000

我们有一个变量SNAKE_SPEED，这只是为了控制蛇的速度，以便我们可以更新lastRenderTime。例如，我添加了额外的日志。通常，window.requestAnimationFrame 每秒会触发近 60 次。但是，我们不希望我们的逻辑（在这种情况下蛇逻辑每秒被触发 60 次）。我们正试图通过 1 / SNAKE_SPEED 来控制它。在这种情况下，当 secondsSinceLastRender > .5 的值时，我们将执行我们的逻辑。请参阅控制台日志中的屏幕截图，其中第 28 次它不会返回。

let lastRenderTime = 0
const SNAKE_SPEED = 2

function main(currentTime) {
    const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
    
    window.requestAnimationFrame(main)
    
    if(secondsSinceLastRender < 1 / SNAKE_SPEED){
    console.log("Time did not update");
    return;
    }
    else
        console.log("Time would be updated");
    
    lastRenderTime = currentTime
    console.log(secondsSinceLastRender)
}
window.requestAnimationFrame(main)

希望这可以解决数学问题:)

【讨论】：