Tillämpad Programmering. Ekonomi + Spel + Javascript

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Tillämpad Programmering. Ekonomi + Spel + Javascript"

Ann Jansson
för 5 år sedan
Visningar:

1 Programmerat exempelprojekt (följ länk och tryck på RUN) Tillämpad Programmering. Ekonomi + Spel + Javascript Håkan Andersson

2 Webbapplikationer Java applets * Adobe Flash * HTML5 / JavaScript

3 HTML /index.html <canvas id="mycanvas" width="300" height="150"> </canvas> <script src= myjs.js > </script> Javascript /myjs.js var c = document.getelementbyid( mycanvas ) ; var ctx = c.getcontext( 2d ) ; ctx.strokerect(0, 0, 300, 150) ;

4 Hur och varför ska man lära ut programmering av spels ekonomi i Javascript?

5 Varför? (Javascript)

6 Varför Javascript Oberoende av plattform* Kan interagera med hemsidas övriga objekt <canvas> kan överlappas --> arbeta i lager * användare kan blockera javascript och som utvecklare behöver du ta hänsyn till olika inmatningsmetoder

7 Hur? (spels ekonomi)

8 Förslag på tillämpningar Auktionshus (World of Warcraft) Shop till rollspel (Dark Souls) Shop till mobilspel (Pokémon GO) Shop till karavanspel (Rimworld)

9 Interaktion i fokus; A-och-O i många tillämpningar Menyer Knappar Men varför?! Vad är syftet? Inmatningmetoder Planering är kreativ och utvecklande Uppmuntrar till samtal om både design och funktion Projektet är iterativt och utmanande Bör kännas meningsfullt, trots att liknande produkt existerar

10 Faktorer som avgör Hur? Vilken tillämpning? Förkunskaper (i ekonomi, programmering etc.) Lämpligt innehåll (inriktning på utbildningen etc.) Tidsåtgång (antal timmar) Projektform (grupp, individ, SCRUM etc.)

11 Spel tillhandahåller sällan en lösning på ett problem... utan skapar problem som ska lösas Men......är detta en ekonomisk tillämpning? En ekonomisk tillämpning i spel är en interaktion med ett ekonomiskt system I både spel och ekonomiska lösningar... krävs att du programmerar ett ekonomiskt system

12 Vad behöver man veta när man Planerar och Programmerar ett spel?

13 Programmera spel

14 Initialization & Gameloop Initialization (start) = En funktion där man t.ex. skapar objekt som behöver finnas från början. Startar sedan gameloop. Körs en gång! Gameloop (update) = En funktion som bl.a. ser till att canvas/context byter innehåll. Körs t.ex. 60 gånger per sekund (60fps)! Eventlistener En eventlistener kan skapas för att hålla koll på när användaren interagerar med en inmatningmetod (tangentbord, mus, touch).

15 HTML Javascript <html> <head> </head> <body> <canvas id="mycanvas" width="400" height="300"></canvas> <script src="myjs.js"> </script> <script> window.onload = function(){initialize()} </script> </body> </html> var rowidx = 0; var c = document.getelementbyid( mycanvas ) ; var ctx = c.getcontext( 2d ) ; function initialize(){ window.addeventlistener('keydown',keyboardfn); gameloop(); } function keyboardfn(e){ if( e.key=="arrowdown" ){ rowidx++ ; } }

16 Javascript Javascript var rowidx = 0; var c = document.getelementbyid( mycanvas ) ; var ctx = c.getcontext( 2d ) ; function initialize(){ window.addeventlistener('keydown',keyboardfn); gameloop(); } function keyboardfn(e){ if( e.key=="arrowdown" ){ rowidx++ ; } } function gameloop(){ window.requestanimationframe(gameloop); ctx.clearrect(0,0,c.width,c.height); ctx.font = "30px Verdana"; ctx.filltext(rowidx,20,50); }

17 Planera spel

18 VISION (bild på färdig produkt) PROTOTYP (vad man tror sig hinna på 1h arbete) DESIGN-BESLUT (lista ord, ex.vis. simpel, tabeller, max 3 klick ) INSPIRATION (bild på liknande produkt)

19 VISION (bryt ner programmet till dess funktioner) och (lista variabelnamn och variabeltyp) för enklare program PROTOTYP (bryt ner prototypen till dess funktioner) och/eller (lista variabel-namn och -typ)

Relevanta dokument

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.