Nostalgia Meets Technology: Super Mario with TypeScript

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nostalgia Meets Technology Super Mario with TypeScript ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 1) Just for Fun! 2) Learning/ Repeating Typical Patterns 3) Nice Programming Exercise Why?
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 1) Game Loop 2) Tiles & Coordinates 3) Gravity 4) Side Scrolling & View Port 5) Collision Detection Agenda
5. •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
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 DEMO
7. •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 );
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Game Loop
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { […] }
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 A Simple Game Loop function tick(ctx: HeroContext, timeStamp: number): void { console.log('timeStamp', timeStamp); […] }
11. •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; } […] }
12. •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); […] }
13. •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)); }
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Tiles & Coordinates
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 (Cols, Rows) vs. (x, y)
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 GameGrid gameGrid[0][0] = { tile: skyTile }; gameGrid[1][0] = { tile: skyTile }; […]
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Gravity
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 WHILE not at ground Increase y by velocity Increase velocity Idea
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 DEMO
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Side Scrolling & View Port
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 View Port Scroll Offset Scroll Offset + View Port Width x renderX x - renderX
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 DEMO
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Collision Detection
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Bounding Boxes
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 First, in 1D < <
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 First, in 1D < <
28. •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
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 DEMO
30. •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
31. •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
32. •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