Module Programmeren in Javascript

Transcriptie

1 Module Programmeren in Javascript

2 Spel: PONG Pong: uiterlijk In deze module zullen we alle onderdelen die we tot nu toe geleerd hebben samen brengen in het spel Pong. We willen dat het spel er uiteindelijk zo uit komt te zien: Het maken van dit spel zullen we in een aantal stappen onder verdelen: Uiterlijk van het spel De bal automatisch laten bewegen De bat laten bewegen (incl luisteren naar keyboard) Score bijhouden Uitbreidingen (hele breedte van window, bats en ball plaatsen aan de hand van die breedte etc.) Dit is het eerste onderdeel van het maken van een spel en doe je voordat je begint met het echte programmeren. Hiervoor zit eigenlijk nog het verzinnen welk spel je gaat maken en hoe je precies wilt dat het speelt. Het verzinnen van het spel en hoe het speelt hebben we in dit geval alvast voor je gedaan. Nu ben je bij het gedeelte voor het uiterlijk. In dit voorbeeld is ervoor gekozen om een zwarte achtergrond te maken en alles wat erop getekend (de bats, de bal en de tekst) wordt wit te maken. Hiervoor heb je in processing een aantal functies: background() voor de achtergrond kleur, fill() en rect() voor de kleur en plaats en grootte van je bats en fill() en text() voor de kleur en positie van je tekst. We beginnen met het maken van een spel op grootte 800 bij 600. Je hebt natuurlijk (zoals altijd) de twee standaard functies nodig: setup() en draw(). Hieronder de code met commentaar: void setup() void draw() rect(20, 280, 20, 40); //draw left bat rect(760, 280, 20, 40); //draw right bat ellipse(400, 300, 30, 30); //draw ball textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window) Opdrachten: Waarom is op regel 12 de x-positie (eerste parameter) van de rechter bat 760? Pas de code aan zodat de verschillende onderdelen die getekend worden (bats, bal en tekst) allemaal verschillende kleuren hebben.

3 Pong: bewegende bal In het vorige onderdeel heb je het uiterlijk van het spel gemaakt. Als je dat eenmaal af hebt wil je natuurlijk dat je kan spelen. Dit wordt uitgelegd in een aantal paragrafen waarbij we beginnen met het bewegen van de bal. Zoals je in het vorige hoofdstuk met het voorbeeld van het bewegen van de vormen hebt gezien komt beweging er eigenlijk op neer dat alles steeds opnieuw getekend wordt maar dan op nieuwe posities. Omdat dat zo snel gebeurt lijkt het voor ons mensen alsof het een vloeiende beweging is. Bij de eerste stap hebben we de bal getekend, nu moeten we zorgen dat daar beweging in komt. We hebben de bal getekend door de volgende functie aan te roepen: ellipse(400, 300, 30, 30). Willen we hem nu laten bewegen moeten we zorgen dat we de x- en y-coördinaat variabel maken en niet van te voren op een vast punt zetten. Dit doen we weer door twee (globale) variabelen te definiëren: ballx en bally. In eerste instantie tekenen we de bal op positie (400,300) dus zetten we in de setup() functie de volgende regels: ballx = 400; en bally = 300;. Daarna moet je de bal telkens een stukje verder tekenen dus moet je de variabele enigszins aanpassen. Dit doen we door de volgende regels code: ballx += 5; en bally += 5;. De code met bewegende bal ziet er dan nu zo uit: //globale variabele var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball void draw() rect(20, 280, 20, 40); //draw left bat rect(760, 280, 20, 40); //draw right bat ellipse(ballx, bally, 30, 30); //draw ball ballx += 5; //move the ball 5 pixels in the x-direction bally += 5; //move the ball 5 pixels in the y-direction textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window) Als je deze code draait zal je zien dat de bal uit het scherm verdwijnt. Dit willen we natuurlijk niet laten gebeuren. We willen dat de bal van de zijkanten stuitert. Niet alle zijkanten moet de bal af stuiteren. Alleen de boven en onder zijkant, de linker en rechter zijkant moet de bal wel doorheen kunnen (dan is er door iemand een punt gescoord). Voor het stuiteren van een object tegen de rand heeft processing jammer genoeg geen functie gemaakt. Dit betekent dat we zelf moeten controleren of de bal de zijkant bereikt heeft of niet. Pong: Botsing bal met muur We hebben in de code de variabele ballx en bally gekozen als de x- en y-coördinaat voor de bal. Elke keer dat de functie draw() weer uitgevoerd wordt, worden de waarden met 5 opgehoogd (regel 20 en 21). Dit zorgt ervoor dat het lijkt alsof de bal beweegt (feitelijk wordt de bal steeds opnieuw getekend). Met behulp van deze coördinaten kunnen ook kijken of de bal tegen een muur is gebotst. We hoeven alleen de boven en onderkant te doen op dit moment. Zoals je ondertussen weet wordt de verticale richting van het scherm waarop

