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

问题描述

我正在尝试用 Javascript 和这个数学制作蛇游戏 *if(secondsSinceLastRender < 1 / SNAKE_SPEED) return

我有点困惑，我真的不明白它的作用......谁能解释我？太感谢了！

这是我的 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>

标签： javascriptrenderrequestanimationframe

我们试试看。下面的行只是找到最后一次运行的内容。(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)

希望这可以清除数学:)

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

问题描述

解决方案

推荐阅读