fix flappy bird typescript config

games/flappy-bird/Bird.ts

@@ -1,5 +1,5 @@
-import Game from "./Game";
-import Pipe from "./Pipe";
+import Game from "./Game.js";
+import Pipe from "./Pipe.js";
 
 export default class Bird {
     game: Game;

games/flappy-bird/Game.ts

@@ -43,7 +43,7 @@ export default class Game {
             'countdown': () => new CountdownState(this),
             'paused': () => new PausedState(this),
         });
-        this.stateMachine.change('title');
+        this.stateMachine.change('title', {});
         this.debug = false;
         this.fps = 60;
         this.t = 0;

games/flappy-bird/Graphics.ts

@@ -1,4 +1,4 @@
-import Game from "./Game";
+import Game from "./Game.js";
 
 export default class Graphics {
     game: Game;
@@ -34,9 +34,13 @@ class Scene {
     y: number;
     dx: number;
 
-    constructor() {
+    constructor(image: HTMLImageElement, width: number, height: number, dx: number) {
         this.x = 0;
         this.y = 0;
+        this.dx = dx;
+        this.image = image;
+        this.width = width;
+        this.height = height;
     }
 
     update(dt: number) {
@@ -62,21 +66,21 @@ class Scene {
 
 class Background extends Scene {
     constructor() {
-        super();
-        this.image = <HTMLImageElement>document.getElementById('backgroundImage');
-        this.width = this.image.width;
-        this.height = this.image.height;
-        this.dx = 0.04;
+        const image = <HTMLImageElement>document.getElementById('backgroundImage');
+        const width = image.width;
+        const height = image.height;
+        const dx = 0.04;
+        super(image, width, height, dx);
     }
 }
 
 class Ground extends Scene {
     constructor(gameHeight: number) {
-        super();
-        this.image = <HTMLImageElement>document.getElementById('groundImage');
-        this.width = this.image.width;
-        this.height = this.image.height;
-        this.dx = 0.05;
+        const image = <HTMLImageElement>document.getElementById('groundImage');
+        const width = image.width;
+        const height = image.height;
+        const dx = 0.05;
+        super(image, width, height, dx);
         this.y = gameHeight - this.height;
     }
 }

games/flappy-bird/Pipe.ts

@@ -4,7 +4,6 @@ export default class Pipe {
     image: HTMLImageElement;
     width: number;
     height: number;
-    pipeGap: number;
     orientation: string;
 
     constructor(x: number, y: number, orientation: string) {
@@ -16,7 +15,7 @@ export default class Pipe {
         this.orientation = orientation;
     }
 
-    draw(ctx: CanvasRenderingContext2D, debug : boolean) {
+    draw(ctx: CanvasRenderingContext2D, debug: boolean) {
         ctx.save();
         if (this.orientation === 'top') {
             // Adjust the y position of the pipe before scaling the canvas
@@ -26,13 +25,13 @@ export default class Pipe {
             ctx.translate(this.x, this.y);
         }
         ctx.drawImage(this.image, 0, 0, this.width, this.height);
-        
+
         if (debug) {
             ctx.strokeRect(0, 0, this.width, this.height);
         }
         ctx.restore();
 
     }
-    
-} 
+
+}
 

games/flappy-bird/PipePair.ts

@@ -1,7 +1,7 @@
-import Bird from "./Bird";
+import Bird from "./Bird.js";
 import Pipe from "./Pipe.js";
-import StateMachine from "./StateMachine";
-import PlayState from "./states/PlayState";
+import StateMachine from "./StateMachine.js";
+import PlayState from "./states/PlayState.js";
 
 export default class PipePair {
     y: number;

games/flappy-bird/StateMachine.ts

@@ -1,5 +1,9 @@
 import BaseState from "./states/BaseState.js";
 
+export interface enterParams {
+    [key: string]: any;
+}
+
 export default class StateMachine {
     private empty = new BaseState();
     private states: { [key: string]: () => any } = {};
@@ -9,7 +13,7 @@ export default class StateMachine {
         this.states = states || {};
     }
 
-    change(stateName: string, enterParams?: object) {
+    change(stateName: string, enterParams: enterParams) {
         this.current.exit();
         this.current = this.states[stateName]();
         this.current.enter(enterParams);
@@ -19,7 +23,7 @@ export default class StateMachine {
         this.current.update(dt);
     }
 
-    draw(ctx : CanvasRenderingContext2D) {
+    draw(ctx: CanvasRenderingContext2D) {
         this.current.draw(ctx);
     }
 }

games/flappy-bird/script.ts

@@ -14,7 +14,7 @@ function animate(game: Game) {
 window.onload = () => {
 
     const canvas = <HTMLCanvasElement>document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
     canvas.width = 512;
     canvas.height = 288;

games/flappy-bird/states/CountdownState.ts

@@ -3,7 +3,7 @@ The TitleScreenState is the starting screen of the game, shown on startup. It sh
     display "Press Enter" and also our highest score.
 */
 
-import Game from "../Game";
+import Game from "../Game.js";
 import BaseState from "./BaseState.js";
 
 export default class CountdownState extends BaseState {
@@ -31,7 +31,7 @@ export default class CountdownState extends BaseState {
             this.timer -= CountdownState.COUNTDOWN_TIME;
 
             if (this.count === 0) {
-                this.game.stateMachine.change('play');
+                this.game.stateMachine.change('play', {});
             }
         }
     }

games/flappy-bird/states/PausedState.ts

@@ -1,6 +1,8 @@
-import Game from "../Game";
+import Game from "../Game.js";
 import BaseState from "./BaseState.js";
 
+import type { enterParams } from "../StateMachine";
+
 export default class PausedState extends BaseState {
     game: Game;
     priorState: any;
@@ -10,9 +12,9 @@ export default class PausedState extends BaseState {
         this.game = game;
     }
 
-    enter(enterParams: object) {
+    enter(enterParams: enterParams) {
         this.priorState = enterParams['state'];
-     }
+    }
 
     exit() { }
 

games/flappy-bird/states/PlayState.ts

@@ -4,15 +4,14 @@ avoids pipes. When the player collides with a pipe, we should go to the GameOver
 we then go back to the main menu.
 */
 
-import Game from "../Game";
+import Game from "../Game.js";
 import Bird from "../Bird.js";
-import * as Mathf from "../../math/Mathf";
+import * as Mathf from "../../math/Mathf.js";
 import PipePair from "../PipePair.js";
 import BaseState from "./BaseState.js";
 
 export default class PlayState extends BaseState {
     game: Game;
-    ctx: CanvasRenderingContext2D;
     bird: Bird;
     pipePairs: PipePair[];
     pipePairY: number;

games/flappy-bird/states/ScoreState.ts

@@ -1,14 +1,10 @@
-/*
-
-*/
-
-import Game from "../Game";
-import StateMachine from "../StateMachine";
-import * as Mathf from "../../math/Mathf";
+import Game from "../Game.js";
+import * as Mathf from "../../math/Mathf.js";
 import BaseState from "./BaseState.js";
 
+import type { enterParams } from "../StateMachine";
+
 export default class ScoreState extends BaseState {
-    stateMachine: StateMachine;
     game: Game;
     score: number;
     medalImage: HTMLImageElement;
@@ -27,17 +23,18 @@ export default class ScoreState extends BaseState {
         this.medalWidth = this.medalSpriteWidth * 0.50;
         this.medalHeight = this.medalSpriteHeight * 0.50;
         this.medalGap = 20;
+        this.score = 0;
     }
 
-    enter(enterParams: { string: any }) {
+    enter(enterParams: enterParams) {
         this.score = enterParams['score'];
     }
 
     exit() { }
 
     update(dt: number) {
         if (this.game.input.isKeyPressed('Enter')) {
-            this.game.stateMachine.change('countdown');
+            this.game.stateMachine.change('countdown', {});
         }
     }
 

games/flappy-bird/states/TitleScreenState.ts

@@ -3,7 +3,7 @@ The TitleScreenState is the starting screen of the game, shown on startup. It sh
     display "Press Enter" and also our highest score.
 */
 
-import Game from "../Game";
+import Game from "../Game.js";
 import BaseState from "./BaseState.js";
 
 export default class TitleScreenState extends BaseState {
@@ -19,7 +19,7 @@ export default class TitleScreenState extends BaseState {
 
     update(dt: number) {
         if (this.game.input.isKeyPressed('Enter')) {
-            this.game.stateMachine.change('countdown');
+            this.game.stateMachine.change('countdown', {});
         }
     }