HTML5 Game Walkthrough 1 - game.js part 1

var FPS = 30; // frames per second. Note that "var" initializes a variable, i.e. a value held by a name
var canvas = null; // canvas and context objects currently set to null, will be defined in init() function
var context2D = null;

// when window loads, run the init() function
window.onload = init;

function init() {
    canvas = document.getElementById('canvas'); // the canvas object is the HTML element from the web page
    context2D = canvas.getContext('2d'); // the context object is what takes the canvas element from the web page and uses the canvas API to manipulate the pixels (acts as the "screen" for the game)

    setInterval(runGame, 1000/FPS); // sets a timer to call the runGame() function every 33.3 miliseconds (this allows it to run at the frame rate set at the top). This is what starts the cycle of the game loop.
}

function runGame() {
    // Every frame the game is running, it will call these three functions, one after the other
    // So every operation carried out in these functions will be happening at an incredible rate
    // This is what makes a game run
    handleInput();
    update();
    render();
}

function handleInput() {
    // here is where user input will be checked
    // variables will be updated to allow the update() function to make it's logic calculations
    // good practice is to not update the world in this function, only variables that allow the following functions to update the world accordingly.
}

function update() {
    // This is where all the logic of the game happens. Velocity, gravity, collision, etc.
    // Usually you wouldn't want this function fully clogged with operations, you would instead make calls to more specific functions that do stuff. But for the purpose of this tutorial, we won't be focusing too much on that.
}

function render() {
    // This is where the world will be drawn.
    // The steps of the game loop before this have made all the necessary updates to the variables and objects, allowing us to use those values to draw the objects.
}