Ninja Tag

Inhoud

arrow_upward

Introductie

Welkom bij Ninja Tag!

Hoe communiceert jouw computer met andere computers als jij een spelletje speelt met andere mensen? Volg de instructies hieronder om dat leren, door een eigen game-client te bouwen in een gedeelde wereld met andere ninja’s.

arrow_upward

Voorbereiding

Je ziet dat je meteen al meedoet aan het spel! Als je in de browser op Alt-Ctrl-J drukt (op Apple-computers Alt-Cmd-J), dan wordt de javascript-console geopend. In dat venster kun je zelf het spel veranderen en uitbreiden.

arrow_upward

Console commando's (voor de beginner)

Avatar

In het spel bestuur je een 'avatar'. Je avatar is een vierkantje met een kleur of een plaatje dat over het veld kan bewegen.

Je bestuurt je avatar door commando's te typen in de console. Die commando's vertellen we je zo, maar je kunt alvast wat informatie over je avatar zien door het woord in de console te typen:

 avatar

Druk daarna op je toetsenbord op de Enter-toets. Je ziet nu informatie in beeld. Snap je al een beetje wat het allemaal betekent?

Naam instellen

Stel een naam in voor je avatar met het onderstaande commando. In ons voorbeeld heet de speler Jantje:

In Google Chrome ziet dit commando er als volgt uit.

 avatar.zet_naam("Jantje")

Met dit commando heb je een bericht naar de server gestuurd dat je je naam wilt veranderen. Als de server je bericht begrepen heeft, zal hij laten weten dat je naam is veranderd.

Als meerdere spelers dezelfde naam gebruiken, zal er een getal achter je naam komen te staan. Om te zien of je naam is veranderd en waarin het is veranderd, type je:

 avatar.naam

Bewegen

Beweeg nu je avatar met dit commando:

 avatar.ga_rechts()

Je bent nu naar rechts bewogen. Je kunt ook naar links, naar boven en naar onder. Kun jij ontdekken hoe?

Grootte veranderen

Je kunt veranderen hoe je avatar eruit ziet, bijvoorbeeld door hem groter of kleiner te maken. Daarvoor heeft de avatar eigenschappen die 'styles' worden genoemd, stijlen in het Nederlands. Een aantal van deze stijlen zijn in het Engels: breedte is 'width', hoogte is 'height'.

Type bijvoorbeeld het onderstaande commando:

 avatar.styles["width"] = "32px"
Als het goed is zie je dat je avatar nu van vorm is veranderd, de breedte is nu 32 pixels. Zien andere spelers jou ook al zo? Nee, daarvoor moet je eerst de server vertellen dat je er anders uit ziet. Je stuurt je nieuwe stijl naar de server met 'stuur_styles()': 
 avatar.stuur_styles()

Als het goed is, heeft je avatar nu ook bij de andere spelers een breedte van 32 pixels.
Experimenteer eens met verschillende hoogtes en breedtes. Er is een maximum en een minimum. Hoe groot kun je worden? En hoe klein?

Kleuren en vormen

Met dezelfde styles is het ook mogelijk om het uiterlijk van jouw avatar verder aan te passen. Verander bijvoorbeeld met onderstaande commando's de achtergrondkleur naar groen (green), rood (red) of blauw (blue), of iets heel anders. Een uitgebreide lijst met verschillende kleuren vind je op de w3schools-website.

 avatar.styles["background-color"] = "green"
 avatar.stuur_styles()

Behalve de kleur veranderen, kun je ook een rand (border) toevoegen. Een rand heeft een dikte, in pixels, en een kleur. Een rand heeft ook een stijl, die je kunt kiezen uit dit lijstje: dotted, dashed, solid, double, groove, ridge, inset, outset. Probeer ze maar eens uit!

 avatar.styles["border"] = "2px dashed blue"
 avatar.stuur_styles()

Om je rand weer weg te halen type je:

 avatar.styles["border"] = "none"
 avatar.stuur_styles()

Je kunt ook de hoeken van je avatar aanpassen, door de zogenaamde radius aan te passen:

     avatar.styles["border-radius"] = "5px"
 avatar.stuur_styles()

Lukt het je om de radius zo te krijgen dat jouw avatar een cirkel wordt?

Een nieuw plaatje

Je kunt ook als achtergrond een plaatje nemen. Eerst moet je het web adres weten van een leuke afbeelding, bijvoorbeeld "http://45.77.139.8:3000/img/ninja.png". Om dit plaatje te gebruiken voor je avatar type je:

 avatar.zet_plaatje("http://45.77.139.8:3000/img/ninja.png")

Let op dat dit soort adressen altijd eindigen op '.png' of '.jpg', als dat niet zo is, heb je misschien het verkeerde adres.

Het kan zijn dat je plaatje te groot of te klein is voor je avatar. Zoals je eerder met 'width' en 'height' de grootte van je avatar hebt bepaald, kun je ook de grootte van je afbeelding aan geven: 

 avatar.styles["background-size"] = "32px" 
 avatar.stuur_styles()
arrow_upward

HTML en CSS: de spelomgeving

