Muisvolgers

werken met objecten in JavaScript

Muisvolgers in JavaScript : de opdracht (00:01:32)

Je ziet hier de muisvolger in actie. Ook wordt het document opgebouwd.
In deze reeks wordt gewerkt met objecten in Javascript. Veel plezier met deze opdracht. Je komt hier ook prototyping bij objecten tegen.

Muisvolgers in JavaScript stap 1 : de muispositie (00:04:38)

In dit deel proberen we de positie van de muis te vinden en dit continu weer te geven.
Voor dit continue deel maken we gebruik van requestAnimationFrame().
Met e.clientX en e.clientY wordt de posite van de muis bepaald.
Er met document.getElementsByID() wordt ook een variabele gemaakt waarin de bepaalde waarde geschreven wordt.

Muisvolgers in JavaScript stap 2: afbeeldingen plaatsen (00:16:27)

De muisvolgers bestaan uit verschillende afbeeldingen. Met document.createElement('img') worden de elementen gemaakt. Met addClass() een klasse meegegeven en document.appendChild() het object in de DOM geplaatst.

Muisvolgers in JavaScript stap 3: de volgers laten bewegen (00:05:41)

Om de volgers te laten bewegen, wordt in het object een bewegingsfunctie geschreven.
Met this.x en this.y wordt de positie bepaald. Met this.vx en this.vy wordt de snelheid vastgesteld, die bij elke update bij de this.x en this.y wordt opgeteld.

Muisvolgers in JavaScript stap 4: naar de muis bewegen (00:13:17)

De bewegingsfunctie wordt aangepast. De positie van de muis moet als argument worden meegeven.
Vervolgens kijken we naar het verschil van het doel met de huidige positie en nemen we daar het tiende deel van.
Ook wordt de rotatie door de muispositie bepaald.

Muisvolgers in JavaScript stap 5: een elastische beweging (00:07:09)

Om de beweging elastisch te maken wordt opnieuw de bewegingsfunctie aangepast.
De snelheid veranderd sterker naarmate het verschil groter wordt. In elke mate dat is, wordt bepaald door de veerconstante.
Deze wordt evenals de demping als prototype van de volger toegevoegd. Ook kan de roatie worden afgestemd op de snelheid.

Muisvolgers in JavaScript stap 6: volgers volgen elkaar (00:04:35)

De volgers moeten elkaar gaan volgen. De eerste volgt de muis, de volgende volgt de eerste en zo verder. De argumenten van de beweging zijn dus de posities van de vorige volger. Doordat de volgers in een array zitten, is zijn die eigenschappen uit de elementen van het array te halen.


Stuur mij afloop een linkje met het het resultaat dat online staat.