docs: Fix details in Tutorial - Building Flappy Bird (#3321)

* Errors fixed in example code
* More context added in fragment of code

site/docs/00-tutorial/03-step-bird-and-ground.mdx

@@ -15,6 +15,7 @@ We can use the `anchor` property to tell Excalibur how to align the default grap
 import * as ex from "excalibur";
 
 export class Ground extends ex.Actor {
+    moving = false;
     constructor(pos: ex.Vector) {
         super({
             pos,
@@ -25,6 +26,14 @@ export class Ground extends ex.Actor {
             z: 1 // position the ground above everything
         })
     }
+
+    start() {
+        this.moving = true;
+    }
+
+    stop() {
+        this.moving = false;
+    }
 }
 ```
 

site/docs/00-tutorial/06-step-refactor-to-scene.mdx

@@ -28,11 +28,11 @@ export class Level extends ex.Scene {
         this.ground = new Ground(ex.vec(0, engine.screen.drawHeight - 64))
         this.add(this.ground);
 
-        const topPipe = new Pipe(ex.vec(this.level.engine.screen.drawWidth, 150), 'top');
-        game.add(topPipe);
+        const topPipe = new Pipe(ex.vec(engine.screen.drawWidth, 150), 'top');
+        this.add(topPipe);
 
-        const bottomPipe = new Pipe(ex.vec(this.level.engine.screen.drawWidth, 300), 'bottom');
-        game.add(bottomPipe);
+        const bottomPipe = new Pipe(ex.vec(engine.screen.drawWidth, 300), 'bottom');
+        this.add(bottomPipe);
     }
 }
 ```
@@ -48,7 +48,7 @@ const game = new ex.Engine({
   ...
   scenes: { Level: Level }
 });
-...
+
 game.start().then(() => {
   game.goToScene('Level');
 });

site/docs/00-tutorial/10-step-game-over.mdx

@@ -11,8 +11,7 @@ For our game, when the bird collides with the ground, pipe, or goes offscreen we
 We implement a `showStartInstructions()` method that shows our start game label and starts the game as soon as a pointer is tapped.
 
 We'll show the start instructions at the beginning and on a game over.
-
-
+(Remember to remove or comment out the line `this.pipeFactory.start();` so that the `PipeFactory` does not start before displaying the start instructions)
 ```typescript
 // level.ts
 export class Level extends ex.Scene {
@@ -32,15 +31,16 @@ export class Level extends ex.Scene {
 
     override onInitialize(engine: ex.Engine): void {
         ...
+        //this.pipeFactory.start();
         this.showStartInstructions();
     }
 
     showStartInstructions() {
-        this.startGameLabel.graphics.visible = true;
+        this.startGameLabel.graphics.isVisible = true;
         this.engine.input.pointers.once('down', () => {
             this.reset();
 
-            this.startGameLabel.graphics.visible = false;
+            this.startGameLabel.graphics.isVisible = false;
             this.bird.start();
             this.pipeFactory.start();
             this.ground.start();

site/docs/00-tutorial/11-step-images-graphics.mdx

@@ -16,6 +16,8 @@ It would be nice to have some graphics for our `Bird` actor, we can load images
 
 ```typescript
 // resources.ts
+import * as ex from 'excalibur'
+
 export const Resources = {
     // Relative to /public in vite
     BirdImage: new ex.ImageSource('./images/bird.png')

site/docs/00-tutorial/12-step-bird-graphics.mdx

@@ -19,43 +19,71 @@ To slice this up into animations we can use `ex.SpriteSheet` and `ex.Animation`.
 * End - after the last frame nothing is drawn
 
 ```typescript
+// bird.ts
+...
+export class Bird extends ex.Actor {
+  ...
+  upAnimation!: ex.Animation;
+  downAnimation!: ex.Animation;
+
+  ...
+  override onInitialize(): void {
+    // Slice up image into a sprite sheet
+    const spriteSheet = ex.SpriteSheet.fromImageSource({
+        image: Resources.BirdImage,
+        grid: {
+            rows: 1,
+            columns: 4,
+            spriteWidth: 32,
+            spriteHeight: 32,
+        }
+    });
+
+    // Animation to play going up on tap
+    this.upAnimation = ex.Animation.fromSpriteSheet(
+        spriteSheet,
+        [2, 1, 0], // 3rd frame, then 2nd, then first
+        150, // 150ms for each frame
+        ex.AnimationStrategy.Freeze);
+
+    // Animation to play going down
+    this.downAnimation = ex.Animation.fromSpriteSheet(
+        spriteSheet,
+        [0, 1, 2],
+        150,
+        ex.AnimationStrategy.Freeze);
 
-// Slice up image into a sprite sheet
-const spriteSheet = ex.SpriteSheet.fromImageSource({
-    image: Resources.BirdImage,
-    grid: {
-        rows: 1,
-        columns: 4,
-        spriteWidth: 32,
-        spriteHeight: 32,
-    }
-});
-
-// Animation to play going up on tap
-this.upAnimation = ex.Animation.fromSpriteSheet(
-    spriteSheet,
-    [2, 1, 0], // 3rd frame, then 2nd, then first
-    150, // 150ms for each frame
-    ex.AnimationStrategy.Freeze);
-
-// Animation to play going down
-this.downAnimation = ex.Animation.fromSpriteSheet(
-    spriteSheet,
-    [0, 1, 2],
-    150,
-    ex.AnimationStrategy.Freeze);
-
-// Register animations by name
-this.graphics.add('down', this.downAnimation);
-this.graphics.add('up', this.upAnimation);
+    // Register animations by name
+    this.graphics.add('down', this.downAnimation);
+    this.graphics.add('up', this.upAnimation);
+    ...
+
+    this.on('exitviewport', () => {
+        this.level.triggerGameOver();
+    });
+  }
+  ...
+}
 ```
 
 You can also pull single frames out of a `SpriteSheet` as a `Sprite`
 
 ```typescript
-this.startSprite = spriteSheet.getSprite(1, 0);
-...
-this.graphics.add('start', this.startSprite);
+// bird.ts
 
-this.graphics.use('start');
-```
+export class Bird extends ex.Actor {
+  ...
+  startSprite!: ex.Sprite;
+  ...
+  override onInitialize(): void {
+    ...
+    this.startSprite = spriteSheet.getSprite(1, 0);
+    ...
+    this.graphics.add('start', this.startSprite);
+
+    this.graphics.use('start');
+    ...
+  }
+}
+...
+```

site/docs/00-tutorial/14-step-ground-graphics.mdx

@@ -19,6 +19,7 @@ We want the ground to tile and repeat horizontally we can take advantage of the
 // resources.ts
 export const Resources = {
     // Relative to /public in vite
+    ...
     GroundImage: new ex.ImageSource('./images/ground.png', {
         wrapping: ex.ImageWrapping.Repeat
     })

site/docs/00-tutorial/15-step-sound-music.mdx

@@ -16,6 +16,7 @@ Finally to really add depth to a game let's add some sound! `ex.Sound` needs to
 Excalibur supports any audio your browser supports, you can specify an ordered list of files to fallback to if a browser doesn't support.
 
 ```typescript
+// resources.ts
 export const Resources = {
     // Relative to /public in vite
     ...