Vi skal bruge følgende API til at lave et spil - https://restcountries.com/!
Det første spil vi laver er et “gæt flaget” spil. Her skal brugeren blive vist et flag som de så skal gætte! Der er en demo af det her, som er lavet med C# og Blazor, https://blazor.magsapi.com/Opgaver/flag!
Vi skal bruge Visual Studie Code til programmere i, i dag! Vi tager en kort introduktion på klassen, men man kan med fordel hente det inden. https://code.visualstudio.com/download
Bagefter tager vi et kig på jeres starter kode som er her - https://github.com/Mercantec-GHC/RESTCountries/tree/StarterKode. Den er delt op i 3 dele, nemlig HTML, CSS og JavaScript, vi har taget os af det meste af HTML og CSS koden, så fokus er i dag på JS. Vi ser lige på de tre dele som I starter med.
Når vi har følgende filstruktur (husk navnene er vigtige!) har vi de 3 komponenter (HTML, JS og CSS), som giver os følgende at starte på:
En brugerflade med et billede og en boks man kan bruge til at skrive ens gæt!
Alle 250 lande i databasen, med billede til deres flag og masser af data!
I kan åbne hjemmesiden enten ved at åbne HTML filen i en browser, ellers anbefaler vi at I henter “Live Server” i VSCode. https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Er det første gang man henter en extension i VSCode kan man følge den her - https://code.visualstudio.com/docs/configure/extensions/extension-marketplace
Bagefter kan man bruge højreklik på index.html filen og se følgende
Vi gennemgår hvad koden I har gør, så vi er klar til at udvikle på det!
Vi bruger det som hedder en API - Application Programming Interface, hvilket bare er et pænt ord for at vi snakker med en anden server. Den indeholder en stor database med 250 lande, deres navn, billede af deres flag, forkortelse og meget mere!
Til den første opgave i dag, bruger vi feltet flags.png og name.common - det er flaget som skal vises på hjemmesiden og det land som det hører med til! Udover det har vi cca3 med, da det kan være nemmere at finde landene ud fra deres “lande kode”, her er Danmarks “DNK”.
For mere dokumentation kan man se deres hjemmeside her - https://restcountries.com/
For at spillet ikke bliver forudsigeligt og altid starter med Danmark, skal vi have udvalgt en af de 250 forskellige lande som spilleren skal gætte.
Det store spørgsmål er, hvordan vælger vi noget tilfældigt? Undersøg i jeres gruppe hvordan man kan gøre det og vi kommer med en løsning om 30 minutter!
Finder man hurtigt en løsning, kan man gå til næste punkt!
Nu har vi valgt et land og dens flag ud - nu kan vi begynde lave logikken til spillet.
Man kan lave en funktion som kan bruges igen og igen med følgende syntax
function GuessAContry(guessFromUser)
{
console.log(guessFromUser)
//Gør noget mere!
}
GuessAContry("Denmark")
Koden definere en funktion med function kodeordet, vi kalder den GuessAContry som er vores navn. Her bruger vi for resten det som hedder CamelCase som er for funktioner. Vi giver vores funktion et parametre som er guessFromUser, det kan være det gæt vi for fra brugeren. Her bruger vi også camelCase, hvor vi starter med småt ved variabler og parametre.
Mellem vores tuborgklammer {} kan vi lave vores kode og funktionalitet. Til sidst kalder vi metoden, hvor vi gætter på “Denmark” - GuessAContry("Denmark")
I har 30 minutter til finde en måde at implementere funktionen og til sidst viser vi en vejledende løsning!
Finder man hurtigt en løsning, kan man gå til næste punkt!
Vi skal have vist vores resultater på hjemmesiden, det vil sige at vi skal have vist billedet ude forsiden og gjort så man kan gætte gennem boksen
Vi skal starte med at få vores billede ud på forsiden, eller kan vi ikke se så meget og har derfor ingen hints. Her begynder vi at skulle bruge vores ‘DOM’. Her ser vi et billede af vores DOM.
Den minder rigtig meget om vores HTML fil, men der er lidt forskellige. HTML filen er statisk, så den ændre sig ikke jo mindre vi skriver manuelt i den. DOM’en kan vi ændre i så meget som vi vil.
Vi ser at der står en smule om det her flag, src bestemmer hvilket billede der skal være der. alt er en forklaring hvis billedet ikke loader, derudover har vi en klasse og et id. Det bruger vi til at kunne finde vores ting i DOM’en. Så vi skal have fat i img med id’et “flag-image”
Hvis vores billede skulle ske ikke at have en klasse eller et id kan vi tilføje det.
Vi har billedet til at virke nu, så brugeren for det hint de skal have. Nu skal vi have lavet sådan at de ikke skal åbne konsollen og skrive en kommando for at gætte, men de bare kan trykke på knappen! Der er 2 dele i den her - læse værdien fra inputfeltet og eksekvere en funktion i JS med en HTML knap
Del 1 - Læse værdien fra inputfeltet
Del 2 - Indsætte værdien i vores JavaScript funktion
Det sidste logik vi fik lavet i konsollen, var at udskrive noget feedback til brugeren, rigtig eller forkert. Det skal selvfølgelig også stå på skærmen!
Spillet stopper ret hurtigt, hvis man kun skal gætte et flag. Derfor kan vi lave logik til at genstarte spillet, det har hver gruppe 30 minutter til at finde ud af. Hvis I finder det hurtigt, så gå til næste trin!
At huske alle lande og kunne skrive dem rigtigt, kan være rigtig svært for brugeren. Derfor kan vi lave vores spil lidt mere bruger venligt ved at give dem 4 valgmuligheder, 3 forkerte og det rigtige valg.
Til sidst lader vi jer selv beslutte, hvilken feature I vil implementere. Vi har samlet nogle til inspiration, men I må hellere end gerne være kreative og designe jeres egen.
Vi kan ændre sværhedsgraden på flere måder, den nemmeste er at justere antal svarmuligheder. Man kan lave det i 4 sektioner
Nem - 2 valgmuligheder
Normal - 4 valgmuligheder
Svær - 6 valgmuligheder
Ond - 250 valgmuligheder
Har man mod på det, kan man sætte yderligere sværhedsgrad på.
Lege med billedet (sort/hvid er sværere at gætte) Del et flag op i seks-dele, og kun afslør en del ad gangen som hjælp.
Man må også gerne lege med det visuelle udtryk med CSS eller JavaScript. Man kunne fx bruge CSS til at rotere elementer, JavaScript til animation, så flaget eller svar-mulighed glider ind fra siden mv.
Har vi gjort vores spil lidt for svært kan det være at brugeren skal have lidt hjælp med hints.
Udeluk svarmuligheder - Vi kan have et hint som kun kan bruges en gang, hvor man udelukker svarmuligheder
Mere data fra APIen - APIen med flag og landenavne har meget mere data, de kan man bruge til flere hints, det kan fx være Nabolande, Region, Kortudsnit, Indbyggertal eller sprog!
For at tilføje ekstra spænding og udfordring til spillet, kan vi indføre et system med liv og/eller en tidsbegrænsning. Det vil gøre spillet mere dynamisk og intens.
Liv:
Tidsbegrænsning: