og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

Transkript

1 Keyboard og bevegelse Gløer Olav Langslet Sandvika VGS Informasjonsteknologi 2 funksjoner som blir aktivert av hendelser Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller andre kolleksjoner av variabler programmere med valg og gjentakelser lage egne og bruke egne og andres funksjoner eller metoder med parametere programmere funksjoner eller metoder som blir aktivisert av hendelser Hvis du skal utvikle et spill, eller du skal lage en liten animasjon med litt bevegelse, er det mange hensyn å ta. I dagens leksjon skal vi se litt på hvordan vi kan ta i mot input fra tastaturet, og også se litt på hvordan vi kan styre en enkel animasjon. Hele leksjonen bygger på et gjennomgående eksempel hvor vi lager et lite regnespill. Reglene er som følger: Et lite regnestykke kommer dalende Eleven må løse regnestykket før det treffer bakken Når eleven ikke klarer det, mister eleven et liv Spillet er over når alle livene er mistet

2 sdsd Keyboard og bevegelse Informasjonsteknologi 2 input fra tastaturet Hvordan fanger vi opp input fra tastaturet? Å fange opp input fra tastaturet er nyttig i mange sammenhenger. I dagens eksempel skal vi bruke det til å la brukere skrive inn svaret på et regnestykke. charcode Når vi trykker på en knapp på tastaturet, sier vi at det er en hendelse (event på engelsk). Vi kan fange opp at noen trykker på tastene, og også finne ut hvilken tast som ble trykket på. Et enkelt eksempel ser slik ut: html for eksempelet keycode og charcode Legg merke til at du får 0 hvis du taster for eksempel piltaster. charcode gjelder bare for de tastene som har en synlig representasjon. Vi fanger opp tasten og koden for det tegnet som hører til. Hvis vi taster 1, får vi 49. Koden for 1-tasten er altså 49. Bruk e.keycode hvis du skal kunne fange opp alt. 2

3 Keyboard og bevegelse Informasjonsteknologi 2 Hvordan finner vi ut hvilken tast det var på den tungvinte måten? Vi kan gjøre det tungvint, og bruke kunnskapen vår om hvilke taster som representerer hva: (Legg merke til at vi nå har byttet til keycode) For alle tastene får vi nå opp en kode som representerer tasten. Vi oversetter manuelt for de tilfellene vi har lagt inn. Altså 0, 1, 2 og 3. For alle andre taster får vi undefined. 3

4 sdsd Keyboard og bevegelse Informasjonsteknologi 2 String.fromCharcode finner tasten I vårt spill ønsker vi å få inn et tall. Nemlig det tallet som står på tasten. Vi kan gjøre det som på forrige side, men det blir litt tungvint. La oss i stedet se om vi kan finne ut hvilken tast det er på en enklere måte. Til det har vi String.fromCharcode, som oversetter koden til tasten til det den representerer. La oss se: Der fikk vi inn tallene våre som de skulle være. La oss bruke dette til å lage et svarfelt for regneoppgavene. Kanskje litt pussig å starte med det før vi har laget oppgaven, men det viser at rekkefølgen i programmering ikke alltid har så mye å si. Vi pakker kode i funksjoner, så vi kan bruke dem når vi trenger dem. La oss endre litt på htmlkoden. Vi skal ha et svarfelt som viser svaret, og vi skal ha en boks som detter ned med regnestykket vårt. Og JavaScript-koden blir: 4

5 Keyboard og bevegelse Informasjonsteknologi 2 Vi ser nå at selv om vi skriver bokstaver eller andre tegn, får vi det inn i svarfeltet vårt. Det er ikke meningen. La oss sørge for at vi kun legger inn tall. Sjekker keycode først Vi må sjekke hva vi får inn Vi må huske på at når vi gjør om keycode til tallene som står på tasten, gjør vi den også om til en String, med String.fromCharCode. Det går an å sjekke om en String ligger mellom 0 og 9, men det er bedre å gjøre det mens den ennå er et tall. Da må vi sjekke om den er mellom 48 og 57. Husk at 48 = 0, 49= 1, 50 = 2 osv. Nå ser vi at det kun er tallene som legger seg inn i svarfeltet. Men hva skal vi gjøre hvis noen skriver feil, og ønsker å rette på det? Enten kan vi viske vekk ett og ett tall, eller vi kan ta alle i en jafs. Vi velger det siste. Da må vi fiske ut koden for Backspace. Det viser seg at den er 8. 5

6 sdsd Keyboard og bevegelse Informasjonsteknologi 2 Sjekker om vi får inn Backspace. Da nuller vi ut svarfeltet så det blir mulig å skrive inn svaret på nytt. 6

