CODEWITHSUNDEEP
javascriptrenderrequestanimationframe
Ashley
Ashley

Reputation: 73

How can i count my seconds since last render?

i'm trying to make a snake game in Javascript and this math *if(secondsSinceLastRender < 1 / SNAKE_SPEED) return

This is my js, where it actually is:

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)

This is my html and 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>

Upvotes: 1

Views: 194

Answers (1)

Bharat
Bharat

Reputation: 1205

Let's try. Below line is just find what was the last run. (currentTime - lastRenderTime), the result is in miliseconds and hence it's divided by 1000 to convert it to second.

const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000

We have a variable SNAKE_SPEED, this is just to control the speed of the snake so that we can update lastRenderTime. For example, I added extra logs. Typically, window.requestAnimationFrame would be fired almost 60 times per seconds. However, we don't want our logic (in this case snake logic to be fired 60 times per second). We are trying to control that through 1 / SNAKE_SPEED. IN this case when the value of secondsSinceLastRender > .5 we would execute our logic. Refer the screen shot from console log where 28th time it would not return.

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)

enter image description here

Hope this clears the math :)

Upvotes: 1

Related Questions