Roc Zadkine Javascript SpaceGame Door: K.Bakker versie 2.0
juni 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker 1.0 2-2-2016 k.bakker
inhoudsopgave 1. Game in HTML5 en JavaScript. 3 1.1 Canvas code 4 2. Canvas code bespreking 7 2.1 Body code 7 2.2 Script code 7 2.3 canvasspacegame functie 8 2.4 stars functie 8 2.5 UFO 8
1. Game in HTML5 en JavaScript. Met het gebruik van HTML5 en JavaScript wordt een eenvoudige sterrenachtergrond opgebouwd en een vliegend voorwerp dat als sterrenschip dient. De achtergrond wordt gevormd door een achtergrond van sterren die feitelijk gemaakt worden met de grafisch mogelijkheden van CANVAS. Dit zijn de geometrische basisvormen. Daarnaast wordt het sterrenschip gevormd door een object dat zich over de achtergrond beweegt. Het sterrenschip is de voorstelling van een UFO. Om het spel mogelijk te maken worden de volgende zaken uitgevoerd; Toevoegen van een canvas element aan een wegpagina Een zwarte achtergrond aanmaken Tekenen van sterren op de achtergrond. Toevoegen van de UFO als apart object voor de zwaarte achtergrond. Aan het einde van deze oefening worden nog wat tips gegeven om het spel aan te passen.
1.1 Canvas code <!DOCTYPE html> <html> <head> <script type="text/javascript"> // Deze functie wordt geladen tijdens de zgn page-load function canvasspacegame() { // Vind het canvas element canvas = document.getelementbyid("mycanvas"); // getcontext om de context te vatten if (canvas.getcontext) // Maak een canvas user interface element. { // Specificeer altijd 2d of 3d ctx = canvas.getcontext("2d"); // achtergrondkleur is zwart // de geometrische primitieven worden gebruikt als rechthoek // en vulkleur maar dan op het canvas-element ctx.fillstyle = "black"; ctx.rect(0, 0, 300, 300); ctx.fill(); // Teken de sterren op de achtergrond, functie stars() stars(); // Teken het ruimte schip, functie UFO() UFO();
function stars() { // Teken 50 sterren. for (i = 0; i <= 50; i++) { // Willekeurige posities voor de sterren in coordinaten x en y. // De wiskundige functies worden gebruikt én de grenswaarden // 300 worden aangehouden var x = Math.floor(Math.random() * 299); var y = Math.floor(Math.random() * 299); // Sterren kleuren wit ctx.fillstyle = "white"; // Ruimte rondom de UFO startpositie. Grootte 30x30 if (x < 30 y < 30) ctx.fillstyle = "black"; // teken een ster door een cirkel te tekenen ctx.beginpath(); ctx.arc(x, y, 3, 0, Math.PI * 2, true); ctx.closepath(); ctx.fill();
function UFO() { // Teken de UFO ctx.beginpath(); ctx.moveto(28.4, 16.9); ctx.beziercurveto(28.4, 19.7, 22.9, 22.0, 16.0, 22.0); ctx.beziercurveto(9.1, 22.0, 3.6, 19.7, 3.6, 16.9); ctx.beziercurveto(3.6, 14.1, 9.1, 11.8, 16.0, 11.8); ctx.beziercurveto(22.9, 11.8, 28.4, 14.1, 28.4, 16.9); ctx.closepath(); ctx.fillstyle = "rgb(222, 103, 0)"; ctx.fill(); // Teken UFO top. ctx.beginpath(); ctx.moveto(22.3, 12.0); ctx.beziercurveto(22.3, 13.3, 19.4, 14.3, 15.9, 14.3); ctx.beziercurveto(12.4, 14.3, 9.6, 13.3, 9.6, 12.0); ctx.beziercurveto(9.6, 10.8, 12.4, 9.7, 15.9, 9.7); ctx.beziercurveto(19.4, 9.7, 22.3, 10.8, 22.3, 12.0); ctx.closepath(); ctx.fillstyle = "rgb(51, 190, 0)"; ctx.fill(); </script> </head> <body onload="canvasspacegame()"> <! start het spel tijdens laden--> <h1> Canvas Space Game </h1> <canvas id="mycanvas" width="300" height="300"> </canvas> </body> </html>
2. Canvas code bespreking De code begint met een openingstags <!doctype html> waarmee feitelijk een HTML5 document geopend wordt. In de header wordt het javascript programma geplaatst met de tag <script type="text/javascript"> Het gehele spel bestaat uit 2 delen: Body code Script code 2.1 Body code In de body wordt een onload() functie gebruikt om het script canvasspacegame onmiddellijk op te starten.. Het canvas element is onderdeel van de HTML code. De afmetingen van het canvas element is bepaald in het ID attribuut. Dit ID atribuut is belangrijk om weer te gebruiken voor verdere bewerking. 2.2 Script code In de java script sectie worden 3 functies gemaakt; canvasspacegame, stars, and UFO. De functie canvasspacegame wordt aangeroepen als de pagina geladen wordt. Deze functie is dus de hoofdfunctie. De andere 2 functies (stars en UFO) worden aangeroepen vanuit de functie canvasspacegame.
2.3 canvasspacegame functie Deze functie wordt automatisch aangeroepen. Het zoekt eerst het canvas element in de de BODY van de HTML pagina. Het canvas element wordt gevonden door het ID. Daarna wordt de context ( inhoud) geladen van dit element om deze context te bewerken in 2D. Daarvoor worden de methoden gebruikt fillstyle, rect en fill. 2.4 stars functie Deze functie wordt aangeroepen vanuit de functie canvasspacegame. In een iteratieve loop wordt 50 maal een figuur getekend op willekeurige posities. De posities worden getekend op x en y coördinaten bepaald vanuit de linker bovenhoek. Daarnaast wordt een vlakje overgelaten voor de UFO op 30 x 30. De grafische primitieven fillstyle en arc worden gebruikt. Let op dat bij arc een volgorde aangehouden moet worden. beginpath(); arc(x, y, 3, 0, Math.PI * 2, true); closepath(); fill(); x en y Math.PI x 2 : zijn willekeurige coördinaten op het sterrenveld. : staat voor 2 π radiaal Documentatie: CanvasRenderingContext2D.arc(x, y, radius, startangle, endangle, anticlockwise); 2.5 UFO Deze functie wordt aangeroepen door de functie canvasspacegame. Hierbij wordt het sterrenschip getekend met de methode beziercurveto op het Canvas2D object. Documentatie: CanvasRenderingContext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);