Javascript SpaceGame

(1)

Roc Zadkine

Javascript SpaceGame

Door: K.Bakker

versie 2.0

(2)

juni 2016

distributielijst

versie historie

versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker

1.0 2-2-2016 k.bakker

(3)

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

(4)

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.

(5)

1.1 Canvas code

<!DOCTYPE html>

<html>

<head>

// 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();

} }

(6)

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();

} }

(7)

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.closePath();

ctx.fillStyle = "rgb(222, 103, 0)";

ctx.fill();

// Teken UFO top.

ctx.beginPath();

ctx.moveTo(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>

</body>

</html>

(8)

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.

(9)

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 : zijn willekeurige coördinaten op het sterrenveld.

Math.PI x 2 : 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);