11-12, switchscreen works

PizzaDragon · PizzaDragon · commit 926889349c17 · 2019-12-11T11:43:28.000+01:00
diff --git a/index.html b/index.html
@@ -11,8 +11,15 @@
 </head>
 
 <body id="body">
-    
-
+    <canvas id="canvas"></canvas>
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <script>
+        WebFont.load({
+            custom:{
+                families: ['Minecraft']
+            }
+        });
+    </script>
 
 
 
diff --git a/src/GameScreen.ts b/src/GameScreen.ts
@@ -28,9 +28,9 @@ class GameScreen{
         alignment: CanvasTextAlign = "center",
         color: string = "blue",
     ) {
-        this.ctx.font = `${fontSize}px Minecraft`;
-        this.ctx.fillStyle = color;
-        this.ctx.textAlign = alignment;
-        this.ctx.fillText(text, xCoordinate, yCoordinate);
+        ctx.font = `${fontSize}px Minecraft`;
+        ctx.fillStyle = color;
+        ctx.textAlign = alignment;
+        ctx.fillText(text, xCoordinate, yCoordinate);
     }
 }
diff --git a/src/game.ts b/src/game.ts
@@ -22,27 +22,50 @@ class Game {
         this.ctx = this.canvas.getContext('2d');
 
         this.keyboardListener = new KeyboardListener();
-        this.currentScreen = new SchoolParty(this.game);
+        this.currentScreen = new StartScreen(this.game);
+
+        this.loop();
     }
 
-    public switchScreen(newScreen: GameScreen) {
-        // If the current screen is an instance of the StartScreen class
-        // Basically: if the current screen is the start screen
-        // And the user pressed "s", render the level screen
-        if (
-            this.currentScreen instanceof StartScreen
-            && this.keyboardListener.isKeyDown(KeyboardListener.KEY_S)
-        ) {
-            this.currentScreen = new SchoolParty(this.game);
-        }
+    private loop = () => {
+        // this.switchScreen()
+
+         // Clear the canvas
+         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+         // Let the current screen draw itself on the rendering context
+         this.currentScreen.draw(this.ctx);
+
+         // Request the next animation frame
+        requestAnimationFrame(this.loop);
+
+        
     }
 
+    // private switchScreen() {
+    //     // If the current screen is an instance of the StartScreen class
+    //     // Basically: if the current screen is the start screen
+    //     // And the user pressed "s", render the level screen
+    //     if (
+    //         this.currentScreen instanceof StartScreen
+    //         && this.keyboardListener.isKeyDown(KeyboardListener.KEY_S)
+    //     ) {
+    //         this.currentScreen = new LevelScreen(this.canvas, this.ctx, this.keyboardListener);
+    //     }
+
+    //     if (
+    //         this.currentScreen instanceof LevelScreen
+    //         && this.keyboardListener.isKeyDown(KeyboardListener.KEY_ESC)
+    //     ) {
+    //         this.currentScreen = new TitleScreen(this.canvas, this.ctx);
+    //     }
+    // }
+
    
 }
 
 // This will get an HTML element. I cast this element in de appropriate type using <>
 let init = () => {
-    const Asteroids = new Game(document.getElementById("canvas") as HTMLCanvasElement);
+    const You = new Game(document.getElementById("canvas") as HTMLCanvasElement);
 };
 
 // Add EventListener to load the game whenever the browser is ready
diff --git a/src/startScreen.ts b/src/startScreen.ts
@@ -19,15 +19,15 @@ class StartScreen extends GameScreen {
         }
     }
 
-    public adjust(game: Game) {
-        if (this.shouldStartLevel) {
-            game.switchScreen(new SchoolParty(game));
-        }
-    }
+    // public adjust(game: Game) {
+    //     if (this.shouldStartLevel) {
+    //         game.switchScreen();
+    //     }
+    // }
 
     public draw(ctx: CanvasRenderingContext2D) {
-        this.writeTextToCanvas(ctx, "You", 140, this.canvas.width/2, 200,);
-        this.writeTextToCanvas(ctx, "PRESS ENTER TO PLAY", 30, this.canvas.width/2, 400, )
+        this.writeTextToCanvas(ctx, "You", 140, 500, 200,);
+        this.writeTextToCanvas(ctx, "PRESS ENTER TO PLAY", 30, 500, 400, )
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -28,9 +28,9 @@ class GameScreen{`
`28`	`28`	`alignment: CanvasTextAlign = "center",`
`29`	`29`	`color: string = "blue",`
`30`	`30`	`) {`
`31`		- this.ctx.font = `${fontSize}px Minecraft`;
`32`		`- this.ctx.fillStyle = color;`
`33`		`- this.ctx.textAlign = alignment;`
`34`		`- this.ctx.fillText(text, xCoordinate, yCoordinate);`
	`31`	+ ctx.font = `${fontSize}px Minecraft`;
	`32`	`+ ctx.fillStyle = color;`
	`33`	`+ ctx.textAlign = alignment;`
	`34`	`+ ctx.fillText(text, xCoordinate, yCoordinate);`
`35`	`35`	`}`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,15 +19,15 @@ class StartScreen extends GameScreen {`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`
`22`		`- public adjust(game: Game) {`
`23`		`- if (this.shouldStartLevel) {`
`24`		`- game.switchScreen(new SchoolParty(game));`
`25`		`- }`
`26`		`- }`
	`22`	`+ // public adjust(game: Game) {`
	`23`	`+ // if (this.shouldStartLevel) {`
	`24`	`+ // game.switchScreen();`
	`25`	`+ // }`
	`26`	`+ // }`
`27`	`27`
`28`	`28`	`public draw(ctx: CanvasRenderingContext2D) {`
`29`		`- this.writeTextToCanvas(ctx, "You", 140, this.canvas.width/2, 200,);`
`30`		`- this.writeTextToCanvas(ctx, "PRESS ENTER TO PLAY", 30, this.canvas.width/2, 400, )`
	`29`	`+ this.writeTextToCanvas(ctx, "You", 140, 500, 200,);`
	`30`	`+ this.writeTextToCanvas(ctx, "PRESS ENTER TO PLAY", 30, 500, 400, )`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`