TitelAnimieren mit Javascript
Autormcsvi
veröffentlicht30.06.2020
BildungsgangMittlere Reife

Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.

Heute lassen wir einen Ball mit Javascript fliegen. Gib folgende Adresse vollständig ein:

www.jsbin.com/walepec/edit

Das Canvas Element is bereits vorbereitet und steht in der Variable leinwand zur Verfügung (wie letzte Woche).

Erstelle zwei Variablen, welche die aktuelle Position des Balles darstellen und lege die Anfangswerte fest (z.b. Ursprung):

var posX = 0
var posY = 0

Erstelle zwei weitere Variablen, welche die aktuellen Geschwindigkeit in x und y Richtung enthalten (Diese Werte kannst du selber festlegen):

var speedX = 1
var speedY = 2

Erstelle eine Variable und lege damit einen beliebigen Radius des Balles fest:

var radius = 10

Eine Funktion ist eine Art Container für Code, die du immer wieder aufrufen und ausführen kannst. Schreibe die Funktion bewegeBall(), die dafür sorgt, dass sich der Ball bewegt.

function bewegeBall() {

leinwand.clearRect(0,0,500,500)

posX =posX + speedX
posY =posY + speedY

leinwand.beginPath()
leinwand.arc(posX,posY, radius, 0, 2*Math.PI)
leinwand.fill()

window.requestAnimationFrame(bewegeBall)
}

löscht das gesamte Canvas vor jedem neuen Frame. Warum?

In jedem Schritt wird die Position des Balles verändert, indem die momentanen Geschwindigkeiten addiert werden. Dadurch bewegt sich der Ball.

Hier wird der Ball an die momentane Position gezeichnet (wie letzte Woche)

Diese Zeile sorgt dafür, dass die Funktion in der Klammer (also bewegeBall) 60 Mal in der Sekunde aufgerufen wird.

Um die Animation zu starten, rufen wir abschließend noch unsere Funktion bewegeBall auf:

bewegeBall()

Jetzt sollte der Ball fliegen.

Wie kannst du dafür sorgen, dass der Ball an den Wänden des Canvas reflektiert wird?

Wie könnte man daraus ein Ping-Pong Spiel bauen?