• Animieren mit Javascript
  • mcsvi
  • 13.04.2018
  • Mittlere Reife
  • https://www.tutory.de/w/82ad9520
    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).
    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
    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
    4
    Erstelle eine Variable und lege damit einen beliebigen Radius des Balles fest:

    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)
    }

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