4 getekend wordt weergegeven met de y-as. Voor de botsing met de boven- en onderkant betekend het dat er gekeken moet worden of de y-coördinaat van de bal de bovenkant of de onderkant bereikt (de grootte van het scherm is 800x600, dus bally moet altijd groter dan 0 zijn en kleiner dan 600). //globale variabele var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball void draw() rect(20, 280, 20, 40); //draw left bat rect(760, 280, 20, 40); //draw right bat ellipse(ballx, bally, 30, 30); //draw ball if(bally > 0 && bally < 600) //if ball is in canvas bally += 5; //move the ball 5 pixels down in the y-direction else if(bally > 600) //if ball is under the lower wall bally -= 5; //move the ball 5 pixels up in the y-direction else if(bally < 0) //if ball is under the lower wall bally += 5; //move the ball 5 pixels down in the y-direction ballx += 5; //move the ball 5 pixels in the x-direction textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window) Als je deze code draait zie je dat de bal binnen het scherm blijft (boven en onder). Wat er nu gebeurt is dat de bal op de onderkant blijft plakken (doe je bij regel 20 -= ipv += gebeurt hetzelfde maar dan aan de bovenkant). Hoe dat komt... zodra de bal erbuiten valt worden er 5 pixels vanaf getrokken maar dan valt hij weer binnen het scherm en zullen er weer 5 bij opgeteld worden zodat de bal er weer buiten valt, zo blijf je oneindig in deze loop van +5 en -5. Zodra de bal dus buiten het scherm valt wil je de richting omdraaien i.p.v. dat je bally van +5 naar -5 doet. Hiervoor hebben we een beetje (simpele) wiskunde nodig.

5 Pong: richting van de bal berekenen We hebben er hierboven voor gekozen om de bal te laten bewegen door de x- en y-coördinaat met een vast getal aan te passen. Zoals we gezien hebben kunnen we dat beter doen door een richting te kiezen (zodat we die bij botsingen eenvoudig kunnen veranderen). Om richtingen te berekenen kunnen we de hoeken van een rechthoekige driehoek (goniometrie) gebruiken. Hiervoor hebben we een eerste richting nodig. Deze kan je willekeurig laten kiezen (zie regel 17 en 19 hieronder). Dan bereken je de hoek waarin de bal beweegt aan de hand van deze directionx en directiony (zie regel 30). En als laatst bereken je aan de hand van de snelheid (die je van tevoren bepaald, regel 4) hoeveel pixels er in de y-richting (regel 31) en hoeveel pixels in de x-richting (regel 32) veranderen. //globale variabele var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball var ballspeed = 10; //speed of the ball var directionx = 0; //x direction of the ball var directiony = 0; //y direction of the ball var alpha = 0; //the corner of the triangle made from the directionx and directiony variable var deltax = 0; //the amount of pixels in x direction moved per step var deltay = 0; //the amount of pixels in y direction moved per step void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball directionx = Math.random()*2-1; //Math.random() gets number between 0 and 1, by //multiplying with 2 and subtracting 1 it becomes a number between -1 and 1 directiony = Math.random()*2-1; void draw() rect(20, 280, 20, 40); //draw left bat rect(760, 280, 20, 40); //draw right bat ellipse(ballx, bally, 30, 30); //draw ball alpha = Math.atan(directionY/directionX); //calculate direction deltay = ballspeed*math.sin(alpha); //change in y-coordinate according to direction deltax = ballspeed*math.cos(alpha); //change in x-coordinate according to direction if(directionx < 0) //if direction is negative (ball moves down left) ballx -= deltax; //x-coordinate has to decrease else //direction is positive (ball moves right) ballx += deltax; //x-coordinate has to increase bally += deltay; //increase the y-coordinate (deltay can be negative so ball goes //both up and down) textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window)

