That thing above is a game. It does nothing yet, but it is already running: a loop is drawing one frame after another, sixty times a second, and all it draws is a background. Everything else is what you're about to add.
Sixteen lines, and they're worth reading one at a time: the three ideas here hold up the rest of the tutorial.
createGame does not create the game
It looks like it does, going by the name. Watch what the last line does:
const game = createGame('#app', { ... });
game({ Game });createGame returns a function. The configuration (size, background colour) is given
once, and what comes out is something you can call with whatever scenes you like. The game
starts existing on the second line, not the first.
The scenes go in an object, { Game }, and the key is the scene's name: that is how you will
switch from one to another later, by name. The first one is the one that starts.
This is the number-one stumble with this API, so it's worth meeting it here, in a sixteen-line program, rather than three chapters from now.
The '#app' is where the canvas goes: the engine finds that element on the page and mounts
a <canvas> inside it. In a project of your own it would be a <div id="app"> in your
index.html.
A scene is a function
const Game = () => {
return createScene();
};No classes, nothing to inherit from, no create() method someone decided to name that way.
A scene is a function that runs once, at startup, and inside it you declare what
exists. At the end it returns createScene(), which closes the scene with everything you
declared.
That "once" matters and it will come back: the body of the scene does not repeat every frame. What does repeat is chapter 3.
Colour is not a string
background: getColor('#12102b'),getColor turns whatever you hand it ('#12102b', 0x12102b, 'skyblue',
'rgb(18,16,43)') into the four numbers the graphics card understands. Any CSS colour
works.
Hold on: what is a function?
A function is a named piece of code you can run whenever you want. It's written like this:
const greet = () => {
console.log('hello');
};greet does nothing on its own: it's the recipe. It runs when someone writes greet(),
with the parentheses.
In this chapter, Game is a recipe for building a scene. You don't run it: you hand it to
the engine with game({ Game }), and the engine runs it when the time comes. Notice it goes
in there without parentheses: you're passing the recipe, not the result of cooking it.
Your turn
Change '#12102b' to another colour and wait half a second: the game re-runs itself. Try
'rebeccapurple', or '#000'.
Change the 480 and the 320 too. That's the size of the game in pixels, and the engine
draws exactly that many, so the canvas grows or shrinks with them. A Mega Drive game was
320×224; a Super Nintendo one, 256×224. Try both and see how little fitted on those
screens.