Hoe het spel er voor jou uitziet wordt bepaald door de html en de css code. In het html bestand spel.html, dat je hebt geopend in je browser worden bijvoorbeeld de balk bovenin en het speelveld gemaakt. Met het css bestand style.css in de map css wordt bepaald hoe de stukjes html er uit moeten zien, bijvoorbeeld de grootte en kleur van letters.

Let op: als je iets verandert in de html en/of css dan zul je dat alleen op je eigen scherm zien, de veranderingen worden niet doorgestuurd naar de server.

Kijk nu eens of je bijvoorbeeld een achtergrondkleur of -plaatje voor het speelveld kunt maken. Het speelveld heeft in het html bestand een zogenaamd "id" (van "identificatie") gekregen, een naam die je in het css bestand kunt gebruiken om aan te geven dat je alleen de styling van dat stuk html wilt veranderen. Je kunt het speelveld een groene achtergrondkleur geven door 

        background-color: green;
toe te voegen aan het drawing onderdeel in de css. Een plaatje werkt bijna hetzelfde, hiervoor voeg je bijvoorbeeld dit toe: 
        background-image: url("../img/background.png");
Het plaatje background staat al in de map img; je kunt natuurlijk ook je eigen plaatje kiezen.

arrow_upward

Javascript (voor gevorderden)

Als je de console-opdrachten hierboven nog niet hebt gedaan, doe die dan eerst.

Functions

Tot nu toe heb je in je console met èèn commando je avatar aangestuurd. Maar je kan ook je eigen commando's schrijven! Je kan bijvoorbeeld een commando schrijven die er voor zorgt dat jouw avatar schuin naar rechts-onder gaat. Om een commando te maken, schrijf je een function. Een function is een stukje code in een van de bestanden, die je vanuit de console kan aanroepen, zoals je tot nu toe ook al hebt gedaan.

Om te beginnen, open met een teksteditor in het mapje 'js' het bestand 'ninja.js'. Als je niet weet wat een teksteditor is, vraag dan hulp bij een mentor.

Dit bestand is nog helemaal leeg, want het is de bedoeling dat je daar zelf iets in gaat schrijven. Laten we een commando schrijven voor de avatar waarmee de avatar naar rechts-onder gaat:

avatar.ga_rechtsonder = function() {
    avatar.ga_rechts()
    avatar.ga_onder()
}

De opdrachten die tussen de '{' en de '}' staan, zijn de stapjes die jouw commando zet. Je kan dus alle opdrachten die je in de console hebt gedaan, ook in je eigen commando's zetten.Als je de pagina ververst, kun je in de console nu je nieuwe commando aanroepen:

avatar.ga_rechtsonder()

Kun je ook een commando schrijven die naar links-boven gaat? En een commando die 5 stapjes naar rechts gaat?

Besturen met je toestenbord

Je kunt ook functies schrijven die automatisch worden aangeroepen als er iets gebeurt. Bijvoorbeeld wanneer een toets op je toetsenbord wordt ingedrukt. Hiervoor gebruik je het 'toetsenbord' object, waarbij de naam van je functie uit èèn enkele hoofdletter bestaat. Wanneer die hoofdletter dan wordt ingedrukt, wordt je functie aangeroepen. Probeer maar eens uit door deze code in je ninja.js bestand te zetten:

toetsenbord.D = function() {
    console.log("De D is ingedrukt")
    avatar.ga_rechts()
}

Vergeet niet om daarna je pagina te verversen. Als je nu in het veld klikt en je drukt op 'D', dan zou je avatar naar rechts moeten gaan.

De regel met console.log() is een programmeertrucje: het schrijft een berichtje in je console wanneer dit langs komt. Zo weet je of je functie is aangeroepen.

Kun jij nu zelf zorgen dat W naar boven gaat, A naar rechts en S naar onder?
Kun je ook zorgen dat met bepaalde letters je avatar (en het plaatje) groter of kleiner wordt?

Loops

Met Javascript kun je een heleboel doen, veel meer dan alleen maar commando's aanroepen. Laten we, om een eerste indruk te krijgen van de kracht van Javascript, proberen om je avatar zo snel mogelijk naar de andere kant van het veld te krijgen. Probeer deze code eens:

avatar.ver_naar_rechts = function() {
    var teller = 0;
    while (teller < 100) {
        avatar.ga_rechts()
        teller = teller + 1
    }   
}

Probeer deze functie is uit door in je console avatar.ver_naar_rechts() te typen. Als het goed werkt, is je avatar nu 100 stapjes naar rechts gegaan. Misschien snap je niet alles van dit voorbeeldje, dat geeft niet. Je kan ermee experimenteren door van de 100 stapjes meer of minder te maken. Als je graag meer wilt leren over wat er allemaal mogelijk is met javascript, daar zijn hele boeken over geschreven. Vraag een mentor, die helpt je er graag mee verder!

arrow_upward

Conclusie

Je hebt nu een beeld gekregen van hoe de "achterkant" van een game-client kan werken.

arrow_upward

Vervolg

Wil je je verder verdiepen in de gebruikte technieken? Dan kun je meer informatie vinden op de volgende sites:

Creative Commons License
Dit werk is gelicenseerd met een Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.