6 Als je de code nu een aantal keer draait zie je dat de bal verschillende richtingen op gaat. Alleen botst nog niet tegen de boven- en onderkant. Nu moeten we eigenlijk hetzelfde als net doen alleen dan kan je de richting veranderen door ipv ballx van +5 naar -5 (of andersom) doen. De code ziet er dan zo uit: //globale variabele var ball_radius = 30; //radius of the ball var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball var ballspeed = 10; //speed of the ball var directionx = 0; //x direction of the ball var directiony = 0; //y direction of the ball var alpha = 0; //the corner of the triangle made from the directionx and directiony variable var deltax = 0; //the amount of pixels in x direction moved per step var deltay = 0; //the amount of pixels in y direction moved per step void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball directionx = Math.random()*2-1; //Math.random() gets number between 0 and 1, by //multiplying with 2 and subtracting 1 it becomes a number between -1 and 1 directiony = Math.random()*2-1; void draw() rect(20, 280, 20, 40); //draw left bat rect(760, 280, 20, 40); //draw right bat ellipse(ballx, bally, ball_radius, ball_radius); //draw ball alpha = Math.atan(directionY/directionX); //calculate direction deltay = ballspeed*math.sin(alpha); //change in y-coordinate according to direction deltax = ballspeed*math.cos(alpha); //change in x-coordinate according to direction if(directionx < 0) //if direction is negative (ball moves down left) ballx -= deltax; //x-coordinate has to decrease else //direction is positive (ball moves right) ballx += deltax; //x-coordinate has to increase bally += deltay; //increase the y-coordinate (deltay can be negative so ball goes //both up and down) //collision detection //ball collides with top and bottom of screen if(bally - (0.5 * ball_radius) < 0) //top: center of ball minus half radius < 0 if(bally + (0.5 * ball_radius) > 600) //bottom: center of ball plus half radius > 600 textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window)

7 Als je deze code nu draait zie je dat de bal aan het begin alle mogelijke richtingen op gaat en als het de bovenen onderkant raakt de richting veranderd wordt. In de code hierboven is ervoor gekozen om van tevoren vast te leggen hoe groot de bal is (regel 2). Dit heeft als voordeel dat als je de bal wat groter of kleiner wilt maken je het maar op een plek hoeft aan te passen. Bij de berekening of de bal botst met de muren is er ook rekening gehouden met de straal van de bal (regel 44: als de y-coördinaat min halve radius kleiner is dan 0 dan valt de bal buiten het veld en dus moet de richting veranderd worden. Regel 46 doet hetzelfde maar dan aan de onderkant). Opdrachten: Zorg dat de bal ook van richting veranderd als een van de bats geraakt wordt. Tip: controleer de x-coördinaat van de bal (ballx) met de x-coördinaat van het binnenste gedeelte van de bat (ballx + (0.5 * ball_radius) > bat2x). Zorg ook dat de y-coördinaat van de bal binnen de y-coördinaat van de bat valt (bally > bat2y && bally < (bat2y + bat_height)). Zoals je ziet is ervoor gekozen om de bat_height en bat_width van tevoren te kiezen en te definiëren (net zoals de ball_radius in het voorbeeld hierboven).

