Et repo hvor børn selv skal implementere koden til at bevæge 2 'paddles' (dvs. de 2 lodret hvide "bjælker" man styrer) i et pong spil lavet med KAPLAY, hvor al anden kode er implementeret.
For selv at kunne implementere koden til at få et pong spils 2 'paddles' til at bevæge sig, 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-pong-implement-paddle-movement.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-pong-implement-paddle-movementHar 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:
- starter-code
- finished-code
Mappen kaldet 'starter-code' er den mappe, hvor du selv skal implementere koden til at bevæge pong spillets 2 'paddles', således at du herefter har dit eget komplet fungerende pong spil(!).
Mappen kaldet 'finished-code' indeholder den komplet færdige kode, hvor koden til bevægelsen af de 2 'paddles' er lavet, og alt virker.
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!?
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 fra billede på space tasten på sit keyboard, så begynder spillet som næste billede viser, hvortil de 2 'paddles' i hver side dog ikke rykker sig, når man taster noget på sit keyboard, da det jo lige netop er dét som DU skal kode selv.
Før du skal kode løsning på at få de 2 'paddles' til at bevæge sig op og ned, 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
- startScene.js
Og kort fortalt bruges disse filer på følgende måde i nedenstående rækkefølge:
Filen startScene.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 bolden til at køre rundt, pointene til at opdatere sig, når bolden går ud af skærmen, og de 2 'paddles' som jo så ikke kan bevæge sig endnu (før DU koder dem til at kunne det).
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 en spiller har vundet.
Denne fil skal vi så heller ikke rode med her.
Endelig .. nu skal vi til det sjove! For nu skal DU nemlig selv skrive koden, så de 2 'paddles' bevæger sig, således at man reelt kan spille spillet.
Meenn .. du får selvfølgelig lidt hjælp! Så det kommer herunder.
Det du skal kode er følgende funktionalitet:
- Når første spiller (lad os kalde personen "Player 1") trykker på "w" tasten på dit keyboard, så skal 'paddlen' ude til venstre bevæge sig opad
- Når første spiller trykker på "s" tasten på dit keyboard, så skal samme 'paddle' bevæge sig nedad
- Når anden spiller ("Player 2") trykker på dit keyboards piltast som peger opad, ja, så skal 'paddlen' ude til højre bevæge sig opad
- Og når anden trykker på piltasten der peger nedad .. ja, så skal samme 'paddle' bevæge sig nedad
MEN samtidig skal du også sikre følgende:
- Ingen af de 2 'paddler' må bevæge sig ud af skærmen.
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 51 og linje 63 kunne finde en kommentar som følgende, under hvilken det er at du skal skrive din kode:
// DET HERUNDER DU SKAL SKRIVE DIN KODE TIL PADDLE 1Men for nu at hjælpe dig lidt på vej med at kunne skrive din kode, så kommer her hjælp til de overordnede 2 ting du skal kode, som er:
- Lave en registrering af bevægelse for en 'paddle' ved tryk på en keyboardtast
- Sikre at hver 'paddle' ikke bevæger sig uden for skærmen
Da det måske kan være lidt svært at finde ud af, hvordan man registrerer bevægelse (det man kalder et 'event') for en paddle, som så er her i nedenstående, hvordan man overordnet ville gøre det for 'paddle1' i koden, hvis den skulle bevæge sig opad, når første spiller trykkede på "w" tasten.
Koden for dette ville være:
paddle1.onKeyDown("w", () => {
// Det herinde mellem de 2 'tuborgklammer' (dvs. '{}') at du skal sikre, at 'paddlen' ikke bevæger sig ud af skærmen ..
});Med det har du i hvert fald ét eksempel på, hvordan dette gøres ;)
For denne del kan det være, at du måååske (wink, wink) skal bruge en if statement til at tjekke, hvorvidt en 'paddle' er på vej udover skærmen eller ej.
Og måååske er koden til dette at tjekke, hvorvidt en 'paddles' y-koordinat (som kan fx for 'paddle1' fås vhja. paddle1.pos.y) er større end eller lig med nul, når 'paddlen' bevæger sig opad, og omvendt at tjekke, hvorvidt samme y-koordinat er mindre end eller lig med højden af skærmen (højden kan fås ved at kalde height() metoden), når 'paddlen' bevæger sig nedad.
Og hvis dette er tilfældet - altså at 'paddlens' y-koordinat er inde for skærmen - så kan det .. måååske, måååske .. være at man kan skal bruge moveTo() metoden på sin 'paddle', og inde mellem parenteserne give 'paddlen' en ny x-koordinat, y-koordinat og en 'speed' (hint: sidstnævnte skal blot sættes til den paddleSpeed variabel som allerede findes i koden, og koden for y-koordinaten skal ændres med samme variabel).
For fx paddle1, når den skulle bevæge sig opad, ville koden altså være nogenlunde det her:
paddle1.moveTo("x-koordinat", "y-koordinat" - paddleSpeed, paddleSpeed);Ja, med ovenstående hjælp bliver du forhåbentlig i stand til selv at kode spillet, og få det til at virke, som det skal :-)
Denne opgave (og koden dertil) er skabt med bidrag fra:
- Jonas Bak Phillipson (Formand og Kaptajn for Coding Pirates Hillerød)