7 Keyboard og bevegelse Informasjonsteknologi 2 Vi lager et regnestykke Eller bør vi lage mange? Det sier seg selv at spillet vårt blir veldig kjedelig hvis vi bruker det samme regnestykket gang på gang. Hva om vi lager en funksjon som kan lage et tilfeldig regnestykke? Først deklarerer vi en variabel som skal ta vare på riktig svar for regnestykket helt i toppen av koden vår under svarfelt. Så kommer funksjonen som returnerer et regnestykke som tekst. Funksjonen sender en verdi tilbake. Det er denne verdien vi skal legge inn på nettsiden vår i den diven som heter regnestykke_boks. Vi deklarerer den også: Men hva skal vi gjøre med regnestykket vårt? Vi må få det inn i boksen! 7

8 sdsd Keyboard og bevegelse Informasjonsteknologi 2 Vi lager en funksjon for å legge regnestykket inn i boksen Dette skal vi gjøre mange ganger, så vi trenger en funksjon. Bruk alltid en funksjon når dere skal gjøre noe mange ganger. Det gikk jo fint. Legg merke til at vi sier at diven skal få returverdien fra funksjonen som heter lagregnestykke. Hvis vi ser på den funksjonen en gang til, vil vi oppdage at den hadde en returverdi helt på slutten: return r r2. Den sender oss altså en tekst som består av først ett tilfeldig tall, så et plusstegn, og til slutt det andre tilfeldige tallet. Da er alt duket for å sjekke om eleven skriver inn riktig svar. Men når skal vi sjekke svaret? Det sikreste er vel å gjøre det rett etter at eleven har tastet inn et tall. Hvis innholdet i svarfeltet da er likt innholdet i fasiten er det riktig. Så nederst i funksjonen skrivsvar (etter at en tast er trykket inn), starter vi en funksjon som heter sjekksvar. 8

9 Keyboard og bevegelse Informasjonsteknologi 2 Funksjonen sjekksvar Vi har lagret riktig svar i en variable som vi kalte fasit, så da er det rett frem å sjekke om svaret er likt fasiten: Legg merke til at vi starter sjekksvar nederst i skrivsvar: Ok. Vi har fått det til å virke på et vis, men det er jo dørgende kjedelig. La oss få litt bevegelse og litt css inn i spillet vårt, så blir det litt morsommere. 9

10 sdsd Keyboard og bevegelse Informasjonsteknologi 2 Vi pynter opp med css Dette er ikke et kurs i css, men allikevel skal vi bruke litt tid på å få dette til å se ok ut. Vi skal ha en fallende boks, og den bør jo ha et slags gulv å dette ned på. Dette er et eksempel på hvordan dere kan sette det opp: 10

