Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.
Name:
Animieren mit Javascript
09.03.2018
1
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).
www.jsbin.com/walepec/edit
Das Canvas Element is bereits vorbereitet und steht in der Variable leinwand zur Verfügung (wie letzte Woche).
2
Erstelle zwei Variablen, welche die aktuelle Position des Balles darstellen und lege die Anfangswerte fest (z.b. Ursprung):
var posX = 0
var posY = 0
var posX = 0
var posY = 0
3
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
var speedX = 1
var speedY = 2
4
Erstelle eine Variable und lege damit einen beliebigen Radius des Balles fest:
var radius = 10
var radius = 10
5
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)
}
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.
6
Um die Animation zu starten, rufen wir abschließend noch unsere Funktion bewegeBall auf:
bewegeBall()
Jetzt sollte der Ball fliegen.
bewegeBall()
Jetzt sollte der Ball fliegen.
7
Wie kannst du dafür sorgen, dass der Ball an den Wänden des Canvas reflektiert wird?
8
Wie könnte man daraus ein Ping-Pong Spiel bauen?
Angaben zu den Urhebern und Lizenzbedingungen der einzelnen Bestandteile dieses Dokuments finden Sie unter
https://www.tutory.de/entdecken/dokument/82ad9520
https://www.tutory.de/entdecken/dokument/82ad9520
