Nostalgia Meets Technology: Super Mario with TypeScript @BASTA 2026 in Mainz, Germany

Transcript

1. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Nostalgia Meets Technology Super Mario with TypeScript ANGULARarchitects.io
2. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2
3. Mastertextformat bearbeiten Why? 1) Just for Fun! • Textmasterformat bearbeiten 2) Learning/ Repeating Typical Patterns Zweite Ebene Exercise 3) •Nice Programming 3
4. Mastertextformat bearbeiten Agenda 1) Game Loop • Textmasterformat bearbeiten 2) Tiles & Coordinates Zweite Ebene 3) •Gravity 4) Side Scrolling & View Port 5) Collision Detection 4
5. Mastertextformat About Me bearbeiten Manfred Steyer, ANGULARarchitects.io • Textmasterformat bearbeiten • Zweite Ebene (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular 5
6. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 6
7. Mastertextformat Loading Images bearbeiten const response = await fetch('/hero.png'); const blob = await response.blob(); •const Textmasterformat bearbeiten heroTile = await createImageBitmap( blob, 0, // x 8, // y 16, // width 16 // height ); • Zweite Ebene 7
8. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Game Loop 8
9. Mastertextformat A Simple Game Loop bearbeiten function tick(ctx: HeroContext, timeStamp: number): void { •[…]Textmasterformat bearbeiten } • Zweite Ebene 9
10. Mastertextformat A Simple Game Loop bearbeiten function tick(ctx: HeroContext, timeStamp: number): void { timeStamp); •console.log('timeStamp', Textmasterformat bearbeiten […] • Zweite Ebene } 10
11. Mastertextformat A Simple Game Loop bearbeiten function tick(ctx: HeroContext, timeStamp: number): void { timeStamp); •console.log('timeStamp', Textmasterformat bearbeiten if (keyboard.right) { ctx.x += 1; } • Zweite Ebene […] } 11
12. Mastertextformat A Simple Game Loop bearbeiten function tick(ctx: HeroContext, timeStamp: number): void { timeStamp); •console.log('timeStamp', Textmasterformat bearbeiten if (keyboard.right) { ctx.x += 1; } • Zweite Ebene ctx.context.clearRect(0, 0, 1000, 1000); ctx.context.drawImage(ctx.heroTile, ctx.x, ctx.y, 16, 16); […] } 12
13. Mastertextformat A Simple Game Loop bearbeiten function tick(ctx: HeroContext, timeStamp: number): void { timeStamp); •console.log('timeStamp', Textmasterformat bearbeiten if (keyboard.right) { ctx.x += 1; } • Zweite Ebene ctx.context.clearRect(0, 0, 1000, 1000); ctx.context.drawImage(ctx.heroTile, ctx.x, ctx.y, 16, 16); requestAnimationFrame((timeStamp) => tick(ctx, timeStamp)); } 13
14. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 14
15. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Tiles & Coordinates 15
16. Mastertextformat (Cols, Rows) vs. (x,bearbeiten y) • Textmasterformat bearbeiten • Zweite Ebene 16
17. Mastertextformat bearbeiten GameGrid gameGrid[0][0] = { tile: skyTile }; gameGrid[1][0] = { tile: skyTile }; •[…]Textmasterformat bearbeiten • Zweite Ebene 17
18. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Gravity 18
19. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 19
20. Mastertextformat bearbeiten Idea WHILE not at ground • Textmasterformat bearbeiten Increase y by velocity • Zweite Ebene Increase velocity 20
21. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 21
22. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Side Scrolling & View Port 22
23. Mastertextformat bearbeiten Scroll Offset View Port x - renderX • Textmasterformat bearbeiten • Zweite Ebene renderX x Scroll Offset + View Port Width 23
24. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 24
25. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Collision Detection 25
26. Mastertextformat Bounding Boxes bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 26
27. Mastertextformat First, in 1D bearbeiten • Textmasterformat bearbeiten < • Zweite Ebene < 27
28. Mastertextformat First, in 1D bearbeiten • Textmasterformat bearbeiten < • Zweite Ebene < 28
29. Mastertextformat Bounding Boxes bearbeiten a • Textmasterformat bearbeiten • Zweite Ebene b a.left < b.right b.left < a.right a.top < b.bottom b.top < a.bottom 29
30. Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 30
31. Modern Angular bearbeiten Mastertextformat Architecture, Concepts, Implementation • Textmasterformat bearbeiten 400+ pages, PDF, EPUB • Zweite Ebene Regular Free Updates! Q1/2026 Waiting List: angular-book.com 31
32. Mastertextformat bearbeiten Conclusion 1) Game Loop: Take Care of Time Delta • Textmasterformat bearbeiten 2) Tiles & Coordinates ZweiteIncrease/ Ebene Decrease Velocity 3) •Gravity: 4) Side Scrolling & View Port: Change Offset i/o Hero Coordinates 5) Collision Detection: Bounding Boxes 6) We had fun! 32
33. Mastertextformat bearbeiten Manfred Steyer [Social Media] Manfred Steyer • Textmasterformat bearbeiten [web] ANGULARarchitects.io • Zweite Ebene Slides, Examples, Book Remote Company Workshops and Consulting http://angulararchitects.io @ Manfred Steyer 33