Programmerat exempelprojekt (följ länk och tryck på RUN) https://repl.it/@hakanandersson/canvas-shop Tillämpad Programmering. Ekonomi + Spel + Javascript Håkan Andersson
Webbapplikationer Java applets *1995 2013-2018 Adobe Flash *1995 2015-2020 HTML5 / JavaScript
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) ;
Hur och varför ska man lära ut programmering av spels ekonomi i Javascript?
Varför? (Javascript)
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
Hur? (spels ekonomi)
Förslag på tillämpningar Auktionshus (World of Warcraft) Shop till rollspel (Dark Souls) Shop till mobilspel (Pokémon GO) Shop till karavanspel (Rimworld)
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
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.)
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
Vad behöver man veta när man Planerar och Programmerar ett spel?
Programmera spel
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).
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++ ; } }
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); }
Planera spel
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)
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)