Et repo hvor børn selv skal implementere koden til at bevæge et 'spaceship' og dets 'bullets' i jagten på at nedskyde nogle "Alien 'Beanies'" i et "Space Battle" spil lavet med KAPLAY, hvor al anden kode er implementeret.
For selv at kunne implementere koden til dette spil, er det nødvendigt at man har Node.js installeret.
Node.js er dog heldigvis ret simpelt at installere, hvorfor man blot skal følge dette link for at installere det:
For selv at komme i gang, skal du først hente denne kode, hvilket kan gøres på 2 måder via:
- git
- zip download
Hvis du ved, hvad 'git' er, så kan du hente dette repos kode ved køre følgende kommando fra din terminal/kommandolinje:
git clone https://github.com/coding-pirates-hillerod/kaplay-space-battle-implement-movements.gitNår du har kørt denne kommando, så skal du for nu blot gå ned i den hentede kode via følgende kommando, evt. åbn det IDE du bruger, og så gå til næste afsnit for at læse mere om, hvad du skal:
cd kaplay-space-battle-implement-movementsHar du ikke har 'git' installeret, så kan du hente dette repos kode ved at downloade det som en zip fil. Det gør ved først at trykke på grønne knap med teksten Code, og så efter trykke på Download ZIP fra drop down menuen
Pak derefter den downloade zip fil ud, og åbn repoet i den IDE du bruger.
I dette repo vil du kunne finde følgende 2 mapper:
- finished-code
- starter-code
Mappen kaldet 'finished-code' indeholder den komplet færdige kode, hvor koden til bevægelse af spillets 'spaceship' og dets 'bullets' er lavet.
MEN hvis du vitterligt gerne vil lære at kode, så brug kun denne mappe som en hjælp, hvis nu du går i stå e.lign. For du lærer nemlig ikke noget af bare at kopiere koden fra denne mappe, vel!?
Mappen kaldet 'starter-code' er den mappe, hvor du selv skal implementere koden til at bevæge spillets 'spaceship' og 'bullets', således at du herefter har dit eget komplet fungerende spil(!).
Inden du går i gang med denne opgave, så skal du først lige have installeret de pakker, som spillet afhænger af.
Gå derfor først ned i starter-code mappen vhja. denne kommando fra din terminal/kommandolinje:
cd starter-codeNår det er gjort, så skal man dernæst installere de pakker, som spillets kode afhænger af. Kør derfor denne kommando fra terminalen/kommandolinjen for at installere dem:
npm iSå snart pakkerne er installeret kan man så bare køre denne sidste kommando, hvorefter ens spil vil kunne ses i ens browser, når man følger det link som vises i terminalen (linket plejer at være http://localhost:3001/):
npm run devFølger man således linket, så åbnes ens browser, og man skulle gerne se dette billede:
Og ja, trykker man herfra på space tasten på sit keyboard, så begynder spillet, hvor man vil se et 'spaceship' ude i venstre side af skærmen, der dog hverken kan bevæge sig op og ned, og ej heller rigtig skyde nogle 'bullets' i retning mod de "Alien 'beanies'", som vilkårligt kommer flyvende ind fra skærmens højre side:
Og når ens 'spaceship' på et tidspunkt rammes af en af der grusomme "Alien 'beanies'", så er spillet så at sige slut, og man vil således se dette sidste skærmbillede (hvorfra man dog kan trykke på ens space tast for igen at spille spillet, som vist på forrige skærmbillede):
Før du selv skal kode din løsning på at få spillets 'spaceship' til at kunne bevæge sig op og ned på skærmen, og dets 'bullets' til at bevæge sig fra venstre til højre, så kommer her lige en kort gennemgang af, hvordan koden i starter-code mappen er strukturet, så du forstår den bedre inden du går i gang.
Selve koden til spillet findes under src mappen, hvor du vil finde én JavaScript fil med navet main.js, og én mappe med navnet scenes.
I main.js filen findes den kode som starter hele spillet. Denne fil skal ikke bruges til denne opgave (men nu ved du i hvert fald lidt om, hvad den bruges til).
I scenes mappen findes følgende 3 filer, hvoraf det kun er gameScene.js filen du skal kode i:
- gameOverScene.js
- gameScene.js
- mainMenuScene.js
Og kort fortalt bruges disse filer på følgende måde i nedenstående rækkefølge:
Filen mainMenuScene.js indeholder den kode, som er det første som vises på skærmen, når projektet køres med npm run dev.
Indholdet i denne fil skal vi ikke rode med i denne omgang.
Filen gameScene.js indeholder koden til selve spillet - altså koden som får de dersens "Alien 'beanies'" til at bevæge sig fra højre mod venstre, og senere både dit 'spaceship' og dets 'bullets' til at bevæge sig (når DU snart har kodet det).
Så .. det er altså i denne fil at du skal skrive din vilde kode (mere herom lige om lidt)!
Filen gameOverScene.js indeholder koden for det der vises på skærmen, når ens 'spaceship' er blevet ramt af en "Alien 'bean'", og spillet så at sige er slut.
Denne fil skal vi så heller ikke rode med her.
Freakin' endelig .. nu skal det 'vilde' ske! For nu skal DU nemlig selv til at kode dette spil, så både 'spaceship' og 'bullets' bevæger sig, således at dette spil færdiggøres og bliver .. episk (eller noget..)!
Meenn .. du får selvfølgelig lidt hjælp! Så det kommer herunder.
Det du skal kode er følgende funktionalitet:
- Når en spiller trykker på keyboardets piltast der peger opad, så skal spillets 'spaceship' bevæge sig opad på skærmen (dog uden at måtte "forsvinde" ud af skærmen)
- Når en spiller trykker på keyboardets piltast der peger nedad, så skal spillets 'spaceship' bevæge sig nedad på skærmen (dog igen uden at måtte "forsvinde" ud af skærmen)
- Når spilleren affyrer en 'bullet' fra sit 'spaceship' - hvilket sker når han/hun trykker på keyboardets "space" tast - så den affyrede bullet bevæge sig fra venstre mod højre
Som allerede beskrevet, så er det i filen kaldet gameScene.js, at du skal skrive din kode.
I denne fil vil du derfor på linje 7, 11 og 29 kunne finde en kommentar som følgende, under hvilken det er at du skal skrive din kode:
// SKRIV DIN KODE HERUNDERDin kode under de 2 første kommentarer af disse (dvs. dem på hhv. linje 7 og 11) vil være for at kunne bevæge spillets 'spaceship' op og ned, mens din kode under sidste kommentar (dvs. den på linje 29) vil være for at bevæge en 'bullet' fra venstre mod højre.
Og i øvrigt kan et hint være, at du for både dit 'spaceship' og 'bullet' måske, måske skal bruge move() metoden på hver af disse for at få dem til at bevæge sig .. ;)
Forhåbentlig bliver du med ovenstående selv i stand til at kode spillet færdigt. Så nu er det bare om at komme i gang med at .. kode, kode, kode!
Denne opgave (og koden dertil) er skabt med bidrag fra:
- Jonas Bak Phillipson (Formand og Kaptajn for Coding Pirates Hillerød)