How do I program frames per second

问题

Hey I'm a first year student and I'd like to try making a simple 2D game on my website using html, javascript, css and php. I'm still writing out how I am going to do it but I get stuck on how frames per second are made, do they magically appear in my game or do I need to program them myself. I've wrote a simple version of the Pokemon franchise before, where you could walk around, randomly encounter monsters and they just had varying levels and properties. However the character walked 16px each click and he couldn't walk 16px, in steps. That's what I wanted but I couldn't get my finger on it.

Now I'd like to work out something similar, a character that walks around, collects stuff and does little quests along the way. I'd like the character to walk smoothly and the NPC's as well.

I'd like to know how I to make my game 60fps, and every time I press a button 60 frames go by, each in 1 second I want my character to walk a number of pixels, take as an example 32 pixels, but he has to walk al 32 of them in 30 frames, 0.5 seconds. How do I code this ?

I'm looking for a very particular answer and you might not get what I'm looking for from the text above so I'll list down the answers I'm not looking for to make it easier.

I'm not looking for:

• Tips on where to programming a game, like in unity.
• Loads of code lines.
• Tutorials for making games.
• How to Program a FPS counter.

I'm looking for:

• An explanation to how it's coded, or how it magically appears.
• As little lines of example code to understand how it's done that way.
• If it can't be done in web apps, tell me why.
• Links to helpful sources of information that could help me understand FPS

What I've already tried to find the answer:

• Go through a lot of Google search terms, I tried a lot of different approached on what search terms I should use but it either send me to pages on how to program a FPS counter or a first person shooter.
• Check out wether Stack overflow already had the answer by trying a bunch of different search terms as well.
• Trying to find out how they do it in Unity.

I'm not sure wether I'm not using the right search terms, but I've used quite a bunch involving "Coding fps", "Frame rates per second programming", "programming the core of the game" but I couldn't find it. If you know a better way to address my problem or know better search terms please tell me that as well.

回答1:

For example in javascript, To make a game I would use a 'draw loop'.

For example if I have a charachter that I want to move 1 pixel to left every frame at 60 frames a second I would do this:

    var fps = 60; 
    var charX = //Whatever your charachters x position
    function moveChar(){
        charX++;
    };

    var loop = setInterval(moveChar,1000/fps);

Obviously the moveChara would look very different. This code - If you add in all the necessary pieces would move a sprite at 60 fps. You would still need to have a image (Either dynamically added with JS or with HTML)

This is for vanilla JS and html.

来源：https://stackoverflow.com/questions/32947439/how-do-i-program-frames-per-second