App Lab 2: Programmer et klikspil

Eleverne laver en app med et klikspil og lærer om programmering, trinvis forbedring, interaktionsdesign af spil og innovation med throwaway prototyping.
App Lab  - Worked Example på clickspil
© EMU, JSB

Omfang: 10-14 timer

Formål

Introduktion til:

  • programmering: trinvis forbedring, god navngivning, funktioner, parametre, variable, betingelse og forgreninger
  • spildesign: gameplay, spilmekanik, flow  
  • innovation: throwaway prototyping

Introduktion og baggrund

Forløbet er baseret på videoer og opgaver fra første del af Computer Science, Unit 5 - Building Apps (CSP 5) på code.org. Det kan køres uden forkendskab til App Lab/programmering eller i forlængelse af forløbet App Lab 1: Tegn og lær basal programmering.

Det er bygget op, så eleverne trinvist introduceres til elementer de skal bruge senere. Der er taget en række avancerede opgaver ud, som kun de hurtigste går videre med indtil alle har været gennem det basale. 

Materialer:

Gennemførelse - Forløbsbeskrivelse

Inden forløbet oprettes et hold med klassekode på code.org (gratis), så eleverne kan finde forløbet, og der er mulighed for at følge med i deres progression.

Simpelt klikspil (90-120 min)

CSP 5: Lektion 1 - Buttons & Events

  • Slide 1: introducer forløb og få elever koblet på hold på code.org
  • Slide 2: vis videoen Intro to design mode i fællesskab
  • Slide 3 og 4: introducer Design View og gennemgå, hvordan opgave 4 løses, så alle er med på opgavestruktur og fremgangsmåde på code.org.
  • Lektion 1 del 4-11 løse individuelt af eleverne. Hurtige kan fortsætte med del 12-17, der primært er debuggingopgaver, som øvrige kan springe over. 
  • Opsamling: vis løsning af opgave i del 7 og:
    • pointér at kode skal ind i de gule klammer, for (kun) at afvikles ved den valgte hændelse.
    • vis skift fra hex-notation af farver i design mode til decimalnotation med rgb(a) eller hsl.
    • bed elever byder ind med forskellige hændelsestyper (fra del 11). 
    • kom kort ind på debugging: store/små bogstaver samt gule/røde fejlfelter i kode!
  • Introducer kort setPosition(x, y, width, height) i lektion 1 del 17: "Goodbye Turtle".
  • Lektion 1 del 18-22 løses individuelt - hurtige fortsætter til lektion 2.
  • Opsamling: løs del 22 Chaser Game i fællesskab (bed elever byde ind) og:
    • tilpas randomnumber() i både x & y og tilpasning til skærms bredde/højde.
    • vis indsætning af ikon som billede og baggrundsbillede
    • udfordrer til eleverne: indsæt label med tekst øverst så spil ødelægges og bed elever forklare problem og komme med løsning.
  • Slide 5: opsamling af funktioner, hændelser og brug af setPosition, randomNumber og onEvent.

Multiscreen klikspil (60 minutter)

CSP 5: Lektion 2 - Multi-screen Apps 

  • Slide 6: introducer trinvis forbedring og måder at debugge på i App Lab.
  • Lav hurtig, fælles gennemgang af pointer i lektion 2 del 4-7  med debuggingsopgaver.
  • Introcer lag via lektion 2 del 8: hvad tror elevern reagerer hvornår?! Brug konsol og gæt og tjek i fællesskab.
  • Slide 7: Opsamling på lag i App Lab.
  • Introducer til oprettelse af flere skærme og fælles start på lektion del 10.
  • Lektion 2 del 10-15 løses individuelt.
  • Slide 8: opsamling på setScreen, default skærm og navngivning af elementer, så de starter med skærmnavn.
  • Opsamling: fælles udvikling af simpelt klickspil: tre skærme, et klik element og gode id'er (startscreen, gameScreen, gameBtn og endScreen ).  

Variable del 1 (30 minutter)

CSP 5: Lektion 4 - Controlling memory with variables 

  • Slide 9: introducer behov for variable til pointsystem og vis video Intro to Variables Part 1
  • Lektion 4 del 4-8 løses individuelt og hurtige fortsætter videre. - Det er ikke afgørende at alle har løst/læst  9-14.
  • Vis løsning af del 6 og 7 i fællesskab...
  • Slide 10: introducer typer og fejl pga af "sammelægning" af tekst eller brug af gåseøjne ved variabelnavn.

Del 18-26 springes over, da det er rene logik-øvelser. 

Variable del 2 (30 min)

CSP 5: Lektion 5 - Using Variables in Apps 1-15

  • Slide 11: fællesvisning af videoen Intro to Variables Part 2
  • Lektion 5 del 3-6 løses individuelt - hurtige fortsætte debuggingopgaver i 7-11.
  • Slide 12: opsamling af op- og nedtælling af variabel samt introduktion til kort notation 
  • Fælles introducer til scope/rækkevidde via lektion 5 del 12. .
  • Lektion 5 del 13-14 løses individuelt og hurtige forsætter videre. 
  • Løs del 14 i fællesskab med fokus på indhold i variabel og visning i label.
  • Slide 13: opsamling på rækkevidde - råd elever til at oprette variable i starten af koden!

