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.
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.
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.
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.
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.
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.
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.