8 Pong: bewegende bat In stap 2 hebben we ons alleen bezig gehouden met de bal: beweging en botsing. Maar om het spel te spelen moet je natuurlijk de bats laten bewegen. Dit gaan we laten doen door ervoor te zorgen dat het spel luistert naar toetsen op het toetsenbord. Er is voor gekozen om de knoppen w en s te gebruiken om de linker-bat naar boven en beneden te bewegen. De pijltjes toetsen boven en onder zijn gekozen om de rechter-bat te laten bewegen. Processing heeft voor het bekijken of een toets is ingedrukt een functie gemaakt die wij kunnen gebruiken: void keypressed(). Binnen deze functie kan je controleren welke toets er is ingedrukt. Dat doe je als volgt: //globale variabele var ball_radius = 30; //radius of the ball var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball var ballspeed = 10; //speed of the ball var directionx = 0; //x direction of the ball var directiony = 0; //y direction of the ball var alpha = 0; //the corner of the triangle made from the directionx and directiony variable var deltax = 0; //the amount of pixels in x direction moved per step var deltay = 0; //the amount of pixels in y direction moved per step var bat1x = 20; //x-coordinate of left bat var bat1y = 280; //y-coordinate of left bat var bat2x = 760; //x-coordinate of right bat var bat2y = 280; //y-coordinate of right bat var bat_width = 20; //width of a bat var bat_height = 40; //height of a bat void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball directionx = Math.random()*2-1; //Math.random() gets number between 0 and 1, //by multiplying with 2 and subtracting 1 it becomes a number between -1 and 1 directiony = Math.random()*2-1; void draw() rect(bat1x, bat1y, bat_width, bat_height); //draw left bat rect(bat2x, bat2y, bat_width, bat_height); //draw right bat ellipse(ballx, bally, ball_radius, ball_radius); //draw ball alpha = Math.atan(directionY/directionX); //calculate direction deltay = ballspeed*math.sin(alpha); //change in y-coordinate according to direction deltax = ballspeed*math.cos(alpha); //change in x-coordinate according to direction if(directionx < 0) //if direction is negative (ball moves down left) ballx -= deltax; //x-coordinate has to decrease else //direction is positive (ball moves right) ballx += deltax; //x-coordinate has t increase bally += deltay; //increase the y-coordinate (deltay can be negative so ball goes //both up and down)

