Roc Zadkine Javascript Car Door: K.Bakker versie 1.0
mei 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker
inhoudsopgave 1. Project benodigdheden 3 2. Benodigdheden 3 3. Project Demo 3 4. Shapes! 4 5. Laat de auto bewegen 7 6. RequestAnimationFrame 9 7. Hoe de beweging controleren met COSAS 9 8. Afronden van het project 14
1. Project benodigdheden Basis kennis Javascript Basiskennis HTML Begrip van cosinus, sinus en tangens 2.Benodigdheden Geschikte afbeelding van een auto 3.Project Demo Introduction to the Canvas De komst van HTML5 heeft enorme veranderingen veroorzaakt in het ontwikkelen van websites. Met de introductie van het CANVAS concept gecombineerd met enige slimme Javascript programmeertechnieken zijn legio mogelijkheden geopend om creatieve en slimme grafische effecten en animaties te maken. In dit project zullen we simpel spel maken waarbij een auto-afbeelding gebruikt wordt als voorwerp dat bestuurd gaat worden. Feitelijk wordt het CANVAS element gecreëerd door de CANVAS TAG. Daarnaast zijn een aantal JavaScript functies beschikbaar om het element te manipuleren. Bestudeer onderstaand HTML code met het<canvas> tag. 01.<!DOCTYPE html> 02.<html> 03. <head> 04. <title>hello world</title> 05. <meta charset="utf-8"> 06. <script type="text/javascript" src="main.js"></script> 07. <style type="text/css"> 08. #canvas{ 09. border: 2px solid #333; 10. } 11. </style> 12. </head> 13. <body> 14. <canvas id="canvas" width"800" height="800"> 15. <!-- fun things happen here --> 16. </canvas> 17. </body> 18.</html>
4.Shapes! Het CANVAS element wordt gebruikt om een een afbeelding te plaatsen. Dit doen we door de context van het betreffende CANVAS element te bepalen met het JavaScript. Er zijn 2 variabelen die het CANVAS element gaan manipuleren. Canvas = document.getelementbyid( canvas ) Context = canvas.getcontext( 2d ) 1.window.onload = function() 2.{ 3. var canvas = document.getelementbyid("canvas"); 4. var context = canvas.getcontext("2d"); 5. 6. context.fillstyle = "rgb(100, 200, 120)"; 7. context.fillrect(10, 10, 55, 50); 8.} Hier gebeuren dus een aantal zaken: 1. window.onload start de grafische functie. 2. Verwijs naar het CANVAS element in het HTML-document (DOM verwijzing) 3. Zet de grafische context naar 2D 4. fillstyle voor een bepaalde kleur. Hiermee geven we kleur aan het object. 5. fillrect() om een vierhoek te tekenen met coördinaten x1,y1,x2,y2. in de kleuren van fillstyle
Het proces om een afbeelding te importeren is anders aangezien we feitelijk geen afbeelding maken met JavaScript maar een grafisch object gebruiken. 1. We maken eerst een image object 2. Het kenmerk src verwijst naar de bestandsnaam van de afbeelding 3. Het image object wordt gekoppeld aan de CANVAS context met de begin coördinaten x en y. De x,y-coördinaten worden gebruikt om de auto-afbeelding te plaatsen op het scherm. Het scherm begint altijd linksboven.
Het JavaScript wordt dus uitgebreid met Var car = new Image() Car.src = auto.jpg // de naam die jij gegeven hebt aan het bestand Context.drawImage( car, x, y) 01.window.onload = function() 02.{ 03. var canvas = document.getelementbyid("canvas"); 04. var context = canvas.getcontext("2d"); 05. 06. var x = 0; 07. var y = 0; 08. 09. var car = new Image(); 10. car.src="myimage.jpg"; 11. context.drawimage(car, x, y); 12.} De auto wordt nu getoond op het scherm!
5.Laat de auto bewegen Dit lijkt veel op de techniek die in een tekenfilm gebruikt wordt. De afbeelding worden keer op keer opnieuw getoond met kleine veranderingen waardoor een beweging gesimuleerd wordt. 1. Toon de afbeelding op het scherm. Afbeelding import en koppelen aan CANVAS element 2. Open een tekengebied 3. Herhaal stap 1 en 2 oneindig. Het openen van een schoon tekengebied doe we als volgt; 1.context.clearRect(0, 0, 800, 800); Bovenstaande code zal alles schoonmaken op het gebied met de coordinaten 0,0,800,800 Voor stap 3 hebben we oneindige loop nodig die iedere keer kleine veranderingen kan aanmaken. Om de veranderingen te zien is een soort pauze nodig iedere keer nadat de functie doorlopen is. Dit doen we met de setinterval methode van JavaScript. In de onderstaande code wordt de auto iedere keer een stukje verder verplaats setinterval( function(), { draw() }, 30 ) start iedere 30 seconden de draw-functie (teken auto) De draw functie plaatst de auto iedere keer een stukje lager door de variabele y++. Context.drawImage(car, x, y )
01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. 06. canvas = document.getelementbyid("canvas"); 07. context = canvas.getcontext("2d"); 08. 09. var moveinterval = setinterval(function() 10. { 11. draw(); 12. }, 30); 13.}; 14. 15.function draw() 16.{ 17. context.clearrect(0, 0, 800, 800); 18. var car = new Image(); 19. car.src="myimage.png"; 20. context.drawimage(car, x, y); 21. 22. y++; 23.} Dit loopt oneindig door. We kunnen dit stoppen de door onderstaande code toe te voegen. clearinterval moveinterval 1.clearInterval(moveInterval);
6.RequestAnimationFrame Naast de functie setinterval, biedt HTML5 een JavaScript API met de naam requestanimationframe. Deze API heeft meerdere mogelijkheden om animaties met CANVAS te stoppen welke in tabs die niet direct zichtbaar zijn. Deze API is echter niet in alle browser te gebruiken. 7.Hoe de beweging controleren met COSAS De functie van SINUS en COSINUS worden veel gebruikt in animaties om de beweging zo natuurgetrouw mogelijk weer te geven. Dit is noodzakelijk indien we de auto over een schuine lijn laten bewegen met een bepaalde constante snelheid. We hebben dit nodig omdat de commando regel Context.drawImage(car, x, y) een afbeelding alleen maar kan plaatsen op absolute coördinaten. X en Y zijn horizontaal en verticaal. Voor verticaal bereken je : Y = cos (hoek) maal (schuine lijn). Voor horizontaal bereken je : X = sin (hoek) maal (schuine lijn). De hoek moet berekend worden naar radialen met Math PI/180 Bekijk de code nu
Bekijk de code nu 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle = 30; 07. 08. canvas = document.getelementbyid("canvas"); 09. context = canvas.getcontext("2d"); 10. 11. car = new Image(); 12. car.src="myimage.png"; 13. 14. var moveinterval = setinterval(function() 15. { 16. draw(); 17. }, 30); 18.}; 19. 20.function draw() 21.{ 22. context.clearrect(0, 0, 800, 800); 23. 24. context.drawimage(car, x, y); 25. 26. x += speed * Math.cos(Math.PI/180 * angle); 27. y += speed * Math.sin(Math.PI/180 * angle); 28.} Zoals je ziet worden twee waarden gebruikt voor de beweging; speed én angle. Hiermee wordt de horizontale en verticale beweging bepaald.
Hoe krijgen we snelheid (speed) en de hoek (angle). Dit wordt geregeld door de API rotate methode De oplossing werkt als volgt; 1. Bewaar de huidige staat van de context. En centreer op halve hoogte en breedte. 2. Roteer de context door bovenstaande code 3. Teken de afbeelding opnieuw maar doe dat houdt rekening met de hoogte en breedte van het object zodat het object roteert om zijn eigen zwaartepunt. 4. Herstel de bewaarde context. Het object is nu geroteerd. 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle =25; 07. 08. canvas = document.getelementbyid("canvas"); 09. context = canvas.getcontext("2d"); 10. car = new Image(); 11. car.src="myimage.png"; 12. 13. var moveinterval = setinterval(function() 14. { 15. draw(); 16. }, 30); 17.}; 18. 19.function draw() 20.{ 21. context = canvas.getcontext("2d"); 22. context.clearrect(0, 0, 800, 800); 23. 24. x += speed * Math.cos(Math.PI/180 * angle); 25. y += speed * Math.sin(Math.PI/180 * angle); 26. 27. context.save(); 28. context.translate(x, y); 29. context.rotate(math.pi/180 * angle); 30. context.drawimage(car, -(car.width/2), -(car.height/2)); 31. context.restore(); 32.}
We hebben nu een auto die kan bewegen en roteren. Het volgende dat we nodig hebben is de besturing vanuit het toetsenbord. Het toetsenbord geeft zogenaamde scancodes af. Deze scancodes zoeken we uit om in het spel te bepalen wat er moet gebeuren bij bijvoorbeeld pijltje naar rechts. De keycodes die het JavaScript bij een windows event leest voor het numeriek deel van het toetsenbord zijn; W: S: A: D: 87 83 65 68 Windows-event: én event.keycode. window.addeventlistener("keydown", keypress_handler, false); Door de waarde in event.keycode worden 2 variabelen bepaald ; mod en angle. Let op de wijziging in de berekening van de beweging:. x += (speed*mod) * Math.cos(Math.PI/180 * angle); 01.window.onload = function() 02.{ 03. x = 0; 04. y = 0; 05. speed = 5; 06. angle = 0; 07. mod = 0; 08. 09. canvas = document.getelementbyid("canvas"); 10. context = canvas.getcontext("2d"); 11. car = new Image(); 12. car.src="myimage.png"; 13. 14. window.addeventlistener("keydown", keypress_handler, false); 15. window.addeventlistener("keyup", keyup_handler, false); 16. 17. var moveinterval = setinterval(function()
18. { 19. draw(); 20. }, 30); 21.}; 22. 23.function draw() 24.{ 25. context = canvas.getcontext("2d"); 26. context.clearrect(0, 0, 800, 800); 27. 28. context.fillstyle = "rgb(200, 100, 220)"; 29. context.fillrect(50, 50, 100, 100); 30. 31. x += (speed*mod) * Math.cos(Math.PI/180 * angle); 32. y += (speed*mod) * Math.sin(Math.PI/180 * angle); 33. 34. context.save(); 35. context.translate(x, y); 36. context.rotate(math.pi/180 * angle); 37. context.drawimage(car, -(car.width/2), -(car.height/2)); 38. context.restore(); 39.} 40. 41.function keyup_handler(event) 42.{ 43. if(event.keycode == 87 event.keycode == 83) 44. { 45. mod = 0; 46. } 47.} 48. 49.function keypress_handler(event) 50.{ 51. console.log(event.keycode); 52. if(event.keycode == 87) 53. { 54. mod = 1; 55. } 56. if(event.keycode == 83) 57. { 58. mod = -1; 59. } 60. if(event.keycode == 65) 61. { 62. angle -= 5; 63. } 64. if(event.keycode == 68) 65. { 66. angle += 5; 67. } 68.}
8.Afronden van het project De basis van het spel heb je nu gemaakt. De achtergrond met aangepast worden zodat de auto ook echt over de weg en over obstakels kan rijden. Maak een grafische achtergrond zodat de dit echt zichtbaar wordt voor de speler. Daarnaast moet er ook een score komen voor het goed afleggen van een bekwaamheid die door de bedenker van dit spel bedacht is. tip maak een array van coördinaten die verboden zijn. Dus als de auto geplaatst wordt op coördinaten die niet mogelijk zijn volgens de achtergrond dan krijg je strafpunten. Hoe? gewoon afvragen voordat je verplaatst Bijvoorbeeld: Als x < -1 dan strafpunt Als x < 800 dan strafpunt. Als x > 30 && x < 40 dan sta je in het water en dus krijg je strafpunten.. Tip: Lees de coördinaten uit in het console.