Betingelser (30 min)

CSP 5: Lektion 5 - Using Variables in Apps 16-20

  • Slide 14: introducer behov for betingelser til at tjekke værdi i variable - fællesvisning af Video - Conditionals Part 1
  • Introducer simpel betingelse via fælles gennemgang af lektion 5 del 15. 
  • Lektion 5 del 16-21 løses individuelt og hurtige fortsætter med debuggingopgaver del 18-20.
  • Fælles løsning af del 17. 
  • Slide 15: Opsamling  - betingelse og sammenligningsoperatorer.

Dit klikspil (60 min)

  • Slide 16: Introduktion til trinvis forbedring via eksempek fra det æble-klikspil eleverne har lavet.
  • Slide 17: Elever introduceres til udvikling af eget lille klikspil ud fra skabelon. - Mål at træne programmerings- og udviklingskompetencer. 
  • Individuel tilpasning af layout i eksempel og tilretning af point ud fra det lærte i lektioner om variable. 
  • Slide 18: Vis og forklar brug af funktion - introduktion eller repetition, hvis de har været igennem forløbet App Lab 1.
  • Slide 19: Introducer den indbyggede funktion timedLoop() og bed eleverne få variable tid til at tælle ned i stedet for op.

Forgreninger (30 min)

  • Slide 20 og 21: Fællesvisning af videoerne Conditionals Part 2B og Conditionals Part 2C.
  • Slide 22: Introducer til forgrening og udvidet forgrening i forhold til et pointsystem og tid.
  • Slide 23: Videreudvikling af spilskabelon med pointsystem og tid.

Gamedesign (30 min)

  • Slide 24: Introducer til spildesign via boldspil: en bold forskellig setup og spilmekanik. - Elever på stx kender til det fra boldbasis i idræt. 
  • Slide 25: Introducer til spildesign og skelnen mellem konstitutionelle regler (setupt) og operationelle regler (spilmekanik).
  • Slide 26: Visning af Angry Birds med fokus på spilmekanikker.
  • Slide 27: Introduktion til basale spilmekanikker.
  • Slide 28: Forskellig kendte klikspil med forskellig setup. - Snak om brug af spilmekanikker i de forskellig spil. 

Gamification (10 min)

  • Slide 29: Visning af video med kort introduktion til gamification.
  • Slide 30: Introducer gamification i forskellig applikationer eleverne kender - særligt fokus på, at de ikke er spil, men indholder motifikationsfaktorer hentet fra spilverdenen.

Projekt (180-420 afhængigt af grad af elevtid og færdiggørelse)

  • Slide 31: Introducer projekt om udvikling af læringsspil til gymnasiet samt til krav og bedømmelse. - Særligt fokus på sekundære målgrupper: ledelse og lærere.
  • Introducer til idéudvikling med Throwaway Prototyping. Tag opgaverne på slide 32 (uden at vise den) og giv den mundtlig for til eleverne én efter én (2-7 minutter til hver opgave alt efter opgavetypen). De starter individuelt og ender i gruppe med fælles idé. 
  • Slide 32: Opsmaling på idéudviklingsproces og præsentation af gruppers idéer.
  • Slide 33: Introduktion til flow i spil. - Videreudvikling af idé med throwawa prototyping i matrixgrupper. Opgaverne på slide 34 stiller én for én uden at vise den.
  • Slide 34: Opsamling på proces - fokus på at ved at have flere idéer og skærmudkast kommer man til  bedre resultat. 
  • Slide 35: Repetition af trinvis forbedring og elever laver skema med delmål oig udvidelser til egen idé.
  • Udvikling af prototype på idé. - Hold eleverne fast på, at de skal gå frem trin for trin.

Opfølgning

Spillet afleveres og evalueres ud fra projektbeskrivelse i slide 31 - særligt fokus på den dobbelte målgruppe.

Kreditering

Udviklet af Jacob Stenløkke Bendtsen, Redaktør for EMU

Produceret i samarbejde med

Centre for Undervisningsmidler

Centre for Undervisningsmidler har ansat 30 fagredaktører med solidt kendskab til pædagogik og undervisning til at udvikle fagsiderne til de gymnasiale uddannelser på EMU (STX/HF). Fagsiderne udvikles og vedligeholdes i samarbejde med de faglige foreninger og Undervisningsministeriet.

Se mere om samarbejdet her.

CFU findes også på EMUen. Siderne vedligeholdes af CFU selv - se her. Her kan skolerne søge information om landsdækkende aktiviteter, ligesom man kan finde CFU-centrenes lokale websites.

cfu-v1.png

Relaterede links

Online præsentation til forløbet med videoer og opsamling på dansk.
Link til forløb i Computer Science på code.org. - Opret gratis bruger for at se og afprøve indhold i del 5: Building Apps
Worked Example på klikspil i App Lab - klik på "View Code" for at se og arbejde videre på koden.