Share
Embed

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Game Loop 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Gravity 18

Slide 19

Slide 19 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 24

Slide 25

Slide 25 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene Collision Detection 25

Slide 26

Slide 26 text

Mastertextformat Bounding Boxes bearbeiten • Textmasterformat bearbeiten • Zweite Ebene 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Mastertextformat bearbeiten • Textmasterformat bearbeiten • Zweite Ebene DEMO 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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