9 //collision detection //ball collides with top and bottom of screen if(bally - (0.5 * ball_radius) < 0) //top: center of ball minus half radius < 0 if(bally + (0.5 * ball_radius) > 600) //bottom: center of ball plus half radius > 600 textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player //(600 = not the 600 from the size of the window) //called when a key on the keyboard is pressed void keypressed() if(key == w ) //if w is pressed move left bat up bat1y -= 5; De code is vrijwel hetzelfde als bij stap 2 met het verschil nu dat er een aantal variabele weer vast gedefinieerd zijn zodat ze makkelijk aan te passen zijn. Deze variabele zijn de x-, y-coördinaten, hoogte en breedte van de bats. Deze zijn toegepast bij het tekenen van de bats in regel 33 en 34. Verder is er de functie keypressed() aan toegevoegd om te kijken of een toets is ingedrukt (regels 59-66). Als je deze code draait kan je met de w-toets de linker bat omhoog bewegen. Opdrachten: Zorg dat je met de s-knop de linker bat omlaag beweegt. Zorg ervoor dat je met de pijltjestoets omhoog en omlaag de rechter bat beweegt. Tip: om speciale (niet-letter) toetsen op het toetsenbord te herkennen moet er nog een extra controle uitgevoerd worden: if(key == CODED) //is it a special key if(keycode == UP) //what kind of special key is pressed Zoals je ziet beweegt de bat op de manier hierboven niet heel erg soepel (of maar 1 keer). Dit komt door de manier waarop de processing werkt. Als er een toets wordt ingedrukt zet processing ergens in het geheugen welke toets ingedrukt is. Dan wordt er elke keer gekeken of die toets nog steeds ingedrukt is. Dit zorgt ervoor dat het er schokkerig uitziet. Dit kan op een slimme manier opgelost worden. Hierboven hebben we het verplaatsen in de keypressed() functie geplaatst. Naast deze keypressed() functie is er ook een keyreleased() functie. Deze functie wordt uitgevoerd als, zoals de naam zegt, een toets wordt lasgelaten. Als er nu aan het begin een variabele wordt gedefinieerd die van waarde veranderd als de toets wordt ingedrukt en weer terug veranderd als die wordt losgelaten kunnen we in de draw functie de verplaatsing van de bat plaatsen. Er is dus nu een extra variabele (bv var keyw = false) nodig die veranderd wordt in de functie keypressed() en keyreleased(). De code wordt dan:

10 //globale variabele var ball_radius = 30; //radius of the ball var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball var ballspeed = 10; //speed of the ball var directionx = 0; //x direction of the ball var directiony = 0; //y direction of the ball var alpha = 0; //the corner of the triangle made from the directionx and directiony variable var deltax = 0; //the amount of pixels in x direction moved per step var deltay = 0; //the amount of pixels in y direction moved per step var bat1x = 20; //x-coordinate of left bat var bat1y = 280; //y-coordinate of left bat var bat2x = 760; //x-coordinate of right bat var bat2y = 280; //y-coordinate of right bat var bat_width = 20; //width of a bat var bat_height = 40; //height of a bat var bat1speed = 10; //speed of the right bat var keyw = false; //w key is not pressed void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball directionx = Math.random()*2-1; //Math.random() gets number between 0 and 1, by multiplying with 2 and subtracting 1 it becomes a number between -1 and 1 directiony = Math.random()*2-1; void draw() rect(bat1x, bat1y, bat_width, bat_height); //draw left bat rect(bat2x, bat2y, bat_width, bat_height); //draw right bat ellipse(ballx, bally, ball_radius, ball_radius); //draw ball //move the bats if(keyw && bat1y > 0) //if key w is pressed (than variable keyw equals true) and the bat is inside the screen move it up bat1y -= bat1speed; alpha = Math.atan(directionY/directionX); //calculate direction deltay = ballspeed*math.sin(alpha); //change in y-coordinate according to direction deltax = ballspeed*math.cos(alpha); //change in x-coordinate according to direction if(directionx < 0) //if direction is negative (ball moves down left) ballx -= deltax; //x-coordinate has to decrease else //direction is positive (ball moves right) ballx += deltax; //x-coordinate has t increase bally += deltay; //increase the y-coordinate (deltay can be negative so ball goes both up and down) //collision detection //ball collides with top and bottom of screen if(bally - (0.5 * ball_radius) < 0) //top: center of ball minus half radius < 0 if(bally + (0.5 * ball_radius) > 600) //bottom: center of ball plus half radius > 600

11 textsize(30); //choose the size of the text text( Points: 0, 600, 30); //draw the score for the right player (600 = not the 600 from the size of the window) //called when a key on the keyboard is pressed void keypressed() if(key == w ) //if w is pressed set variable to true so it will move keyw = true; //called when a key on the keyboard is released void keyreleased() if(key == w ) //if w is released set variable to false so it will not move keyw = false; Als je deze code uitvoert merk je dat de bat een stuk soepeler beweegt. Opdrachten: Zorg dat je deze verandering voor alle andere toetsen ook doorvoert (toets s, pijl omhoog en pijl omlaag)