11 Keyboard og bevegelse Informasjonsteknologi 2 css som tekst Bruk gjerne denne css-stilen. Lim den inn i head-taggen på siden <style> html { background:#ccc; } body { width:350px; height:500px; margin:50px auto; background:#000099; border:4px solid #FFF; position:relative; border-radius:5px; font-family:'trebuchet MS', Arial; } #regnestykke_boks { position:absolute; width:100px; left:120px; height:50px; background:#666666; color:#ffffff; font-size:22px; line-height:50px; text-align:center; border-radius:5px; border:3px solid #CCC; } #svarfelt { text-align:center; font-size:36px; color:#999; margin-top:5px; } </style> 11

12 sdsd Keyboard og bevegelse Informasjonsteknologi 2 Let the motion begin Ok. Vi har en boks med et regnestykke. Planen er å la den falle nedover, og håpe at noen løser regnestykket før den når bakken. Vi skal bruke noe som heter setinterval for å få til dette. La oss definere en t helt i toppen av koden. Det lille t-en står for timer. Vi må også legge inn noen flere variabler. En for avstand fra toppen av boksen (ypos), og en for gjennomsiktighet, siden vi skal få boksen til å fade ut litt senere i eksempelet. Da blir det sånn: Vi kan nå lage boksen vår og sette i gang en funksjon som skal få den til å falle: Men hvordan skal vi flytte den? Når vi skriver t = setinterval (move, 20) betyr det at vi setter i gang en funksjon som heter move hvert 20 ms. Denne funksjonen må da sørge for å flytte på regnestykket. 12

13 Keyboard og bevegelse Informasjonsteknologi 2 I like to move it En av de tingene som er virkelig morsomt med JavaScript, HTML og CSS, er at vi kan flytte rundt på ting ganske enkelt. Og det kan som vi skal se også være elementer med tekst eller annet innhold. Legg merke til at vi i cssen sa at body skulle ha position relative. Dette gjør at elementer inne i body som har position absolute forholder seg til body og ikke hele nettsiden. Da kan vi endre den absolutte posisjonen i move-funkjsonen så den flytter seg litt etter litt: Det gikk jo fint. Eneste problemet er at den ikke stopper og starter på nytt når vi skriver riktig svar eller treffer bakken. La oss se på det. Først stopper vi den når den treffer bakken. Høyden på den blå boksen minus høyden på regnestykket er 446. clearinterval stanser timeren vår. Da slutter den å sette i gang move-funksjonen. Så i det boksen er 446 piksler fra toppen, stopper den opp. Det er fint. 13

14 sdsd Keyboard og bevegelse Informasjonsteknologi 2 fade ut regnestykket Jeg har lovet dere at vi skal fade ut regnestykket når vi svarer riktig eller når regnestykket treffer bakken. La oss forsøke det. Vi har stanset timeren, men vi kan gi den en ny oppgave, nemlig å starte en fade-funksjon: t = setinterval (fade, 10) setter i gang fade funksjonen en gang per 10ms. Opacity går fra 0 til 1, så vi må minske den ganske lite om gangen. Det eneste som gjenstår nå, er å lage et nytt regnestykke når boksen er fadet helt ut: Når den har blitt usynlig, sørger vi for å stoppe fadingen, og samtidig starte funksjonen lagboks igjen, I tillegg nuller vi ut svarfeltet, så det er klart til å ta imot et nytt svar. 14

15 Keyboard og bevegelse Informasjonsteknologi 2 Håndtere svarene Til nå har vi lagt på en kjedelig alert-boks hvis svaret er riktig. La oss endre på dette. For å gi eleven litt tid, prøver vi også nå å fade ut boksen og lage en ny oppgave. Eleven bør vel også få noen poeng for riktig svar, men det tar vi senere. Vi endrer funksjonen sjekksvar. Men først deklarerer vi en variabel for poeng, og setter den til null i det spillet starter: Trikset er at vi øker poeng med 1 eller hva vi måtte ønske hver gang det blir riktig svar: Da mangler vi bare et sted å plassere poeng. Dette gjør vi i html-koden rett før </body> 15

16 sdsd Keyboard og bevegelse Informasjonsteknologi 2 Setter inn poengene Funksjonen vismodeller Nå ønsker vi å legge poengene inn i diven som vi kalte poengfelt. Vi deklarerer den på vanlig måte i koden: Og da er alt klart for å legge inn poengene. Dette gjør vi også i funksjonen sjekksvar: Antall liv Vi kan ikke holde på i all evighet. La oss si at vi har 3 liv i spillet vårt. Hver gang regnestykket treffer bakken, tar vi bort et liv. Vi deklarer antall_liv som vanlig: 16

17 Keyboard og bevegelse Informasjonsteknologi 2 fjerne liv Fjerne liv Hvordan fjerner vi liv? Jo, det vil foregå inne i funksjonen move(). Her har vi allerede en test på om regnestykket treffer bakken, og det er nettopp da vi skal fjerne et liv: La oss legge til 3 hjerter som skal vise hvor mange liv vi har igjen: Dette tegner opp 3 hjerter. Vi legger dem øverst i venstre hjørne med css: 17

18 sdsd Keyboard og bevegelse Informasjonsteknologi 2 fjerne liv Hvordan fjerner vi 1 og 1 hjerte? Hmmmm. Her er det mange mulig løsninger. Vi forsøker oss på en med noe som kalles queryselector. Vi kan finne frem til det første elementet på nettsiden vår som er av en bestemt klasse eller har en bestemt id. Dette har en css-aktig syntaks. For å finne den første span-taggen inne i diven med id= liv, kan vi gjøre følgende: Da har vi fjernet hjertene. Til slutt må vi da bare gi en melding når spillet er over. Det skjer i det øyeblikket det er 0 liv igjen. Og funksjonen avslutt: Her er det selvsagt rom for å lage en litt mer fancy løsning. 18

19 Keyboard og bevegelse Informasjonsteknologi 2 oppgaver Oppgaver til denne leksjonen 1. Bruk setinterval til å lage litt bevegelse i for eksempel et div-element. Det kan være lurt å bruke position absolute på elementet som skal bevege seg. 2. Lag et lite system som regner om fra kroner til Euro. Utvid gjerne med flere valutatyper og mulighet til å velge fra hvilken valuta det skal omregnes, og til hvilken valuta det skal bli. 3. Lag en digital klokke som viser tiden. Bruk gjerne Date.toLocaleTimeString() 4. Klarer du å lage en analog klokke med visere? 5. Klarer du å lage en liten quiz som sjekker om du svarer riktig på noen spørsmål? 6. Se om du klarer å gjøre ferdig spillet og endre det slik at det er mulig å velge for eksempel regneart. 7. Klarer du å lage et annet spill med noen av de teknikkene vi har sett på i denne leksjonen. 19