Tweet
Tweet

Slide 1

Slide 1 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nostalgia Meets Technology Super Mario with TypeScript ANGULARarchitects.io

Slide 2

Slide 2 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2

Slide 3

Slide 3 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 1) Just for Fun! 2) Learning/ Repeating Typical Patterns 3) Nice Programming Exercise Why?

Slide 4

Slide 4 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 1) Game Loop 2) Tiles & Coordinates 3) Gravity 4) Side Scrolling & View Port 5) Collision Detection Agenda

Slide 5

Slide 5 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 6

Slide 6 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 DEMO

Slide 7

Slide 7 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Loading Images const response = await fetch('/hero.png'); const blob = await response.blob(); const heroTile = await createImageBitmap( blob, 0, // x 8, // y 16, // width 16 // height );

Slide 8

Slide 8 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Game Loop

Slide 9

Slide 9 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { […] }

Slide 10

Slide 10 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { console.log('timeStamp', timeStamp); […] }

Slide 11

Slide 11 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { console.log('timeStamp', timeStamp); if (keyboard.right) { ctx.x += 1; } […] }

Slide 12

Slide 12 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { console.log('timeStamp', timeStamp); if (keyboard.right) { ctx.x += 1; } ctx.context.clearRect(0, 0, 1000, 1000); ctx.context.drawImage(ctx.heroTile, ctx.x, ctx.y, 16, 16); […] }

Slide 13

Slide 13 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { console.log('timeStamp', timeStamp); if (keyboard.right) { ctx.x += 1; } ctx.context.clearRect(0, 0, 1000, 1000); ctx.context.drawImage(ctx.heroTile, ctx.x, ctx.y, 16, 16); requestAnimationFrame((timeStamp) => tick(ctx, timeStamp)); }

Slide 14

Slide 14 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 DEMO

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Tiles & Coordinates

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 (Cols, Rows) vs. (x, y)

Slide 17

Slide 17 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 GameGrid gameGrid[0][0] = { tile: skyTile }; gameGrid[1][0] = { tile: skyTile }; […]

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Gravity

Slide 19

Slide 19 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19

Slide 20

Slide 20 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 WHILE not at ground Increase y by velocity Increase velocity Idea

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 DEMO

Slide 22

Slide 22 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Side Scrolling & View Port

Slide 23

Slide 23 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 View Port Scroll Offset Scroll Offset + View Port Width x renderX x - renderX

Slide 24

Slide 24 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 DEMO

Slide 25

Slide 25 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Collision Detection

Slide 26

Slide 26 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Bounding Boxes

Slide 27

Slide 27 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 First, in 1D < <

Slide 28

Slide 28 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 First, in 1D < <

Slide 29

Slide 29 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Bounding Boxes a.left < b.right b.left < a.right a.top < b.bottom b.top < a.bottom a b

Slide 30

Slide 30 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 DEMO

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Architecture, Concepts, Implementation Modern Angular 400+ pages, PDF, EPUB Regular Free Updates! Q1/2026 Waiting List: angular-book.com

Slide 32

Slide 32 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 1) Game Loop: Take Care of Time Delta 2) Tiles & Coordinates 3) Gravity: Increase/ Decrease Velocity 4) Side Scrolling & View Port: Change Offset i/o Hero Coordinates 5) Collision Detection: Bounding Boxes 6) We had fun! Conclusion

Slide 33

Slide 33 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io