12 Pong: score Als we de botsing met muren en bats, en de bats bewegend hebben gekregen dan is het spel in principe speelbaar. Wat er nu nog aan moet gebeuren is om het spel een doel te geven: de score! In het spel pong wordt er door een speler gescoord als de tegenstander de bal achter zijn bat laat komen (dus hij gaat rechts of links uit het scherm). Eigenlijk is dit stukje code hetzelfde als bij de botsingscode met het enige verschil dat je de richting niet veranderd en nergens tegen aan botst. Er wordt nu gekeken of de bal uit het scherm is, zo ja dan tel je bij de score een op. In code: //globale variabele var ball_radius = 30; //radius of the ball var ballx = 0; //x-coordinate of the ball var bally = 0; //y-coordinate of the ball var ballspeed = 10; //speed of the ball var directionx = 0; //x direction of the ball var directiony = 0; //y direction of the ball var alpha = 0; //the corner of the triangle made from the directionx and directiony variable var deltax = 0; //the amount of pixels in x direction moved per step var deltay = 0; //the amount of pixels in y direction moved per step var bat1x = 20; //x-coordinate of left bat var bat1y = 280; //y-coordinate of left bat var bat2x = 760; //x-coordinate of right bat var bat2y = 280; //y-coordinate of right bat var bat_width = 20; //width of a bat var bat_height = 40; //height of a bat var bat1speed = 10; //speed of the right bat var keyw = false; //w key is not pressed var points2 = 0; //the number of points for player 2 void setup() ballx = 400; //set the x-coordinate for the start position of the ball bally = 300; //set the y-coordinate for the start position of the ball directionx = Math.random()*2-1; //Math.random() gets number between 0 and 1, by multiplying with 2 and subtracting 1 it becomes a number between -1 and 1 directiony = Math.random()*2-1; void draw() rect(bat1x, bat1y, bat_width, bat_height); //draw left bat rect(bat2x, bat2y, bat_width, bat_height); //draw right bat ellipse(ballx, bally, ball_radius, ball_radius); //draw ball //move the bats if(keyw && bat1y > 0) //if key w is pressed and the bat is inside the screen move it up bat1y -= bat1speed; alpha = Math.atan(directionY/directionX); //calculate direction deltay = ballspeed*math.sin(alpha); //change in y-coordinate according to direction deltax = ballspeed*math.cos(alpha); //change in x-coordinate according to direction if(directionx < 0) //if direction is negative (ball moves down left)

13 ballx -= deltax; //x-coordinate has to decrease else //direction is positive (ball moves right) ballx += deltax; //x-coordinate has t increase bally += deltay; //increase the y-coordinate (deltay can be negative so ball goes both up and down) //collision detection //ball collides with top and bottom of screen if(bally - (0.5 * ball_radius) < 0) //top: center of ball minus half radius < 0 if(bally + (0.5 * ball_radius) > 600) //bottom: center of ball plus half radius > 600 //score if(ballx < 0) //when ball is fully behind the bat points2 += 1; //add point to opponent ballx = 400; //reset ball at center of screen bally = 300; directionx = Math.random()*2-1; //randomise direction of ball again directiony = Math.random()*2-1; textsize(30); //choose the size of the text text( Points: + points2, 600, 30); //draw the score for the right player (600 = not the 600 from the size of the window) //called when a key on the keyboard is pressed void keypressed() if(key == w ) //if w is pressed move left bat up keyw = true; //called when a key on the keyboard is released void keyreleased() if(key == w ) keyw = false; De code waar het hier om gaat staat op regels 19, Eerst wordt er op regel 19 een variabele gedeclareerd die de score voor de rechter speler gaat bijhouden. Op regel wordt gekeken of de bal het veld verlaat aan de linkerkant (x-coördinaat is kleiner dan 0). Als dat zo is moeten er een aantal dingen gebeuren: de score moet opgehoogd worden en de bal moet opnieuw in het midden geplaatst worden en in een richting bewogen laten worden! Vooral dat laatste is iets dat je in eerste instantie kan vergeten (maar na een keer getest te hebben zie je dat meteen). Opdrachten: Zorg dat je de score ook voor de linker speler werkend maakt.

