Lær av et annet spill!

Skrevet av: Teodor Heggelund

Kurs: Elm
Tema: Tekstbasert, Nettside, Spill
Fag: Programmering, Teknologi
Klassetrinn: 8.-10. klasse, Videregående skole
Til lærerveiledningLast ned PDF

Introduksjon

Så langt har dere lært å skrive egen kode. Å lære å skrive kode krever mye trening for å bli god.

Det er også viktig å kunne lese kode. Da lurer vi på ting som

  • Hvor finner jeg andres kode?

  • Hvordan kjører jeg andres kode?

  • Hvor begynner jeg når jeg skal finne ut hvordan ting henger sammen?

  • Hva skjer om jeg endrer på dette?

Til dette bruker vi spillet Elm Joust, skrevet av Stefan Kreitmayer fra Tyskland.

Steg 1: Hvordan fungerer spillet?

Før vi reprogrammerer spillet, skal vi ha det litt gøy, og finne ut hvordan det henger sammen.

checkSpill!

Har du spilt litt? Ti minutter er passe tid.

checkHvordan tegnes ballen?

Nå skal vi se på hvordan spillet er bygget opp.

Hvordan inspisere?

Oppgaven "Hvor er HTML? Jeg ser den ikke!" under Web-kategorien går gjennom hvordan vi kan inspisere elementer på en nettside. Ta en titt her hvis du trenger!

checkHvordan tegnes det andre?

Først skal vi se på selve spillet.

Finn svg-taggen.

Gjør vinduet ditt større eller mindre.

Svg i Elm og i nettleseren

Som i Html ser Svg forskjellig ut i Elm og i Nettleseren.

Slik ser det ut i Elm:

circle
  [ cx "240"
  , cy "361.6"
  , r "28.799999999999997"
  , fill "rgba(255,255,255,.5)"
  ]
  - [ ]

Slik ser det ut i Nettleseren:

<circle
  cx="240"
  cy="361.6"
  r="28.799999999999997"
  fill="rgba(255,255,255,.5)">
</circle>

Steg 2: Last ned og kjør spillet lokalt

Elm Joust er et større Elm-program enn programmene vi har skrevet til nå. Når vi skriver store programmer, deler vi dem ofte i flere filer for å holde orden. Til programmer skrevet i flere filer, holder ikke Try Elm, og vi må kjøre programmet på egen PC.

checkLast ned kildekoden

Du kan bruke git i stedet hvis du vil.

checkPakk ut kildekoden

checkÅpne kommandovindu i mappen der kildekoden ligger

  • Windows kan du holde inne Shift (pil opp for å lage store bokstaver), høyreklikke og velge Åpne kommandovindu her eller tilsvarende.

    Linux kan ofte du høyreklikke og velge Open in Terminal.

checkBygg programmet

For små Elm-programmer bruker vi Elm Reactor for å bygge programmet mens vi utvikler. Elm Joust er et større program, og vi må bruke et byggscript. Vi bruker et byggscript til å ta Elm-kode og lage en nettside av den.

  • Windows heter byggscriptet build.bat.

    Mac og Linux heter byggscriptet build.sh.

checkÅpne spillet i nettleseren

Nå kan vi kjøre spillet.

Prøv spillet igjen!

Om å bygge programmer fra kildekode

Når vi utvikler programmer lager vi først kildekoden. Med kildekoden kan vi bygge og teste programmet.

Vi tester programmet vårt for å se at det fungerer før vi sender det til andre. Når vi bygger Elm Joust direkte fra kildekoden, får vi den aller siste versjonen av programmet, som ikke alltid er grundig testet.

Å bygge programmer vi skal bruke fra kildekode er lærerikt, men kan være vanskelig.

Steg 3: Endre reglene

Bilde av Neo fra The Matrix

Neo liker også å endre reglene

checkKontroller tyngdekraften

Et søk i kildekoden viser at funksjonen gravity er definert i src/Update.elm på linje 202.

Fysikk

Reglene for hvordan objekter beveger seg heter Fysikk. Når du justerer tyngdekraften i spillet, endrer du på fysikken i spillet.

Andre fysikkregler:

  • Når ballene treffer hverandre, spretter de tilbake i hver sin retning

  • Du faller nedover

  • Du kan kun hoppe når du står på bakken

Noen ting blir mer morsomme når vi ikke følger fysikken! I dette spillet kan vi styre ballen når den er i lufta. Dette er svært vanskelig å få til, og fjerner vi luften ("om vi er i vakum"), er det helt umulig!

checkEndre fargene

Spillet slik det er nå er meget ... grått.

Funksjonen renderPlayer er definert i src/View.elm, på linje 137. Ser du kallet til Svg.circle?

  • "#FF69B4" gir en skarp rosa. Du vil kanskje ha noe annet?

Men! Nå blir begge spillerene våre like rosa (eller en annen farge?). Dette fikser vi ved å legge til en ny parameter på funksjonen vår.

Farger representeres som Tekst i Elm, på engelsk String.

  • renderPlayer : (Int,Int) -> Player -> String -> Svg Msg
    renderPlayer (w,h) {position} color =
    
  • Hvor brukes funksjonen renderPlayer? Må vi fikse noe her?

    Når jeg søker etter renderPlayer, får jeg flere match: linje 79, linje 80, linje 99, linje 136 og linje 137.

checkJuster tiden

Et søk etter "time" finner funksjonen steerAndGravity i src/Update.elm. Dette er signaturen til steerAndGravity:

steerAndGravity : Time -> Ui -> Player -> Player
steerAndGravity delta {pressedKeys} ({velocity} as player) =

Ah! delta, av type Time! Jeg gjetter at denne er tiden mellom hver gang spillet oppdateres.

Hvor kaller vi steerAndGravity? Jeg fant disse to linjene:

          player1 = scene.player1 |> steerAndGravity delta ui
          player2 = scene.player2 |> steerAndGravity delta ui
  • Hint: juster delta.

Søke i kildekode

Trykk Control + F i editoren din. Kommer det opp et søkefelt? Prøv å skriv i det. Matcher det ordet du skriver i kildekoden?

Søk er veldig nyttig for å navigere rundt i kode som andre har skrevet. I din egen kode kan du ofte huske litt av hvordan du har gjort ting. I andres kode er det vanskelig å vite hvor ting ligger!

checkSprettball!

Når ballene treffer hverandre, må vi regne ut ny fart for begge ballene. Et søk etter "collision" finner handleCollisions i Update.elm.

Hmm, spillet ville vært litt urettferdig om en ball var tung som en elefant, og den andre kun var en liten tennisball.

Steg 4: gjett hvilken regel!

Nå har du laget din helt egne versjon av Elm Joust.

Lisens: CC BY-SA 4.0

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?

Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!