Get Ready

This will be a quick change. We have everything we need. Modify main.ts:

src/main.ts
1
const frame = (hrt: DOMHighResTimeStamp) => {
2
  // ...
3

4
  bird.draw(context);
5
  pipeManager.draw(context);
6
  ground.draw(context);
7

8
  if (game.state !== GameState.Title) {
9
    scoreManager.draw(context);
10
  }
11

+
  if (game.state === GameState.Title) {
+
    context.drawImage(
+
      spriteSheet,
+
      spriteMap.getReady.sourceX,
+
      spriteMap.getReady.sourceY,
+
      spriteMap.getReady.width,
+
      spriteMap.getReady.height,
+
      (config.gameWidth - spriteMap.getReady.width) / 2,
+
      (config.gameHeight - spriteMap.getReady.height) / 2,
+
      spriteMap.getReady.width,
+
      spriteMap.getReady.height
+
    );
+
  }
25

26
  last = hrt;
27

28
  requestAnimationFrame(frame);
29
};
30

31
// Start the game loop.
32
requestAnimationFrame(frame);

Much better! We have a nice call to action to start the game.