14 Pong: uitbreidingen Als je de vorige 4 stappen goed hebt doorlopen en gemaakt heb je in principe een werkend spel. Er zijn alleen nog uitbreidingen die je kunt programmeren die het spel mooier en/of beter speelbaar zullen maken. Een aantal mogelijke uitbreidingen zullen bij deze stap uitgelegd worden. De code zul je zelf moeten schrijven! Op dit moment heb je de grootte van het speel scherm aan het begin hardcoded. Dat betekend dat je van tevoren gekozen hebt hoe groot het speel scherm is (800x600). Het is natuurlijk mooier als je de grootte van het speel scherm laat afhangen van de grootte van je browser window. Hoe je de grootte van je browser window krijgt moet je zelf opzoeken (TIP: zoek op processing en innerheight of innerwidth ). Heb je eenmaal de maximale grootte van je browser scherm gekozen voor je speel scherm zal je zien dat de bal en bats eigenlijk best klein zijn. Verander de code zo dat de grootte van de bal en de bats aangepast wordt aan de grootte van je speel scherm (TIP: neem voor de hoogte van je bat en of diameter van je bal een bepaald % van de hoogte van je speel scherm). Een spel moet op een gegeven moment een winnaar hebben. Zorg ervoor dat er in je code op een gegeven moment een winnaar is. Bijvoorbeeld als een speler de 10 punten heeft gehaald. Het kan ook leuk zijn om het spel iets moeilijker te maken voor een speler mocht hij/zij bijna gewonnen hebben. Zo kan de speler die achter ligt makkelijker terug komen. Denk bijvoorbeeld aan het feit dat de snelheid van de bat omlaag gaat als de speler 8 punten of meer heeft. Zorg dat je dit in de code zet (TIP: if(score2>8) bat2speed /= 2;). Elke keer dat er nu een punt gescoord wordt gaat het spel meteen door. Dit kan lastig zijn. Zorg ervoor dat als er een punt gescoord is het spel gepauzeerd wordt totdat er op een toets (bv spatie) gedrukt wordt. TIP: declareer een variabele pauze = 0 en zet in de draw() functie alle code binnen een if-statement. Alleen als de waarde van pauze gelijk is aan 0 zal het spel gespeeld worden anders krijg je tekst op je scherm te zien Het spel is gepauzeerd. Druk op spatie om door te gaan!. Zorg ook dat je op je scherm te zien krijgt wie er gewonnen heeft. TIP: if(score2 == 10) text( Player 2 has won! Press space to start new game!, 300, 180);. Dit zijn een paar mogelijke uitbreidingen van de code. Je kan vast meer uitbreidingen verzinnen. Mocht je tijd over hebben mag je deze ook implementeren (=in de code zetten). Dit zal dan bonuspunten opleveren!

15 Eind opdracht processing SE2 Voor de eindopdracht krijg je twee keuzes. De eerste is om alle uitbreidingen voor het spel Pong in stap 5 te implementeren. Een andere mogelijkheid is dat je zelf een spel verzint en maakt. Het spel moet dan aan de volgende voorwaarde voldoen: Het moet speelbaar zijn met je muis en/of toetsenbord. Er moet iets van een score bijgehouden worden (of een bepaald leven dat steeds omlaag gaat) zodat er een eind aan het spel is. Het spel moet op het volledige scherm van je browser gespeeld worden (zie punt 1 bij stap 5). Er moet iets van een tegenstander inzitten (denk aan ander poppetje die je dood maakt of dat je iets binnen een bepaalde tijd moet halen).