taralino

Bewegung

Nun bringen wir Bewegung ins Spiel:

Der Spieler wird gemäß der physikalischen Bewegungsgleichung beschleunigt und erhöht damit in jedem Schritt der Animation seine Geschwindigkeit (in y-Richtung nach unten).

Was sich durchaus schwierig anhört, lässt sich im Programmcode allerdings sehr einfach umsetzen: In jedem Schritt der Animation wird die aktuelle Geschwindigkeit des Spielers erhöht (in y-Richtung nach unten). Die Position des Spielers verändert sich anschließend gemäß der Geschwindigkeit. Damit der Spieler weder nach unten noch nach oben das Spielfeld verlassen kann, werden entsprechende Abfragen integriert.

Zudem wird eine Interaktion eingebaut: Wenn auf die Zeichenfläche geklickt wird, verändert sich die Geschwindigkeit des Spielers, sodass dieser nach oben flattert:

Zur Referenz

Quellcode

Beispiel zur Bewegung: Klicke auf die Zeichenfläche.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

// Spieler
var x = 20; // x-Position
var y = 20; // y-Position
var r = 3; // Radius
var v = 0; // Geschwindigkeit in y-Richtung


function setup() {
  Canvas.init([0,100], [0,60], {width:600, background:"lightgrey"});
  Animation.init({fps:60});
};

function spiel_physik() {
  v = v - 0.08;
  y = y + v;
  if (y < 0) v = 1.4;
  if (y > 60) y = 60;
};

function spiel_zeichnen() {
  Canvas.clear();
  Canvas.circle(x, y, r, {fill:"yellow"});
};

function loop() {
  spiel_physik();
  spiel_zeichnen();
};

function on_mouse_down(x, y) {
  v = 1.4;
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Codingaufgabe

Mache dich mit dem Quellcode zuvor vertraut und verändere diesen:

Experimentiere mit den physikalischen Parametern der Beschleunigung
Passe die Geschwindigkeit beim Klicken mit der Maus an