Game Based LearningAtt bygga spelprototyper i HTML5

Simon Johanssonmail@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-stylingJavaScript (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 StylingLayoutAnimering

JavaScript (jQuery) click-eventsLogikSpela 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 spelplanenGör resterande kort klickbara igen

else {Visa korten i två sekunderVänd tillbaka kortenGö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 Logikcanvas-APIgame looposv.

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 bakgrundenUppdatera spelarenUppdatera fallande taletKolla 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 = 5fall

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-attributetCSS-stylingJavaScript (jQuery)click-event

<canvas>JavaScriptcanvas-APIgame 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.

Frågor?!

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 talFlyttar 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 / sekAnropar alla update-funktioner samt collision_check.

$(document).ready( … ) Skapar event-lyssnare för tangenterStartar spelet