șĘșĘߣ

șĘșĘߣShare a Scribd company logo

Game Based Learning - Att bygga spelprototyper i HTML5

‱
‱
Simon Johansson
Simon Johansson

șĘșĘߣs from the course Game Based Learning, lecture held at The Department of Computer and Systems Sciences at Stockholm University 2013

1 of 47
Download to read offline
Game Based Learning Att bygga spelprototyper i HTML5
Simon Johansson mail@simon-johansson.com
UpplÀgget för förelÀsningen Prototyping, Sketching, Pseudokod & Tips Tips: FÄ inte panik om ni inte förstÄr allt. Experimentera med exemplena (ligger uppe i iLearn). Japanese Memory - HTML, CSS, JavaScript (jQuery) Falling Math - <canvas>, JavaScript
Prototyp? Testa sina idéer för att sedan kunna förbÀttra dem. En testversion som Àr skapad för att utvÀrdera en viss aspekt av den tÀnkta slutprodukten. Konkritisera och förmedla vad man har tÀnkt sig. Kan vara low-fi, high-fi och allt dÀr emellan. Testa pÄ nÄgon utomstÄende, helst inom mÄlgruppen.
Game Based Learning - Att bygga spelprototyper i HTML5
I erat fall Inget krav att ni iterera över er prototyp Skall vara sÄ spelbar och komplett som möjligt Börja med det viktigaste, utöka om ni hinner
Sketchning Bra för att förmedla sina idéer Konkretiserar idéer, blir tydligt om man tÀnker rÀtt Bra att ha fokus nÀr man vÀl börjar koda
Pseudokod Bra för att bena ut exakt vad som behövs göras Bra om alla i teamet jobbar mot samma mÄl Skönt nÀr man fÄr blackout Exempel: Gissa talet
var number_to_guess = slumpmĂ€ssigt tal mellan 0 - 100 function check_guess(){ if ( gissning Ă€r mer Ă€n number_to_guess ){ skriv ut “För högt. Gissa igen” if ( gissning Ă€r mindre Ă€n number_to_guess ){ skriv ut “För lĂ„gt. Gissa igen” else { skriv ut “Bra! RĂ€tt gissat” } } } } Kör funktionen check_guess nĂ€r anvĂ€ndaren gör en gissning
Tips AnvÀnd en bra text editor: Sublime Text 2 AnvÀnd JavaScript-konsolen Googla, mycket!
TvÄ olika sÀtt att bygga spel i HTML5 Om spelen vi skall bygga DOM-element (klassisk hemside-uppbyggnad) <canvas>-taggen HTML-element (<img>, <div> mm.) CSS-styling JavaScript (jQuery) JavaScript för att rita upp objekt, spela upp ljud mm. GÄr det att utföra med hjÀlp av DOM-element sÄ gör det, anvÀnd <canvas>-taggen i annat fall.
Japanese Memory - uppbyggnad HTML <section>, <div>, <p> ... data-attribut CSS Styling Layout Animering JavaScript (jQuery) click-events Logik Spela upp ljud
● jQuery( 
 ) eller $( ... ) jQuery ● jQuery ÄR JavaScript ● LĂ€nkar in det i vĂ„rt dokument ● AnvĂ€nda CSS-selektorer $(“#myID”).hide() ● HjĂ€lpbibliotek ● Events: click, keydown ...
Skapa variabler som hÄller koll pÄ antalet spelade omgÄngar samt vilka kort som har vÀnts Blanda korten och ange att funktionen card_clicked körs nÀr anvÀndaren klickar pÄ ett kort function card_clicked(){ Ta bort möjligheten att klicka pÄ det vÀnda kortet Visa kortets framsida och spela upp kortets ljud if ( tvÄ kort har vÀnts ) { kör funktionen check_pair } }
“this” VĂ€ldigt mycket upprepning. LĂ€tt att göra fel. Jobbigt att felhantera. $("#card-1").click( card_clicked1 ) $("#card-2").click( card_clicked2 ) $("#card-3").click( card_clicked3 )
“this” Generell lösning Tydlig struktur $("div.card").click( card_clicked ) function card_clicked() { } $(this)...
“this” I bollhavet finns det massor av bollar. Simon plockar upp en av bollarna. Den Ă€r röd. document <div>, <div> ... den klickade <div>:en this
var fruits = [ "Apelsin", "Banan", "Mango" ] 0 1 2 var favorite = fruits[0] "Apelsin" var favorite = fruits[2] "Mango"
fruits.push( "Kiwi" ) fruits[0] == fruits[3] false [ "Apelsin", "Banana", "Mango", "Kiwi" ] "Apelsin" == "Kiwi" fruits.length 4
function check_pair(){ } Ta bort möjligheten att klicka pÄ nÄgot kort if ( Testa om de bÄda vÀnda korten matchar varandra ) { Ta bort de vÀnda korten frÄn spelplanen Gör resterande kort klickbara igen else { Visa korten i tvÄ sekunder VÀnd tillbaka korten Gör samtliga kort klickbara igen Inkrementera antalet spelade omgÄngar } }
Japanese Memory - utökningar ● SVG ● Spelplanen utökas efter varje omgĂ„ng ● GĂ„r pĂ„ tid ● High score ● ...
Falling Math - uppbyggnad HTML <canvas> CSS --- JavaScript Logik canvas-API game loop osv.
Falling Math - uppbyggnad Flera smĂ„ och avgrĂ€nsade funktioner Ändra saker oberoende av vad anvĂ€ndaren gör Definera variabler överst i koden
background_update() falling_expression_update() collision_check() game_loop() change_level() new_falling_expression() player_update()
var math_problems = [ ] var math_problems = [ ["5-4=1", true], 
 ] math_problems[0] 0 1 2 [], [], [], 
 "5-4=1" math_problems[0][1] true 0 1 [0]
function game_loop() { } 60 ggr / sek Rensa canvasen Uppdatera bakgrunden Uppdatera spelaren Uppdatera fallande talet Kolla efter krockar
function background_update(){ Rita ut bakgrundbilden pÄ canvasen } Rita ut vilken level spelaren Àr pÄ
function falling_expression_update() { Uppdatera det fallande talets y-vÀrde Rita ut det fallande talet pÄ canvasen }
function player_update() { Uppdatera spelarens x-vÀrde om en piltangent Àr nedtryckt Rita ut spelaren pÄ canvasen } HÄll koll sÄ att x-vÀrdet inte hamnar utanför canvasen
player_x player_x <= 0
player_x player_x + player_width >= canvas.width player_width
function collision_check() { if ( y-vÀrde för fallande tal < y-vÀrde för spelare){ } } avsluta funktionen if ( x-vÀrdet för fallande tal == x-vÀrde för spelare) { } Höj eller sÀnk nivÄn beroÀnde pÄ om talet var rÀtt eller fel else { Straffa spelaren om talet var rÀtt } Skapa ett nytt fallande tal
player_x <= fall_x + fall_width && fall_x <= player_x + player_width 10 / 2 = 5 fall player
0 <= 20 + 80 && fall_x <= player_x + player_width 10 / 2 = 5 x = 0 x = 20 width = 80
0 <= 20 + 80 && 20 <= 0 + 50 10 / 2 = 5 x = 0 x = 20 width = 50
function change_level( next_or_prev ) { if ( next_or_prev == “next” ){ } } Höja svĂ„righetsgraden else if ( next_or_prev == “prev” ){ } SĂ€nka svĂ„righetsgraden
function new_falling_expression { Ge det nya fallande talet ett nytt slumpmÀssigt x-vÀrde Slumpa fram ett nytt matteproblem ur listan math_expressions } Ange att det nya fallande talet skall börja frÄn toppen av canvasen
Falling Math - utökningar ● Talen genereras slumpmĂ€ssigt ● Flera tal faller samtidigt ● Animationer i bakgrunden ● Ljud ● ...
Sammanfattning Japanese Memory Falling Math HTML-element (<img>, <div> mm.) data-attributet CSS-styling JavaScript (jQuery) click-event <canvas> JavaScript canvas-API game loop “hit detection”
Tips Sketcha och skriv pseudokod. AnvÀnd en bra texteditor och utnyttja JavaScripts-konsolen. Experimentera med exempel-spelen, stÀll frÄgor. Skicka in era förslag pÄ projekt i iLearn2, Presentera & diskutera projektidén. Deadline Àr 2013-10-04. Gör inte Chinese Memory eller Falling Grammer.
čó°ùĂ„Č”ŽÇ°ù?!
Game Based Learning - Att bygga spelprototyper i HTML5
Japanese Memory Fördelar Nackdelar “LĂ€ttare”. Som att bygga en vanlig hemsida, fĂ„r mycket gratis. Praktiskt att kunna styla elementen med CSS. Inte möjlighet att manipulera enskilda pixlar.
Falling Math Fördelar Nackdelar Har större frihet att placera och manipulera figurer. GĂ„r att skapa “hit detection” Är en mer invecklad process, tar lĂ€ngre tid.
<div> 
 </div> <div> 
 </div> <div> 
 </div> HTML var divs = $("div") JavaScript (jQuery) [ <div>, <div>, <div> ]
<audio>[ <audio> ] <audio> 
 </audio> HTML var sound = $("audio") JavaScript (jQuery) [0] .play()
Funktionsnamn Asvar player_update() Ritar ut spelaren Ändrar spelarens x-vĂ€rde problem_update() Ritar ut det fallande talet Ändrar talets y-vĂ€rde background_update() Ritar ut bakgrunden new_problem() Slumpar ett nytt fallande tal Flyttar talet till toppen av skĂ€rmen change_level() Höjer / sĂ€nker svĂ„righetsgraden collision_check() Kollar ev kollisioner (fallande talet, spelaren och botten) game_loop() Körs 60 ggr / sek Anropar alla update-funktioner samt collision_check. $(document).ready( 
 ) Skapar event-lyssnare för tangenter Startar spelet

More Related Content

Game Based Learning - Att bygga spelprototyper i HTML5

  • 1. Game Based Learning Att bygga spelprototyper i HTML5
  • 3. UpplĂ€gget för förelĂ€sningen Prototyping, Sketching, Pseudokod & Tips Tips: FĂ„ inte panik om ni inte förstĂ„r allt. Experimentera med exemplena (ligger uppe i iLearn). Japanese Memory - HTML, CSS, JavaScript (jQuery) Falling Math - <canvas>, JavaScript
  • 4. Prototyp? Testa sina idĂ©er för att sedan kunna förbĂ€ttra dem. En testversion som Ă€r skapad för att utvĂ€rdera en viss aspekt av den tĂ€nkta slutprodukten. Konkritisera och förmedla vad man har tĂ€nkt sig. Kan vara low-fi, high-fi och allt dĂ€r emellan. Testa pĂ„ nĂ„gon utomstĂ„ende, helst inom mĂ„lgruppen.
  • 6. I erat fall Inget krav att ni iterera över er prototyp Skall vara sĂ„ spelbar och komplett som möjligt Börja med det viktigaste, utöka om ni hinner
  • 7. Sketchning Bra för att förmedla sina idĂ©er Konkretiserar idĂ©er, blir tydligt om man tĂ€nker rĂ€tt Bra att ha fokus nĂ€r man vĂ€l börjar koda
  • 8. Pseudokod Bra för att bena ut exakt vad som behövs göras Bra om alla i teamet jobbar mot samma mĂ„l Skönt nĂ€r man fĂ„r blackout Exempel: Gissa talet
  • 9. var number_to_guess = slumpmĂ€ssigt tal mellan 0 - 100 function check_guess(){ if ( gissning Ă€r mer Ă€n number_to_guess ){ skriv ut “För högt. Gissa igen” if ( gissning Ă€r mindre Ă€n number_to_guess ){ skriv ut “För lĂ„gt. Gissa igen” else { skriv ut “Bra! RĂ€tt gissat” } } } } Kör funktionen check_guess nĂ€r anvĂ€ndaren gör en gissning
  • 10. Tips AnvĂ€nd en bra text editor: Sublime Text 2 AnvĂ€nd JavaScript-konsolen Googla, mycket!
  • 11. TvĂ„ olika sĂ€tt att bygga spel i HTML5 Om spelen vi skall bygga DOM-element (klassisk hemside-uppbyggnad) <canvas>-taggen HTML-element (<img>, <div> mm.) CSS-styling JavaScript (jQuery) JavaScript för att rita upp objekt, spela upp ljud mm. GĂ„r det att utföra med hjĂ€lp av DOM-element sĂ„ gör det, anvĂ€nd <canvas>-taggen i annat fall.
  • 12. Japanese Memory - uppbyggnad HTML <section>, <div>, <p> ... data-attribut CSS Styling Layout Animering JavaScript (jQuery) click-events Logik Spela upp ljud
  • 13. ● jQuery( 
 ) eller $( ... ) jQuery ● jQuery ÄR JavaScript ● LĂ€nkar in det i vĂ„rt dokument ● AnvĂ€nda CSS-selektorer $(“#myID”).hide() ● HjĂ€lpbibliotek ● Events: click, keydown ...
  • 14. Skapa variabler som hĂ„ller koll pĂ„ antalet spelade omgĂ„ngar samt vilka kort som har vĂ€nts Blanda korten och ange att funktionen card_clicked körs nĂ€r anvĂ€ndaren klickar pĂ„ ett kort function card_clicked(){ Ta bort möjligheten att klicka pĂ„ det vĂ€nda kortet Visa kortets framsida och spela upp kortets ljud if ( tvĂ„ kort har vĂ€nts ) { kör funktionen check_pair } }
  • 15. “this” VĂ€ldigt mycket upprepning. LĂ€tt att göra fel. Jobbigt att felhantera. $("#card-1").click( card_clicked1 ) $("#card-2").click( card_clicked2 ) $("#card-3").click( card_clicked3 )
  • 16. “this” Generell lösning Tydlig struktur $("div.card").click( card_clicked ) function card_clicked() { } $(this)...
  • 17. “this” I bollhavet finns det massor av bollar. Simon plockar upp en av bollarna. Den Ă€r röd. document <div>, <div> ... den klickade <div>:en this
  • 18. var fruits = [ "Apelsin", "Banan", "Mango" ] 0 1 2 var favorite = fruits[0] "Apelsin" var favorite = fruits[2] "Mango"
  • 19. fruits.push( "Kiwi" ) fruits[0] == fruits[3] false [ "Apelsin", "Banana", "Mango", "Kiwi" ] "Apelsin" == "Kiwi" fruits.length 4
  • 20. function check_pair(){ } Ta bort möjligheten att klicka pĂ„ nĂ„got kort if ( Testa om de bĂ„da vĂ€nda korten matchar varandra ) { Ta bort de vĂ€nda korten frĂ„n spelplanen Gör resterande kort klickbara igen else { Visa korten i tvĂ„ sekunder VĂ€nd tillbaka korten Gör samtliga kort klickbara igen Inkrementera antalet spelade omgĂ„ngar } }
  • 21. Japanese Memory - utökningar ● SVG ● Spelplanen utökas efter varje omgĂ„ng ● GĂ„r pĂ„ tid ● High score ● ...
  • 22. Falling Math - uppbyggnad HTML <canvas> CSS --- JavaScript Logik canvas-API game loop osv.
  • 23. Falling Math - uppbyggnad Flera smĂ„ och avgrĂ€nsade funktioner Ändra saker oberoende av vad anvĂ€ndaren gör Definera variabler överst i koden
  • 25. var math_problems = [ ] var math_problems = [ ["5-4=1", true], 
 ] math_problems[0] 0 1 2 [], [], [], 
 "5-4=1" math_problems[0][1] true 0 1 [0]
  • 26. function game_loop() { } 60 ggr / sek Rensa canvasen Uppdatera bakgrunden Uppdatera spelaren Uppdatera fallande talet Kolla efter krockar
  • 27. function background_update(){ Rita ut bakgrundbilden pĂ„ canvasen } Rita ut vilken level spelaren Ă€r pĂ„
  • 28. function falling_expression_update() { Uppdatera det fallande talets y-vĂ€rde Rita ut det fallande talet pĂ„ canvasen }
  • 29. function player_update() { Uppdatera spelarens x-vĂ€rde om en piltangent Ă€r nedtryckt Rita ut spelaren pĂ„ canvasen } HĂ„ll koll sĂ„ att x-vĂ€rdet inte hamnar utanför canvasen
  • 31. player_x player_x + player_width >= canvas.width player_width
  • 32. function collision_check() { if ( y-vĂ€rde för fallande tal < y-vĂ€rde för spelare){ } } avsluta funktionen if ( x-vĂ€rdet för fallande tal == x-vĂ€rde för spelare) { } Höj eller sĂ€nk nivĂ„n beroĂ€nde pĂ„ om talet var rĂ€tt eller fel else { Straffa spelaren om talet var rĂ€tt } Skapa ett nytt fallande tal
  • 33. player_x <= fall_x + fall_width && fall_x <= player_x + player_width 10 / 2 = 5 fall player
  • 34. 0 <= 20 + 80 && fall_x <= player_x + player_width 10 / 2 = 5 x = 0 x = 20 width = 80
  • 35. 0 <= 20 + 80 && 20 <= 0 + 50 10 / 2 = 5 x = 0 x = 20 width = 50
  • 36. function change_level( next_or_prev ) { if ( next_or_prev == “next” ){ } } Höja svĂ„righetsgraden else if ( next_or_prev == “prev” ){ } SĂ€nka svĂ„righetsgraden
  • 37. function new_falling_expression { Ge det nya fallande talet ett nytt slumpmĂ€ssigt x-vĂ€rde Slumpa fram ett nytt matteproblem ur listan math_expressions } Ange att det nya fallande talet skall börja frĂ„n toppen av canvasen
  • 38. Falling Math - utökningar ● Talen genereras slumpmĂ€ssigt ● Flera tal faller samtidigt ● Animationer i bakgrunden ● Ljud ● ...
  • 39. Sammanfattning Japanese Memory Falling Math HTML-element (<img>, <div> mm.) data-attributet CSS-styling JavaScript (jQuery) click-event <canvas> JavaScript canvas-API game loop “hit detection”
  • 40. Tips Sketcha och skriv pseudokod. AnvĂ€nd en bra texteditor och utnyttja JavaScripts-konsolen. Experimentera med exempel-spelen, stĂ€ll frĂ„gor. Skicka in era förslag pĂ„ projekt i iLearn2, Presentera & diskutera projektidĂ©n. Deadline Ă€r 2013-10-04. Gör inte Chinese Memory eller Falling Grammer.
  • 43. Japanese Memory Fördelar Nackdelar “LĂ€ttare”. Som att bygga en vanlig hemsida, fĂ„r mycket gratis. Praktiskt att kunna styla elementen med CSS. Inte möjlighet att manipulera enskilda pixlar.
  • 44. Falling Math Fördelar Nackdelar Har större frihet att placera och manipulera figurer. GĂ„r att skapa “hit detection” Är en mer invecklad process, tar lĂ€ngre tid.
  • 45. <div> 
 </div> <div> 
 </div> <div> 
 </div> HTML var divs = $("div") JavaScript (jQuery) [ <div>, <div>, <div> ]
  • 46. <audio>[ <audio> ] <audio> 
 </audio> HTML var sound = $("audio") JavaScript (jQuery) [0] .play()
  • 47. Funktionsnamn Asvar player_update() Ritar ut spelaren Ändrar spelarens x-vĂ€rde problem_update() Ritar ut det fallande talet Ändrar talets y-vĂ€rde background_update() Ritar ut bakgrunden new_problem() Slumpar ett nytt fallande tal Flyttar talet till toppen av skĂ€rmen change_level() Höjer / sĂ€nker svĂ„righetsgraden collision_check() Kollar ev kollisioner (fallande talet, spelaren och botten) game_loop() Körs 60 ggr / sek Anropar alla update-funktioner samt collision_check. $(document).ready( 
 ) Skapar event-lyssnare för tangenter Startar spelet