Game Based Learning - Att bygga spelprototyper i HTML5

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.

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 )

“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 + 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.

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

Game Based Learning - Att bygga spelprototyper i HTML5

Recommended

Recommended

More Related Content

Featured

Featured (20)

Game Based Learning - Att bygga spelprototyper i HTML5